Unable to load WebRTC audio track into HTML audio element

Question

I can't manage to load the WebRTC audio track into the HTML audio to play, it looks like the src source does not update.

You will find the implementation in JSFiddle here: https://jsfiddle.net/redvivi/ut3pgcnq/

Here is the code sections of interest:

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();
        });
      }
    });
  })

I have also confirmed that the WebRTC stream actually returns data (cf below)

Am I missing something?

Answer 1

I have simplified your code for demonstration purposes, if both caller and callee are using the Chrome browser, it works.

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)

Usage: Browse the fiddle, and then click the start button.

When both parties show the word "registered" in the textarea, you can go to the caller browser, and click the "call" button, then you can listen to the audio from the caller side on the callee side.

PS: In the callee, I have added the "autoplay" attribute to the audio tag, so that it can play the audio once the stream arrived.

Answer 2

You may replace the following statements:

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

with

remoteAudio.srcObject=e.streams[0];

And replace

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

with

remoteAudio.srcObject = event.track;

Answer 3

have you tried the PeerJS library? It is simpler than JSSIP.