webrtc Handledning
Komma igång med webrtc

Anmärkningar

Ställa in ett WebRTC-baserat kommunikationssystem

För att konfigurera ett WebRTC-baserat kommunikationssystem behöver du tre huvudkomponenter:

1. En WebRTC signalserver

   För att upprätta en WebRTC-anslutning måste kamrater kontakta en signalserver, som sedan ger den adressinformation som kamraterna behöver för att skapa en peer-to-peer-anslutning. Signalservrar är till exempel:

   • signalmaster : Lätt, JavaScript-baserad signalserver
   • NextRTC : Java-baserad signalserver
   • Kurento : Omfattande WebRTC-ramverk
   • Janus : WebRTC Gateway för allmänna ändamål

2. En WebRTC-klientapplikation

   Klienten får åtkomst till antingen webbläsarens WebRTC-implementering via ett JavaScript-API eller använder ett WebRTC-bibliotek (dvs. som en del av ett skrivbord eller mobilapp). För att upprätta anslutningen till en kamrat måste klienten först ansluta till signalservern. Exempel för WebRTC-klienter är:

   • Flera Kurento-projekt

   • OpenWebRTC , en plattformsklient med mobilfokus

   • Peer.js En webbläsarbaserad klient (Peer.js tillhandahåller också en lättviktsserver)

   • Janus Demo-exempel

3. En STUN / TURN-server

   Session Traversal Utilities for NAT (STUN) gör det möjligt för kamrater att utbyta adressinformation även om de står bakom routrar som använder Network Address Translation (NAT) . Om nätverksbegränsningar hindrar kamrater från att direkt kommunicera direkt, dirigeras trafiken via en Traversal med hjälp av reläer runt NAT (TURN) -server. Du hittar en detaljerad och grafisk förklaring av STUN och TURN på http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Exempel för WebRTC STUN / TURN-servrar är:

   • coturn kombinerar STUN och TURN och är vanligtvis en del av en fullfjädrad WebRTC-infrastruktur.
   • Janus WebRTC Gateway kommer med en integrerad STUN / TURN-server.

Introduktion till WebRTC

WebRTC är en öppen ram för webben som möjliggör realtidskommunikation i webbläsaren. Det inkluderar de grundläggande byggstenarna för högkvalitativ kommunikation på webben, såsom nätverk, ljud- och videokomponenter som används i röst- och videochattapplikationer.

Dessa komponenter, när de implementeras i en webbläsare, kan nås via ett JavaScript-API, vilket gör det möjligt för utvecklare att enkelt implementera sin egen RTC-webbapp.

WebRTC-ansträngningen standardiseras på en API-nivå på W3C och på protokollnivå på IETF .

• En nyckelfaktor för framgången på webben är att dess kärnteknologier - som HTML, HTTP och TCP / IP - är öppna och fritt implementerbara. För närvarande finns det ingen gratis, komplett kvalitet, komplett lösning tillgänglig som möjliggör kommunikation i webbläsaren. WebRTC möjliggör detta.
• Redan integrerad med bästa-av-ras-röst- och videomotorer som har distribuerats på miljoner endpoints under de senaste åtta åren. Google tar inte ut royalty för WebRTC.
• Inkluderar och abstraherar nyckel NAT- och brandväggstraversationsteknik, med STUN, ICE, TURN, RTP-over-TCP och support för proxyservrar.
• Byggs på webbläsarens styrka: WebRTC abstraherar signalering genom att erbjuda en signaleringsmaskin som kartlägger direkt till PeerConnection. Webbutvecklare kan därför välja det valda protokollet för sitt användarscenario (till exempel, men inte begränsat till, SIP, XMPP / Jingle, etc).

Läs mer om WebRTC härifrån

Få åtkomst till ditt ljud och ditt videoklipp med getUserMedia () API, hej WebRTC!

navigator.mediaDevices är den vanliga metoden anpassad i Chrome och FF för att fåUserMedia från och med nu.

Ett utlovat baserat återuppringning som returnerar lokal ström på framgång

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

Du kan skicka ljud- och videobegränsningar till getUserMedia att styra fånga inställningar som upplösning, framerate, enhetspreferens och mycket mer.

Anslut strömmen till ett videoelement

// 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

stoppa både video och ljud

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

stoppa bara ljud

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

stoppa bara video

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

Live-demo