Skip to content

WebRTC Publish & Play JavaScript SDK

Jump to bottom
Murat Ugur Eminoglu edited this page May 17, 2022 · 14 revisions

Attention: We have migrated our documentation to our new platform, Ant Media Resources. Please follow this link for the latest and up-to-date documentation.

NOTE: We have updated our documentation. This page is outdated. You can access updated version from the sidebar menu.

Ant Media Server provides WebSocket interface in publishing and playing WebRTC streams. In this document, we will show both how to publish and play WebRTC streams by using JavaScript SDK.

How to Publish WebRTC stream with JavaScript SDK

Let's see how to make it step by step

  1. Load the below scripts in head element of the html file
<head>
...
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js" ></script>
...
</head>
  1. Create local video element somewhere in the body tag
<video id="localVideo" autoplay muted width="480"></video>
  1. Initialize the WebRTCAdaptor object in script tag
	var pc_config = null;

	var sdpConstraints = {
		OfferToReceiveAudio : false,
		OfferToReceiveVideo : false

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

	var webRTCAdaptor = new WebRTCAdaptor({
		websocket_url : "ws://" + location.hostname + ":"+location.port+"/WebRTCAppEE",
		mediaConstraints : mediaConstraints,
		peerconnection_config : pc_config,
		sdp_constraints : sdpConstraints,
		localVideoId : "localVideo",
		callback : function(info) {
			if (info == "initialized") 
                        {
				console.log("initialized");
				
			} 
                        else if (info == "publish_started") 
                        {
				//stream is being published 
				console.log("publish started");	
			} 
                        else if (info == "publish_finished") 
                        {
				//stream is finished
				console.log("publish finished");
			} 
                        else if (info == "screen_share_extension_available") 
                        {
                                //screen share extension is avaiable
				console.log("screen share extension available");
			} 
                        else if (info == "screen_share_stopped") 
                        {
                                 //"Stop Sharing" is clicked in chrome screen share dialog
				console.log("screen share stopped");
			}

		},
		callbackError : function(error) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError

			console.log("error callback: " + error);
			alert(error);
		}
	});
  1. Call publish(streamName) to Start Publishing

In order to publish WebRTC stream to Ant Media Server, WebRTCAdaptor's publish(streamName) function should be called. You can choose the call this function in success callback function when the info parameter is having value "initialized"

 if (info == "initialized")  
 {  
  // it is called with this parameter when it connects to                            
  // Ant Media Server and everything is ok 
  console.log("initialized");
  webRTCAdaptor.publish("stream1");
 }
  1. Call stop() to Stop Publishing

You may want to stop publishing anytime by calling stop function of WebRTCAdaptor

webRTCAdaptor.stop()

Sample

Please take a look at the WebRTCAppEE/index.html file in order to see How JavaScript SDK can be used for publishing a stream

How to Play WebRTC stream with JavaScript SDK

  1. Load the below scripts in head element of the html file
<head>
...
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js" ></script>
...
</head>
  1. Create remote video element somewhere in the body tag
<video id="remoteVideo" autoplay controls></video>
  1. Initialize the WebRTCAdaptor object like below in script tag
  var pc_config = null;

	var sdpConstraints = {
		OfferToReceiveAudio : true,
		OfferToReceiveVideo : true

	};
	var mediaConstraints = {
		video : true,
		audio : true
	};
	
	var webRTCAdaptor = new WebRTCAdaptor({
		websocket_url : "ws://" + location.hostname + ":"+ location.port +"/WebRTCAppEE",
		mediaConstraints : mediaConstraints,
		peerconnection_config : pc_config,
		sdp_constraints : sdpConstraints,
		remoteVideoId : "remoteVideo",
		isPlayMode: true,
		callback : function(info) {
			if (info == "initialized") {
				console.log("initialized");
			
			} else if (info == "play_started") {
				//play_started
				console.log("play started");
			
			} else if (info == "play_finished") {
				// play finishedthe stream
				console.log("play finished");
				
			}
		},
		callbackError : function(error) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError

			console.log("error callback: " + error);
			alert(error);
		}
	});
  1. Call play(streamName) to Start Playing

In order to play WebRTC stream to Ant Media Server, WebRTCAdaptor's play(streamName) function should be called.

You can choose the call this function in success callback function when the info parameter is having value "initialized"

 if (info == "initialized")  
 {  
  // it is called with this parameter when it connects to                            
  // Ant Media Server and everything is ok 
  console.log("initialized");
  webRTCAdaptor.play("stream1");
 }
  1. Call stop() to Stop Playing

You may want to stop play anytime by calling stop function of WebRTCAdaptor

webRTCAdaptor.stop()

Take a look at JavaScript Error Callbacks to handle callbacks gracefully

Sample

Please take a look at the WebRTCAppEE/player.html file in order to see How JavaScript SDK can be used for playing a stream

User Guide

Reference

Troubleshooting

Draft

Proposals

Clone this wiki locally