El video de WebRTC no se muestra

Estoy creando una sala de chat de video webrtc uno a uno y este código no funciona y quiero saber por qué

function hasUserMedia(){ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; return !!navigator.getUserMedia; } function hasRTCPeerConnection() { window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; return !!window.RTCPeerConnection; } function startPeerConnection(stream) { var configuration = { "iceServers": [{ "url": "stun:stun.1.google.com:19302" }] }; yourConnection = new RTCPeerConnection(configuration); theirConnection = new webkitRTCPeerConnection(configuration); yourConnection.addStream(stream); theirConnection.onaddstream = function (e) { theirVideo.src = window.URL.createObjectURL(e.stream); }; yourConnection.onicecandidate = function (event) { if (event.candidate){ theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate)); } }; theirConnection.onicecandidate = function (event) { if (event.candidate) { yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate)); } }; yourConnection.createOffer(function (offer) { yourConnection.setLocalDescription(offer); theirConnection.setRemoteDescription(offer); theirConnection.createAnswer(function (offer) { theirConnection.setLocalDescription(offer); yourConnection.setRemoteDescription(offer); }); }); } var yourVideo = document.querySelector("#face_cam_vid"), theirVideo = document.querySelector("#thevid"), yourConnection, theirConnection; if (hasUserMedia()) { navigator.getUserMedia({ video: true, audio: true }, function(stream) { yourVideo.src = window.URL.createObjectURL(stream); if (hasRTCPeerConnection()) { startPeerConnection(stream); } else { alert("Sorry, your browser does not support WebRTC."); } }, function (error) { console.log(error); } ); } else { alert("Sorry, your browser does not support WebRTC."); } 

y este código me está dando errores de este tipo y al ver que el video no se muestra, intenté crear div (donde está la etiqueta de video) pero no funcionó de todos modos

Si puedes ayudarme, estaré contento de que aquí está mi html.

      Video Call        var width = Math.max(window.screen.width, window.innerWidth); if(width <= 414){ var faceCam = document.getElementById("face_cam"); faceCam.style.width = "15%"; } function smaller(){ if(width <= 414){ var size = document.getElementById("face_cam").style.width; if(size == "15%"){ faceCam.style.width = "3%"; faceCam.style.height = "3%"; faceCam.style.borderRadius = "0px" } else if(size == "3%"){ faceCam.style.width = "15%"; faceCam.style.height = "30%"; faceCam.style.borderRadius = "10px" } } else{ var size = document.getElementById("face_cam").style.width; if(size == "30%"){ faceCam.style.width = "3%"; faceCam.style.height = "3%"; faceCam.style.borderRadius = "0px" } else if(size == "3%"){ faceCam.style.width = "30%"; faceCam.style.height = "30%"; faceCam.style.borderRadius = "10px"; } } } var width = Math.max(window.screen.width, window.innerWidth); function smaller(){ var size = document.getElementById("face_cam").style.height; if (size == "30%"){ var frame = document.getElementById("face_cam"); frame.style.height = "3%"; frame.style.width = "4%"; frame.borderRadius = "0px"; } else{ var frame = document.getElementById("face_cam"); frame.style.height = "30%"; frame.style.width = "30%"; } } function BACKT(){ window.location.href = "http://localhost:8000/" }    

#thevid id vid donde el segundo usuario muestra face_cam_vid es el video donde lo muestro

One Solution collect form web for “El video de WebRTC no se muestra”

Es un código terrible. Está desactualizado y tiene 6 problemas que rastrean la evolución de la API de WebRTC.

TL; DR: No funciona porque no está buscando errores y solo ha probado un navegador.

1) Prefijos de proveedores antiguos (eliminarlos):

 yourConnection = new RTCPeerConnection(configuration); theirConnection = new webkitRTCPeerConnection(configuration); // < -- wrong 

webkit -names no funcionará en Firefox o Edge. Estos no han sido necesarios en años. Siempre que cambie a navigator.mediaDevices.getUserMedia , puede omitir sus 10 líneas del preámbulo de manipulación de prefijos por completo.

2) Utiliza url viejo (usa urls )

Esto es técnicamente incorrecto, aunque sospecho que la mayoría de los navegadores lo permiten:

 iceServers: [{url: "stun:stun.1.google.com:19302"}] // < -- wrong 

En su lugar, utilice:

 iceServers: [{urls: "stun:stun.1.google.com:19302"}] 

