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.