How to fetch remoteAudio stream from kurento-media-server(when we create loopback) and bind it to <audio> tag

28 views Asked by At

I am using existing audio i.e mp3 source file and sending it's stream to kurento-media-server(KMS) using audioStream property of options, now I am also creating loopback connection with webRtc itself so that whatever we pass to KMS will receive back, now I want to fetch those remote audio stream which KMS is sending back and want to start playing it in

<div class="kurento">
  <div>
    <h3>Local stream</h3>
    <audio id="existingAudio" autoplay controls>
      <source src="path/audio.mp3" type="audio/mpeg">
    </audio>
  </div>
  <div>
    <h3>Remote stream</h3>
    <audio id="audioOutput" autoplay controls></audio>
  </div>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>


function getopts(args, opts)
{
  var result = opts.default || {};
  args.replace(
      new RegExp("([^?=&]+)(=([^&]*))?", "g"),
      function($0, $1, $2, $3) { result[$1] = decodeURI($3); });

  return result;
};

var args = getopts(location.search,
{
  default:
  {
    ws_uri: "wss://" + "IP" + ":8433/kurento",
    ice_servers: undefined
  }
});

function setIceCandidateCallbacks(webRtcPeer, webRtcEp, onerror)
{
  webRtcPeer.on('icecandidate', function(candidate) {
    console.log("Local candidate:",candidate);

    candidate = kurentoClient.getComplexType('IceCandidate')(candidate);

    webRtcEp.addIceCandidate(candidate, onerror)
  });

  webRtcEp.on('IceCandidateFound', function(event) {
    var candidate = event.candidate;

    console.log("Remote candidate:",candidate);

    webRtcPeer.addIceCandidate(candidate, onerror);
  });
}

window.addEventListener('load', function()
{
  console.log("inside load")
  console = new Console();

  var webRtcPeer;
  var pipeline;

  var startButton = document.getElementById("start");
  var stopButton = document.getElementById("stop");

  var pipeline;

  function getYourAudioStream() {
    var existingAudio = document.getElementById("existingAudio");
    existingAudio.currentTime = 0;
    existingAudio.play();
    return existingAudio.captureStream();
  }

  startButton.addEventListener("click", function()
  {
    console.log("on click")

    var options = {
      audioStream: getYourAudioStream(),
      //remoteVideo: null,
      mediaConstraints: {
        audio: true,
        video: false
      }
    };

    var webRtcPeer;

    webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(options, function(error)
    {
      if(error) return onError(error)

      console.log("webRtcPeer: " + webRtcPeer);
      this.generateOffer(onOffer)
    });

    function onOffer(error, sdpOffer)
    {
      if(error) return onError(error)

      kurentoClient(args.ws_uri, function(error, client)
      {
        if(error) return onError(error);

        client.create("MediaPipeline", function(error, _pipeline)
        {
          if(error) return onError(error);

          pipeline = _pipeline;

          pipeline.create("WebRtcEndpoint", function(error, webRtc){
            if(error) return onError(error);

            setIceCandidateCallbacks(webRtcPeer, webRtc, onError)

            webRtc.processOffer(sdpOffer, function(error, sdpAnswer){
              if(error) return onError(error);
              webRtcPeer.processAnswer(sdpAnswer, onError);
            });

            webRtc.gatherCandidates(onError);

            webRtc.connect(webRtc, function(error){
              if(error) return onError(error);

              console.log("Loopback established");
            });

          });
        });
      });
    }
  });
  stopButton.addEventListener("click", stop);


  function stop() {
    var existingAudio = document.getElementById("existingAudio");
    existingAudio.pause();
    var audioOutput = document.getElementById("audioOutput");
    audioOutput.pause();
    if (webRtcPeer) {
      webRtcPeer.dispose();
      webRtcPeer = null;
    }

    if(pipeline){
      pipeline.release();
      pipeline = null;
    }

  }

  function onError(error) {
    if(error)
    {
      console.error(error);
      stop();
    }
  }
})

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
})
0

There are 0 answers