HTML5 - Web RTC

Web RTC diperkenalkan oleh World Wide Web Consortium (W3C). Itu mendukung aplikasi browser-browser untuk panggilan suara, obrolan video, dan berbagi file P2P.

Jika Anda ingin mencobanya? web RTC tersedia untuk Chrome, Opera, dan Firefox. Tempat yang baik untuk memulai adalah aplikasi obrolan video sederhana di sini . Web RTC mengimplementasikan tiga API seperti yang ditunjukkan di bawah ini -

• MediaStream - dapatkan akses ke kamera dan mikrofon pengguna.

• RTCPeerConnection - Dapatkan akses ke fasilitas panggilan audio atau video.

• RTCDataChannel - dapatkan akses ke komunikasi peer-to-peer.

MediaStream

MediaStream mewakili aliran media yang disinkronkan, Sebagai contoh, Klik Pemutar Video HTML5 di bagian demo HTML5 atau klik di sini .

Contoh di atas berisi stream.getAudioTracks () dan stream.VideoTracks (). Jika tidak ada trek audio, ia mengembalikan larik kosong dan akan memeriksa aliran video, jika webcam terhubung, stream.getVideoTracks () mengembalikan larik dari satu MediaStreamTrack yang mewakili aliran dari webcam. Contoh sederhananya adalah aplikasi chat, aplikasi chat mendapat streaming dari kamera web, kamera belakang, mikrofon.

Kode contoh 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);

Cuplikan Layar

Ini juga dimungkinkan di browser Chrome dengan mediaStreamSource dan membutuhkan HTTPS. Fitur ini belum tersedia di opera. Demo sampel tersedia di sini

Kontrol Sesi, Informasi Jaringan & Media

Web RTC membutuhkan komunikasi peer-to-peer antar browser. Mekanisme ini membutuhkan sinyal, informasi jaringan, kontrol sesi dan informasi media. Pengembang web dapat memilih mekanisme yang berbeda untuk berkomunikasi antara browser seperti SIP atau XMPP atau komunikasi dua arah. Contoh contoh XHR ada di sini .

Contoh kode 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));
};