HTML5 - Web RTC

Web RTC introdotto dal World Wide Web Consortium (W3C). Supporta applicazioni browser per chiamate vocali, chat video e condivisione di file P2P.

Se vuoi provare? Web RTC disponibile per Chrome, Opera e Firefox. Un buon punto di partenza è la semplice applicazione di chat video qui . Web RTC implementa tre API come mostrato di seguito:

• MediaStream - accedi alla videocamera e al microfono dell'utente.

• RTCPeerConnection - ottenere l'accesso alla funzione di chiamata audio o video.

• RTCDataChannel - ottenere l'accesso alla comunicazione peer-to-peer.

MediaStream

Il MediaStream rappresenta flussi di media sincronizzati, ad esempio, fare clic su lettore video HTML5 nella sezione demo HTML5 oppure fare clic qui .

L'esempio precedente contiene stream.getAudioTracks () e stream.VideoTracks (). Se non ci sono tracce audio, restituisce un array vuoto e controllerà il flusso video, se la webcam è collegata, stream.getVideoTracks () restituisce un array di un MediaStreamTrack che rappresenta il flusso dalla webcam. Un semplice esempio sono le applicazioni di chat, un'applicazione di chat riceve lo streaming da webcam, fotocamera posteriore, microfono.

Codice di esempio di 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);

Cattura dello schermo

È anche possibile nel browser Chrome con mediaStreamSource e richiede HTTPS. Questa funzione non è ancora disponibile in Opera. La demo di esempio è disponibile qui

Controllo della sessione, rete e informazioni sui media

Web RTC richiedeva la comunicazione peer-to-peer tra i browser. Questo meccanismo richiedeva segnalazioni, informazioni di rete, controllo della sessione e informazioni sui media. Gli sviluppatori Web possono scegliere un meccanismo diverso per comunicare tra i browser come SIP o XMPP o qualsiasi comunicazione bidirezionale. Un esempio di XHR è qui .

Codice di esempio di 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));
};