Antmedia Enterprise ile Kendi Radyo Kanalınızı Kurun

Published by Murat AYDIN on

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.

Categories: Makale

Related Posts

ant media server google cloud
Makale

Google Cloud Sanal Makina üzerinde Ant Media Server nasıl kurulur ?

Bu yazı içerisinde size Ant Media Server’i Google Cloud Platformundaki sanal makinanıza kolayca nasıl kurulum yapacağınızı anlatacağım. Google Cloud platformu, üzerinde Ant Media Server’i kurmanız için çok uygun bir ortam. Ayrıca, ilk kayıt olduğunuzda size Read more…

webhooks extensions
Makale

Webhook Entegrasyonu: Endişelenmeyin, haberler sizde

Ant Media Server sunucuda gerçekleşen temel olaylardan uygulama sunucunuz haberdar olsun diye webhook özelliğini desteklemektedir. Bu sayede, Ant Media Server’a kendi webhook URL adresinizi kayıt edebilir ve Ant Media Server’in bu URL adresini yeni bir Read more…

peer2peer 2
Makale

Canlı Yayında Yeni Trend WebRTC Teknolojisi

WebRTC ve WebRTC Sunucuları İletişim teknolojileri geliştikçe, internet üzerinde canlı video yayınlamak da gitgide yaygınlaşıyor. İnternet üzerinden yayın yapmakla ilgilenen bir kişi mutlaka WebRTC teknolojisiyle karşılaşacaktır. Çoğu zaman WebRTC’nin yanında WebRTC sunucuları da önemli bir Read more…