webrtc Samouczek
Rozpoczęcie pracy z webrtc

Uwagi

Konfigurowanie systemu komunikacji opartego na WebRTC

Aby skonfigurować system komunikacji oparty na WebRTC, potrzebujesz trzech głównych komponentów:

1. Serwer sygnalizacyjny WebRTC

   Aby ustanowić połączenia WebRTC, elementy równorzędne muszą skontaktować się z serwerem sygnalizacyjnym, który następnie dostarcza informacje adresowe, których elementy wymagają do skonfigurowania połączenia typu każdy z każdym. Serwery sygnalizacyjne to na przykład:

   • signalmaster : Lekki serwer sygnalizacyjny oparty na JavaScript
   • NextRTC : Serwer sygnalizacyjny oparty na Javie
   • Kurento : Kompleksowa platforma WebRTC
   • Janus : bramka WebRTC ogólnego przeznaczenia

2. Aplikacja kliencka WebRTC

   Klient uzyskuje dostęp do implementacji WebRTC przeglądarki za pomocą JavaScript API lub korzysta z biblioteki WebRTC (tj. Jako część aplikacji komputerowej lub mobilnej). Aby ustanowić połączenie z peerem, klient musi najpierw połączyć się z serwerem sygnalizacyjnym. Przykłady klientów WebRTC to:

   • Kilka projektów Kurento

   • OpenWebRTC , klient wieloplatformowy z naciskiem na urządzenia mobilne

   • Peer.js Klient oparty na przeglądarce (Peer.js zapewnia także lekki serwer)

   • Przykłady Janus Demo

3. Serwer STUN / TURN

   Session Traversal Utilities for NAT (STUN) umożliwia peerom wymianę informacji adresowych, nawet jeśli stoją za routerami korzystającymi z translacji adresów sieciowych (NAT) . Jeśli ograniczenia sieciowe w ogóle uniemożliwiają komunikację równorzędną, ruch jest kierowany przez serwer Traversal using Relays wokół NAT (TURN) . Szczegółowe i graficzne objaśnienie STUN i TURN można znaleźć na stronie http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Przykłady serwerów WebRTC STUN / TURN to:

   • coturn łączy STUN i TURN i zazwyczaj jest częścią w pełni rozwiniętej infrastruktury WebRTC.
   • Janus WebRTC Gateway jest wyposażony w zintegrowany serwer STUN / TURN.

Wprowadzenie do WebRTC

WebRTC to otwarta platforma internetowa, która umożliwia komunikację w czasie rzeczywistym w przeglądarce. Zawiera podstawowe elementy składowe wysokiej jakości komunikacji w Internecie, takie jak elementy sieciowe, audio i wideo używane w aplikacjach do czatu głosowego i wideo.

Do tych komponentów, po zaimplementowaniu w przeglądarce, można uzyskać dostęp poprzez API JavaScript, umożliwiając programistom łatwe wdrożenie własnej aplikacji internetowej RTC.

Wysiłek WebRTC jest standaryzowany na poziomie API na W3C i na poziomie protokołu na IETF .

• Kluczowym czynnikiem sukcesu sieci jest to, że jej podstawowe technologie - takie jak HTML, HTTP i TCP / IP - są otwarte i można je swobodnie wdrażać. Obecnie nie ma bezpłatnego, kompletnego rozwiązania wysokiej jakości, które umożliwia komunikację w przeglądarce. WebRTC umożliwia to.
• Już zintegrowany z najlepszymi w swojej klasie silnikami głosu i wideo, które zostały wdrożone na milionach punktów końcowych w ciągu ostatnich 8 lat. Google nie pobiera opłat licencyjnych za WebRTC.
• Zawiera i streszcza kluczowe translacje NAT i firewall, wykorzystując STUN, ICE, TURN, RTP-over-TCP oraz wsparcie dla serwerów proxy.
• Bazuje na sile przeglądarki internetowej: WebRTC streszcza sygnalizację, oferując maszynę stanu sygnalizującą, która mapuje bezpośrednio na PeerConnection. Deweloperzy sieci Web mogą zatem wybrać protokół wyboru dla swojego scenariusza użytkowania (na przykład, ale nie wyłącznie, SIP, XMPP / Jingle itp.).

Przeczytaj więcej o WebRTC tutaj

Uzyskaj dostęp do audio i wideo za pomocą API getUserMedia (), Witaj WebRTC!

navigator.mediaDevices to obecnie powszechna metoda dostosowana w Chrome i FF do getUserMedia.

Obiecane oddzwonienie, które zwraca sukces lokalny

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

Możesz przejść ograniczenia audio i wideo do getUserMedia, aby kontrolować ustawienia przechwytywania, takie jak rozdzielczość, szybkość klatek, preferencje urządzenia i inne.

Dołącz strumień do elementu wideo

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

zatrzymać zarówno wideo, jak i audio

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

zatrzymaj tylko dźwięk

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

zatrzymaj tylko wideo

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

Demo na żywo