How to Publish and Play Two Audio Streams in JavaScript - Live Sample on codepen.io

[mekya]

Hi Guys,
Here are simple samples to publish two audio streams in one page and play the same audio streams in another page.

Publish Two Audio Streams

Live Sample is available on https://codepen.io/mekya/pen/dyQmPee

1. Add following HTML tags to your webapp

<audio id="localAudio1" autoplay controls muted></audio>
<br/>
Id: <span id="localAudio1Id"></span> - Status: <span id="status1">Idle</span>
<br/>
<audio id="localAudio2" autoplay controls muted></audio>
<br/>
Id: <span id="localAudio2Id"></span> - Status: <span id="status2">Idle</span>
<br/>
<br/>
<button id="toggleButton" disabled>Start</button> 

2. Import WebRTCAdaptor to your project through npmjs.com or as below and add codes
   PAY ATTENTION THAT YOU NEED TO USE SAME STREAM ID ( stream1Idandstream2Id` variables) IN THE PLAYER.
   SAVE THE STREAM IDs OR GIVE RANDOM STATIC VALUES BELOW AND USE THEM IN THE PLAYER.

import {WebRTCAdaptor} from "https://cdn.skypack.dev/@antmedia/webrtc_adaptor@SNAPSHOT";

var mediaConstraints = {
		video: false,
		audio: true
	};

	
 var websocketURL = "wss://test.antmedia.io/WebRTCAppEE/websocket"

//PAY ATTENTION THAT THESE STREAM IDs SHOULD MATCH THE STREAM IDs IN THE PLAYER
var stream1Id = "stream" + Math.floor(Math.random() * 1000);
var stream2Id = "stream" + Math.floor(Math.random() * 1000);

document.getElementById("localAudio1Id").innerHTML =  stream1Id;
document.getElementById("localAudio2Id").innerHTML = stream2Id;

var webRTCAdaptor1 = new WebRTCAdaptor ({
		websocket_url: websocketURL,
		mediaConstraints: mediaConstraints,
		localVideoId: "localAudio1",
		debug: true,
		callback: function (info, description) {
			if (info == "initialized") {
				console.log("initialized");
                                 document.getElementById("toggleButton").disabled = false
			} else if (info == "publish_started") {
				//stream is being published
				console.log("publish started");
                                 document.getElementById("status1").innerHTML = "Publishing"
        
			} else if (info == "publish_finished") {
				console.log("publish finished");
                                 document.getElementById("status1").innerHTML = "Idle"
			}
			else if (info == "closed") {
				console.log("Connection closed");
                                 document.getElementById("status1").innerHTML = "Idle"
			}
		},
		callbackError: function (error, message) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
      alert("error: " + error + " message:" + message);

		}
	});

//currently Ant Media Server accepts one streams from the same webrtc session so we create the second webrtc adaptor
var webRTCAdaptor2 = new WebRTCAdaptor ({
		websocket_url: websocketURL,
		mediaConstraints: mediaConstraints,
		localVideoId: "localAudio2",
		debug: true,
		callback: function (info, description) {
			if (info == "initialized") {
				console.log("initialized");
			} else if (info == "publish_started") {
				//stream is being published
				console.log("publish started");
                                document.getElementById("status2").innerHTML = "Publishing"
			} else if (info == "publish_finished") {
				console.log("publish finished");
                                 document.getElementById("status2").innerHTML = "Idle"
			}
			else if (info == "closed") {
				console.log("Connection closed");
                                document.getElementById("status2").innerHTML = "Idle"
			}
		},
		callbackError: function (error, message) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
      alert("error: " + error + " message:" + message);

		}
	});

//just a dummy check
var isPublishing = false;

document.getElementById("toggleButton").addEventListener("click", 
function togglePublishing() {
  
  if (!isPublishing) {
    webRTCAdaptor1.publish(stream1Id);
    webRTCAdaptor2.publish(stream2Id);
    document.getElementById("toggleButton").innerHTML = "Stop";
  }
  else {
     webRTCAdaptor1.stop(stream1Id);
     webRTCAdaptor2.stop(stream2Id);
     document.getElementById("toggleButton").innerHTML = "Start";
  }
  isPublishing = !isPublishing;
});

Play Two Audio Stream

Live sample is available on https://codepen.io/mekya/pen/JjeLYpY

1. Add following HTML tags to your webapp

<audio id="audioPlayer1" autoplay controls ></audio><br>
Id: <span id="streamId1"></span> - Status: <span id="status1">Idle</span>
<br/>
<audio id="audioPlayer2" autoplay controls ></audio>
<br/>
Id: <span id="streamId2"></span> - Status: <span id="status2">Idle</span>
<br/>
<br/>
<button id="toggleButton" disabled>Play</button>

2. Import WebRTCAdaptor to your project through npmjs.com or as below and add codes

PAY ATTENTION THAT YOU NEED TO USE SAME STREAM ID( stream1Id and stream2Id variables) THAT YOU USE IN THE PUBLISHER

import {WebRTCAdaptor} from "https://cdn.skypack.dev/@antmedia/webrtc_adaptor@SNAPSHOT";

//PAY ATTENTION THAT YOU NEED TO USE SAME STREAM ID THAT YOU USE IN THE PUBLISHER
var stream1Id = "stream585";
var stream2Id = "stream531";
  
	
 var websocketURL = "wss://test.antmedia.io/WebRTCAppEE/websocket"

document.getElementById("streamId1").innerHTML =  stream1Id;
document.getElementById("streamId2").innerHTML = stream2Id;

var webRTCAdaptor = new WebRTCAdaptor ({
		websocket_url: websocketURL,
    isPlayMode: true,
		callback: function (info, description) {
			if (info == "initialized") {
				console.log("initialized");
        document.getElementById("toggleButton").disabled = false
			} else if (info == "play_started") {
				//stream is being published
				console.log("play started for " + description.streamId);
        if (description.streamId == stream1Id) {
           document.getElementById("status1").innerHTML = "Playing";
        }
        else {
           document.getElementById("status2").innerHTML = "Playing";
        }
        
			} else if (info == "play_finished") {
				console.log("play finished");
         if (info.streamId == stream1Id) {
         document.getElementById("status1").innerHTML = "Idle";
        }
        else {
           document.getElementById("status2").innerHTML = "Idle";
        }
			}
			else if (info == "closed") {
				console.log("Connection closed");
        document.getElementById("status1").innerHTML = "Idle";
         document.getElementById("status2").innerHTML = "Idle"
			}
      else if (info == "newTrackAvailable") 
      { 
        console.log("newTrackAvailable " + JSON.stringify(description))
        if (description.streamId == stream1Id) 
        { 
         document.getElementById("audioPlayer1").srcObject = new MediaStream();         document.getElementById("audioPlayer1").srcObject.addTrack(description.track);
        }
        else if (description.streamId == stream2Id) {
            document.getElementById("audioPlayer2").srcObject = new MediaStream();document.getElementById("audioPlayer2").srcObject.addTrack(description.track);
        }
			}
		},
		callbackError: function (error, message) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
      alert("error: " + error + " message:" + message);

		}
	});



//just a dummy check
var isPlaying = false;

document.getElementById("toggleButton").addEventListener("click", 
function () {
  
  if (!isPlaying) {
    webRTCAdaptor.play(stream1Id);
    webRTCAdaptor.play(stream2Id);
    document.getElementById("toggleButton").innerHTML = "Stop";
  }
  else {
     webRTCAdaptor.stop(stream1Id);
     webRTCAdaptor.stop(stream2Id);
     document.getElementById("toggleButton").innerHTML = "Start";
  }
  isPlaying = !isPlaying;
});