آموزش HTML - کنسرسیوم وب جهان‌گستر (W3C)

Web RTC توسط کنسرسیوم وب جهان‌گستر (W3C) معرفی شده است که از برنامه‌های مرورگر به مرورگر برای تماس صوتی، چت ویدیویی و اشتراک‌گذاری فایل همتا به همتا (P2P) پشتیبانی می‌کند.

ویژگی web RTC سه API را به شرح زیر پیاده‌سازی می‌کند −

• MediaStream − دسترسی به دوربین و میکروفون کاربر.

• RTCPeerConnection − دسترسی به قابلیت تماس صوتی یا ویدیویی.

• RTCDataChannel − دسترسی به ارتباط همتا به همتا (peer-to-peer).

MediaStream

رابط MediaStream نشان‌دهنده جریان‌های رسانه‌ای همگام‌سازی‌شده است. برای نمونه، روی پخش‌کننده ویدیوی HTML5 در بخش دموهای HTML5 کلیک کنید یا اینجا را فشار دهید.

مثال بالا شامل stream.getAudioTracks() و stream.VideoTracks() است. اگر هیچ ترک صوتی وجود نداشته باشد، یک آرایه خالی برمی‌گرداند و جریان ویدیویی را بررسی می‌کند؛ اگر وب‌کم متصل باشد، stream.getVideoTracks() آرایه‌ای از یک MediaStreamTrack برمی‌گرداند که نشان‌دهنده جریان ویدیو از وب‌کم است. یک نمونه ساده، برنامه‌های چت است؛ یک برنامه چت، جریان را از وب‌کم، دوربین پشتی و میکروفون دریافت می‌کند.

نمونه کد MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

کنترل نشست، شبکه و اطلاعات رسانه

تکنولوژی Web RTC به ارتباط همتا به همتا (peer-to-peer) بین مرورگرها نیاز دارد. این مکانیزم به سیگنال‌دهی، اطلاعات شبکه، کنترل نشست و اطلاعات رسانه نیاز دارد. توسعه‌دهندگان وب می‌توانند مکانیزم‌های مختلفی مانند SIP یا XMPP یا هر ارتباط دوطرفه دیگری را برای ارتباط بین مرورگرها انتخاب کنند.

نمونه کد createSignalingChannel()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      if (isCaller)
         pc.createOffer(gotDescription);
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};