webrtc Tutorial
Empezando con webrtc

Observaciones

Configuración de un sistema de comunicación basado en WebRTC

Para configurar un sistema de comunicación basado en WebRTC, necesita tres componentes principales:

1. Un servidor de señalización WebRTC

   Para establecer una conexión WebRTC, los pares deben ponerse en contacto con un servidor de señalización, que luego proporciona la información de la dirección que necesitan para establecer una conexión de igual a igual. Los servidores de señalización son, por ejemplo:

   • signalmaster : servidor de señalización ligero y basado en JavaScript
   • NextRTC : servidor de señalización basado en Java
   • Kurento : marco integral de WebRTC
   • Janus : WebRTC Gateway de propósito general

2. Una aplicación de cliente WebRTC

   El cliente accede a la implementación WebRTC de un navegador a través de una API de JavaScript o utiliza una biblioteca WebRTC (es decir, como parte de una aplicación de escritorio o móvil). Para establecer la conexión con un par, el cliente primero debe conectarse al servidor de señalización. Ejemplos para los clientes de WebRTC son:

   • Varios proyectos de Kurento.

   • OpenWebRTC , un cliente multiplataforma con enfoque móvil

   • Peer.js Un cliente basado en navegador (Peer.js también proporciona un servidor ligero)

   • Janus Demo ejemplos

3. Un servidor STUN / TURN

   Las Utilidades de Traversal de sesión para NAT (STUN) permiten a los compañeros intercambiar información de dirección incluso si están detrás de los enrutadores que emplean la Traducción de dirección de red (NAT) . Si las restricciones de red impiden que los interlocutores se comuniquen directamente, el tráfico se enruta a través de un Servidor de uso de retransmisiones alrededor del servidor NAT (TURN) . Puede encontrar una explicación detallada y gráfica de STUN y TURN en http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Ejemplos de servidores WebRTC STUN / TURN son:

   • coturn combina STUN y TURN, y suele ser parte de una infraestructura WebRTC completa.
   • Janus WebRTC Gateway viene con un servidor integrado STUN / TURN.

Introducción a WebRTC

WebRTC es un marco abierto para la web que permite comunicaciones en tiempo real en el navegador. Incluye los bloques de construcción fundamentales para las comunicaciones de alta calidad en la web, como los componentes de red, audio y video que se utilizan en las aplicaciones de voz y video chat.

Se puede acceder a estos componentes, cuando se implementan en un navegador, a través de una API de JavaScript, lo que permite a los desarrolladores implementar fácilmente su propia aplicación web RTC.

El esfuerzo de WebRTC se está estandarizando a nivel de API en el W3C y a nivel de protocolo en el IETF .

• Un factor clave para el éxito de la web es que sus tecnologías principales, como HTML, HTTP y TCP / IP, son abiertas y se pueden implementar libremente. Actualmente, no hay una solución completa, gratuita y de alta calidad disponible que permita la comunicación en el navegador. WebRTC habilita esto.
• Ya integrado con los mejores motores de voz y video que se han implementado en millones de puntos finales en los últimos 8 años o más. Google no cobra regalías por WebRTC.
• Incluye y abstrae la tecnología de NAT transversal y cortafuegos del cortafuegos, utilizando STUN, ICE, TURN, RTP-over-TCP y soporte para proxies.
• Se basa en la fuerza del navegador web: WebRTC abstrae la señalización al ofrecer una máquina de estado de señalización que se asigna directamente a PeerConnection. Por lo tanto, los desarrolladores web pueden elegir el protocolo de elección para su escenario de uso (por ejemplo, pero no limitado a, SIP, XMPP / Jingle, etc.).

Lea más sobre WebRTC desde aquí

Obtenga acceso a su audio y video utilizando la API getUserMedia (), ¡Hola, WebRTC!

navigator.mediaDevices es el método común adaptado en Chrome y FF para getUserMedia a partir de ahora.

Una llamada basada prometida que devuelve el flujo local en el éxito

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

Puede pasar restricciones de audio y video a getUserMedia para controlar configuraciones de captura como resolución, velocidad de cuadros, preferencia de dispositivo y más.

Adjuntar el flujo a un elemento de 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

detener tanto el video como el audio

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

detener solo audio

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

detener solo el video

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

Demo en vivo