Try Live Demo

Ant Media Sunucusu WebRTC yayınlarını yayınlayabilmek için WebSocket interface sağlamaktadır. Bu dokümanda Javascript SDK kullanılarak WebRTC audio yayınlarının nasıl yayınlanacağı ve oynatılacağı anlatılacaktır.

Javascript SDK Kullanarak Sadece Audio Yayını Nasıl Yapılır

Adım adım nasıl yapılacağını görelim:

1.Aşağıdaki scripti html dosyasının head elemanı içinde yükleyin

<head>
...
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js" ></script>
...
</head>

2.Body tag içerisinde lokal audio elemanı oluşturun

<audio id="localVideo" autoplay controls muted></audio>

3. WebRTCAdaptor nesnesini script tagı içerisinde ilkleyin

        var pc_config = null;

	var sdpConstraints = {
		OfferToReceiveAudio : false,
		OfferToReceiveVideo : false

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

        var websocketURL = "ws://" + location.hostname + ":5080/WebRTCAppEE/websocket";
       
       if (location.protocol.startsWith("https")) {
           websocketURL = "wss://" + location.hostname + ":5443/WebRTCAppEE/websocket";
       }

	var webRTCAdaptor = new WebRTCAdaptor({
		websocket_url : websocketURL,
		mediaConstraints : mediaConstraints,
		peerconnection_config : pc_config,
		sdp_constraints : sdpConstraints,
		localVideoId : "localVideo",
                debug : true,
		callback : function(info) {
			if (info == "initialized") {
				console.log("initialized");
	                        start_publish_button.disabled = false;
                                stop_publish_button.disabled = true;
			} else if (info == "publish_started") {
				//stream is being published 
				console.log("publish started");
				start_publish_button.disabled = true;
                                stop_publish_button.disabled = false;
                                startAnimation();
			} else if (info == "publish_finished") {
				//stream is finished
				console.log("publish finished");
				start_publish_button.disabled = false;
                                stop_publish_button.disabled = true;
			}
                        else if(info == "closed"){
                                //console.log("Connection closed");
                                if (typeof description != "undefined") {
                                    console.log("Connecton closed: " + JSON.stringify(description));
                                }
                        }
		},
		callbackError : function(error) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError

			console.log("error callback: " +  JSON.stringify(error));
			var errorMessage = JSON.stringify(error);
                        if (typeof message != "undefined") {
                            errorMessage = message;
                        }
                        var errorMessage = JSON.stringify(error);
                        if (error.indexOf("NotFoundError") != -1) {
                            errorMessage = "Camera or Mic are not found or not allowed in your device";
                        }
                        else if (error.indexOf("NotReadableError") != -1 || error.indexOf("TrackStartError") != -1){
                                 errorMessage = "Camera or Mic is being used by some other process that does not let read the devices";
                        }
                        else if(error.indexOf("OverconstrainedError") != -1 || error.indexOf("ConstraintNotSatisfiedError") != -1) {
                                errorMessage = "There is no device found that fits your video and audio constraints. You may change video and audio constraints"
                        }
                        else if (error.indexOf("NotAllowedError") != -1 || error.indexOf("PermissionDeniedError") != -1) {
                                 errorMessage = "You are not allowed to access camera and mic.";
                        }
                        else if (error.indexOf("TypeError") != -1) {
                                 errorMessage = "Video/Audio is required";
                        }
                        alert(errorMessage);
		}
	});

4.Yayına başlamak için publish(streamName) metodunu çağırın

Ant Media Sunucusuna WebRTC yayını gönderebilmek için WebRTCAdaptor’ın publish(streamName) metodu çağırılmalıdır. Bu metodu bir buton click içerisinde çağırabilirsiniz.

function startPublishing() {  
  // Get streamId as parameter from a text box                            
  streamId = streamNameBox.value;
  webRTCAdaptor.publish("streamId");
 }

<button onclick="startPublishing()" class="btn btn-info" 
disabled id="start_publish_button">Start Publishing</button>

5.Yayını durdurmak içinstop(streamName) metodunu çağırın

WebRTCAdaptor’un stop metodunu istediğiniz zaman çağırarak yayını durdurabilirsiniz

function stopPublishing() {
  webRTCAdaptor.stop(streamId)
}

WebRTCAppEE/audio_publish.html dosyasına bakarak da Javascript SDK ile audio yayını yapmayı görebilirsiniz.

Javascript SDK Kullanarak Sadece Audio Yayını Nasıl Oynatılır

1.Aşağıdaki scripti html dosyasının head elemanı içinde yükleyin

<head>
...
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js" ></script>
...
</head>

2..Body tag içerisinde uzak audio elemanı oluşturun

<audio id="remoteVideo" autoplay controls muted></audio>

3.WebRTCAdaptor nesnesini script tagı içerisinde ilkleyin

        var pc_config = null;

	var sdpConstraints = {
		OfferToReceiveAudio : true,
		OfferToReceiveVideo : true

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

        var websocketURL = "ws://" + location.hostname + ":5080/WebRTCAppEE/websocket";
       
       if (location.protocol.startsWith("https")) {
           websocketURL = "wss://" + location.hostname + ":5443/WebRTCAppEE/websocket";
       }

	var webRTCAdaptor = new WebRTCAdaptor({
		websocket_url : websocketURL,
		mediaConstraints : mediaConstraints,
		peerconnection_config : pc_config,
		sdp_constraints : sdpConstraints,
		remoteVideoId : "remoteVideo",
                isPlayMode:true,
                debug : true,
		callback : function(info) {
			if (info == "initialized") {
				console.log("initialized");
	                        start_play_button.disabled = false;
                                stop_play_button.disabled = true;
			} else if (info == "publish_started") {
				//joined the stream
				console.log("play started");
				start_play_button.disabled = true;
                                stop_play_button.disabled = false;
                                startAnimation();
			} else if (info == "publish_finished") {
				//leaved the stream
				console.log("publish finished");
				start_play_button.disabled = false;
                                stop_play_button.disabled = true;
			}
                        else if(info == "closed"){
                                //console.log("Connection closed");
                                if (typeof description != "undefined") {
                                    console.log("Connecton closed: " + JSON.stringify(description));
                                }
                        }
		},
		callbackError : function(error) {
			//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError

			console.log("error callback: " +  JSON.stringify(error));
			var errorMessage = JSON.stringify(error);
                        alert(errorMessage);
		}
	});

4.Yayını oynatmak içinplay(streamName) metodunu çağırın

Ant Media Sunucusunda WebRTC yayını oynatabilmek için WebRTCAdaptor’ınplay(streamName)metodu çağırılmalıdır. Bu metodu bir buton click içerisinde çağırabilirsiniz.

function startPlaying() {  
  // Get streamId as parameter from a text box                            
  streamId = streamNameBox.value;
  webRTCAdaptor.play(streamId);
 }

<button onclick="startPlaying()" class="btn btn-info" 
disabled id="start_play_button">Start Playing</button>

5.Oynatmayı durdurmak için stop(streamName) metodunu çağırın

WebRTCAdaptor’un stop metodunu istediğiniz zaman çağırarak yayını oynatmayı durdurabilirsiniz

function stopPlaying() {
  webRTCAdaptor.stop(streamId)
}

WebRTCAppEE/audio_player.html dosyasına bakarak da Javascript SDK ile audio yayını oynatmayı görebilirsiniz.

Kategoriler: Makale

chatsimple
Warning: Undefined array key "promocode" in /home/mirror.antmedia.io/public_html/wp-content/themes/hestia-child/footer.php on line 70