webrtcAan de slag met webrtc


Opmerkingen

WebRTC is een gratis, open project dat browsers en mobiele applicaties real-time communicatie (RTC) mogelijkheden biedt via eenvoudige API's. De WebRTC-componenten zijn geoptimaliseerd om dit doel het beste te dienen.

Volg de volgende links voor meer informatie over WebRTC
webrtc.org
webrtc-architectuur
bekijk live demo hier

Krijg toegang tot uw audio en video met behulp van de getUserMedia () API, Hallo WebRTC!

navigator.mediaDevices is de gebruikelijke methode die in Chrome en FF is aangepast omUserMedia vanaf nu te krijgen.

Een beloofde gebaseerde call-back die lokale stream op succes teruggeeft

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

U kunt doorgeven van audio en video beperkingen te getUserMedia om opname-instellingen, zoals resolutie, framerate, apparaatvoorkeur, en nog veel meer te controleren.

Koppel de stream aan een video-element

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

stop zowel video als audio

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

stop alleen audio

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

stop alleen video

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

Live demonstratie

Inleiding tot WebRTC

WebRTC is een open raamwerk voor het web dat realtime communicatie in de browser mogelijk maakt. Het bevat de fundamentele bouwstenen voor hoogwaardige communicatie op het web, zoals netwerk-, audio- en video-componenten die worden gebruikt in spraak- en videochattoepassingen.

Deze componenten, wanneer geïmplementeerd in een browser, zijn toegankelijk via een JavaScript API, waardoor ontwikkelaars hun eigen RTC-webapp eenvoudig kunnen implementeren.

De WebRTC-inspanning wordt gestandaardiseerd op API-niveau op het W3C en op protocolniveau op de IETF .

  • Een belangrijke factor in het succes van internet is dat de kerntechnologieën - zoals HTML, HTTP en TCP / IP - open en vrij implementeerbaar zijn. Momenteel is er geen gratis, hoogwaardige, complete oplossing beschikbaar die communicatie in de browser mogelijk maakt. WebRTC maakt dit mogelijk.
  • Al geïntegreerd met de beste spraak- en video-engines die de afgelopen 8+ jaar op miljoenen eindpunten zijn geïmplementeerd. Google brengt geen royalty's in rekening voor WebRTC.
  • Bevat en vat belangrijke NAT- en firewall-traversale technologie samen, met behulp van STUN, ICE, TURN, RTP-over-TCP en ondersteuning voor proxy's.
  • Bouwt voort op de kracht van de webbrowser: WebRTC abstraheert signalering door een signaleringsmachine aan te bieden die rechtstreeks naar PeerConnection wordt toegewezen. Webontwikkelaars kunnen daarom het gewenste protocol kiezen voor hun gebruiksscenario (bijvoorbeeld, maar niet beperkt tot, SIP, XMPP / Jingle, enz.).

Lees meer over WebRTC van hier

Een op WebRTC gebaseerd communicatiesysteem opzetten

Om een WebRTC-gebaseerd communicatiesysteem op te zetten, hebt u drie hoofdcomponenten nodig:

  1. Een WebRTC-signaleringsserver

    Om een WebRTC-verbinding tot stand te brengen, moeten peers contact opnemen met een signaleringsserver, die vervolgens de adresinformatie verstrekt die de peers nodig hebben om een peer-to-peer-verbinding tot stand te brengen. Signaleringsservers zijn bijvoorbeeld:

    • signalmaster : Lichtgewicht, op JavaScript gebaseerde signaleringsserver
    • NextRTC : op Java gebaseerde signaleringsserver
    • Kurento : uitgebreid WebRTC-framework
    • Janus : WebRTC-gateway voor algemeen gebruik
  2. Een WebRTC-clienttoepassing

    De client heeft toegang tot de WebRTC-implementatie van een browser via een JavaScript-API of gebruikt een WebRTC-bibliotheek (dwz als onderdeel van een desktop- of mobiele app). Om de verbinding met een peer tot stand te brengen, moet de client eerst verbinding maken met de signaleringsserver. Voorbeelden voor WebRTC-clients zijn:

  3. Een STUN / TURN-server

    Session Traversal Utilities for NAT (STUN) stelt peers in staat adresinformatie uit te wisselen, zelfs als ze achter routers zitten die gebruik maken van Network Adress Translation (NAT) . Als netwerkbeperkingen überhaupt voorkomen dat collega's rechtstreeks communiceren, wordt het verkeer gerouteerd via een Traversal Using Relays rond NAT (TURN) -server. U vindt een gedetailleerde en grafische uitleg van STUN en TURN op http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Voorbeelden voor WebRTC STUN / TURN-servers zijn:

    • coturn combineert STUN en TURN en maakt doorgaans deel uit van een volwaardige WebRTC-infrastructuur.
    • Janus WebRTC Gateway wordt geleverd met een geïntegreerde STUN / TURN-server.