javascript 无法将WebRTC音频轨道加载到HTML音频元素中

tmb3ates  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(147)

我无法将WebRTC音轨加载到HTML音频中播放,看起来src源代码没有更新。
你可以在这里找到JSFiddle的实现:https://jsfiddle.net/redvivi/ut3pgcnq/
以下是我们感兴趣的代码部分:

HTML

<audio id="remoteAudio" controls></audio>

JS

function attachRemoteStream(session) {
  // Fetch the existing audio element or create a new one

  session.connection.ontrack = (event) => {
    if (event.track.kind === 'audio') {
      if (event.streams.length > 0) {
        remoteAudio.srcObject = event.streams[0];
      } else {
        const stream = new MediaStream([event.track]);
        remoteAudio.srcObject = stream;
      }
    }
  };
}
phone.on('newRTCSession',function(ev){
    var newSession = ev.session;
    [...]
    session.on('peerconnection', (e) => { // peerconnection is RTCPeerConnection instance
      if(session.direction === 'incoming'){
        attachRemoteStream(session);
        remoteAudio.load();
        remoteAudio.play();        
      } else {
        session.connection.addEventListener('track', function (e) {
          // set remote audio stream
          remoteAudio.src = window.URL.createObjectURL(e.streams[0]);
          remoteAudio.load();
          remoteAudio.play();
        });
      }
    });
  })

我还确认了WebRTC流实际上返回数据(参见下文)

我错过了什么吗?

qlzsbp2j

qlzsbp2j1#

为了演示目的,我已经简化了您的代码,如果调用者和被调用者都使用Chrome浏览器,它就可以工作了。

session.connection.ontrack = e => {
  msglog("connection");
  let qq = document.getElementById("qq");
  msglog("event key:" + JSON.stringify(e));
  qq.srcObject = e.streams[0];
}

https://jsfiddle.net/0z5srjue/ (caller)

session.connection.ontrack = e => {
  msglog("connection");
  let qq = document.getElementById("qq");
  msglog("event key:" + JSON.stringify(e));
  qq.srcObject = e.streams[0];
}

https://jsfiddle.net/4x8L9pw6/ (callee)

用法:浏览小提琴,然后单击开始按钮。
当双方在文本区域显示“注册”字样时,可以进入主叫浏览器,点击“呼叫”按钮,应该点击“呼叫”按钮,就可以在被叫端收听来自主叫端的音频。
PS:在被调用者中,我已经在音频标签中添加了“自动播放”属性,这样一旦流到达,它就可以播放音频。

agxfikkp

agxfikkp2#

您可以替换以下语句:

remoteAudio.src = window.URL.createObjectURL(e.streams[0]);
      remoteAudio.load();
      remoteAudio.play();

remoteAudio.srcObject=e.streams[0];

并取代

const stream = new MediaStream([event.track]);
remoteAudio.srcObject = stream;

remoteAudio.srcObject = event.track;
8qgya5xd

8qgya5xd3#

你试过PeerJS库吗?它比JSSIP更简单。

相关问题