... porque técnicamente se puede acceder a un servidor ICE en múltiples direcciones URL.

3) Usar las API de callback antiguas sin comprobación de errores (use promesas en su lugar):

Esto está mal:

 navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ }); 

... porque se requiere un tercer argumento de callback de error . Edge dice TypeError: Argument not optional .

Los errores heredados en Chrome y Safari permiten esto, pero no funcionará en Firefox o Edge. Ignorar los errores te priva de aprender por qué las cosas no funcionan. Si el usuario niega el acceso a la cámara, quieres saberlo.

Todos los navegadores modernos son compatibles con la versión prometedora de la API en mediaDevices . Use eso en su lugar:

 navigator.mediaDevices.getUserMedia({video: true, audio: true}) .then(stream => { /* use stream here */ }) .catch(error => console.log(error)); 

4) Caíste en la "trampa de mezcla de promesa / callback de RTCPeerConnection":

He respondido esto antes , pero en resumen, esto es similar al # 2 anterior, pero con un giro. Esto está mal:

 yourConnection.createOffer(function(offer) { /* ... */ }); 

Crees que estás llamando a la antigua API de callback , pero no lo estás. Aquellos requerían dos argumentos:

 yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */); 

En cambio, en realidad estás llamando a la API de promesa moderna con el mismo nombre, porque una función es un objeto en JS:

 const promise = yourConnection.createOffer(optionsObject); 

Aquí es donde tu código deja de funcionar. La función de callback nunca se llama, y ​​se interpreta como un objeto de opciones vacío. Ignoras la promesa devuelta. Utilice la API de promesa en su lugar.

5) createObjectURL (flujo) está en desuso, desapareció.

Se eliminó en Firefox y Chrome 71 (la advertencia que recibió). Esto está mal:

 theirVideo.src = URL.createObjectURL(stream); 

En su lugar usa esto:

 theirVideo.srcObject = stream; 

6) Para puntos extra: la API de toda la secuencia está en desuso (usar pistas).

addStream() y onaddstream ya no están en la especificación , y solo funcionan en algunos navegadores:

 yourConnection.addStream(stream); theirConnection.onaddstream = e => theirVideo.srcObject = e.stream; 

En cambio, las conexiones entre pares ahora están completamente basadas en pistas. Use esto en su lugar:

 for (const track of stream.getTracks()) { yourConnection.addTrack(track, stream); } theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0]; 

Para más sobre estas diferencias, vea mi blog .

Ejemplo de trabajo

Lo siguiente debería funcionar en todos los navegadores :

 const yourVideo = document.querySelector("#face_cam_vid"); const theirVideo = document.querySelector("#thevid"); (async () => { if (!("mediaDevices" in navigator) || !("RTCPeerConnection" in window)) { alert("Sorry, your browser does not support WebRTC."); return; } const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true}); yourVideo.srcObject = stream; const configuration = { iceServers: [{urls: "stun:stun.1.google.com:19302"}] }; const yours = new RTCPeerConnection(configuration); const theirs = new RTCPeerConnection(configuration); for (const track of stream.getTracks()) { yours.addTrack(track, stream); } theirs.ontrack = e => theirVideo.srcObject = e.streams[0]; yours.onicecandidate = e => theirs.addIceCandidate(e.candidate); theirs.onicecandidate = e => yours.addIceCandidate(e.candidate); const offer = await yours.createOffer(); await yours.setLocalDescription(offer); await theirs.setRemoteDescription(offer); const answer = await theirs.createAnswer(); await theirs.setLocalDescription(answer); await yours.setRemoteDescription(answer); })(); 
  • Nivel de actividad del micrófono de WebRTC MediaStream
  • Transmisión a gran escala WebRTC
  • No se puede ejecutar una aplicación de Chrome para compartir pantalla usando electrón
  • ¿Cómo obtengo información sobre el tipo de connection de una PeerConnection de WebRTC?
  • El video remoto de WebRTC se muestra como negro
  • Implementación de señalización WebRTC utilizando WebSockets
  • Difusión o descubrimiento de pares con PeerJS
  • WebRTC: ¿Por qué Offer necesita la opción de audio o video activada / verdadera solo para DataChannel?
  • Obtener muestras de audio del elemento de audio
  • Evite timeres de Chrome en tabs ocultas que se ejecutan con una resolución de 1 segundo
  • ¿Cómo decide WebRTC qué serveres TURN utilizar?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.