webrtc Tutorial
Iniziare con webrtc

Osservazioni

Impostazione di un sistema di comunicazione basato su WebRTC

Per configurare un sistema di comunicazione basato su WebRTC, sono necessari tre componenti principali:

1. Un server di segnalazione WebRTC

   Per stabilire una connessione WebRTC, i peer devono contattare un server di segnalazione, che fornisce quindi le informazioni sull'indirizzo che i peer richiedono per impostare una connessione peer-to-peer. I server di segnalazione sono ad esempio:

   • signalmaster : server di segnalazione leggero, basato su JavaScript
   • NextRTC : server di segnalazione basato su Java
   • Kurento : framework WebRTC completo
   • Janus : gateway WebRTC per scopi generali

2. Un'applicazione client WebRTC

   Il client accede all'implementazione WebRTC di un browser tramite un'API JavaScript o utilizza una libreria WebRTC (ovvero come parte di un'app desktop o mobile). Per stabilire la connessione a un peer, il client deve prima connettersi al server di segnalazione. Esempi per i client WebRTC sono:

   • Diversi progetti Kurento

   • OpenWebRTC , un client multipiattaforma con focus mobile

   • Peer.js Un client basato su browser (Peer.js fornisce anche un server leggero)

   • Esempi di demo di Janus

3. Un server STUN / TURN

   Session Traversal Utilities per NAT (STUN) consente ai peer di scambiare informazioni sugli indirizzi anche se si trovano dietro router che utilizzano Network Adress Translation (NAT) . Se le restrizioni di rete impediscono ai peer di comunicare direttamente, il traffico viene instradato tramite un server Traversal Using Relays around NAT (TURN) . Trovate una spiegazione dettagliata e grafica di STUN e TURN all'indirizzo http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Esempi per i server WebRTC STUN / TURN sono:

   • coturn combina STUN e TURN e fa generalmente parte di un'infrastruttura WebRTC completa.
   • Janus WebRTC Gateway viene fornito con un server STUN / TURN integrato.

Introduzione a WebRTC

WebRTC è un framework aperto per il web che abilita le comunicazioni in tempo reale nel browser. Comprende i componenti fondamentali per le comunicazioni di alta qualità sul Web, come componenti di rete, audio e video utilizzati nelle applicazioni di chat vocale e video.

Questi componenti, se implementati in un browser, sono accessibili tramite un'API JavaScript, consentendo agli sviluppatori di implementare facilmente la propria app Web RTC.

Lo sforzo WebRTC viene standardizzato a livello di API al W3C ea livello di protocollo presso IETF .

• Un fattore chiave per il successo del web è che le sue tecnologie di base, come HTML, HTTP e TCP / IP, sono aperte e liberamente implementabili. Al momento non è disponibile una soluzione completa gratuita di alta qualità che consenta la comunicazione nel browser. WebRTC consente questo.
• Già integrato con i migliori motori vocali e video che sono stati distribuiti su milioni di endpoint negli ultimi 8+ anni. Google non addebita canoni per WebRTC.
• Include e astrae la tecnologia chiave NAT e firewall traversal, utilizzando STUN, ICE, TURN, RTP-over-TCP e supporto per i proxy.
• Si basa sulla forza del browser Web: WebRTC astrae la segnalazione offrendo una macchina a stati di segnalazione che mappa direttamente a PeerConnection. Gli sviluppatori Web possono quindi scegliere il protocollo di scelta per il loro scenario di utilizzo (ad esempio, ma non solo, SIP, XMPP / Jingle, ecc.).

Leggi di più su WebRTC da qui

Ottieni l'accesso al tuo audio e video usando l'API getUserMedia (), Hello WebRTC!

navigator.mediaDevices è il metodo comune adattato in Chrome e FF a getUserMedia sin d'ora.

Un richiamo basato promesso che restituisce lo stream locale in caso di successo

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

È possibile passare vincoli audio e video a getUserMedia per controllare le impostazioni di acquisizione come risoluzione, framerate, preferenze del dispositivo e altro.

Allega lo stream a un elemento video

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

ferma sia il video che l'audio

localStream.getTracks().forEach((track) => {
    track.stop();
});

ferma solo l'audio

localStream.getAudioTracks()[0].stop();

ferma solo il video

localStream.getVideoTracks()[0].stop();

Dimostrazione dal vivo