Montamos una página web que hace de emisor, recogiendo y transmitiendo la imagen y el audio a una segunda página web que ejerce de receptor. En la web receptora mostramos ambos streams en un <video>
emisor.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Página emisora de auio/video por WebRTC</title>
</head>
<body>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
//Establecemos identificación con el server identificandonos como emisor
const peer = new Peer('emisorXXX01', { host: '0.peerjs.com', port: 443, path: '/' })
//Capturamoslos stream de video y audio
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(localStream) {
//Realizamos la llamada al receptor
var call = peer.call('receptorXXX01', localStream);
//Le pasamos los stream de vídeo y audio
call.on('stream', function(remoteStream) {
//No hacemos nada con el video remoto
});
}).catch(function(err) {
console.log('Failed to get local stream' ,err);
});
</script>
</body>
</html>
receptor.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Página receptora de auio/video por WebRTC</title>
</head>
<body>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
//Creamos un AudioTrack vacío
const createEmptyAudioTrack = () => {
const ctx = new AudioContext();
const oscillator = ctx.createOscillator();
const dst = oscillator.connect(ctx.createMediaStreamDestination());
oscillator.start();
const track = dst.stream.getAudioTracks()[0];
return Object.assign(track, { enabled: false });
};
//Creamos un VideoTrack vacío
const createEmptyVideoTrack = ({ width, height }) => {
const canvas = Object.assign(document.createElement('canvas'), { width, height });
canvas.getContext('2d').fillRect(0, 0, width, height);
const stream = canvas.captureStream();
const track = stream.getVideoTracks()[0];
return Object.assign(track, { enabled: false });
};
//Montamos el MediaStream vacío
const audioTrack = createEmptyAudioTrack();
const videoTrack = createEmptyVideoTrack({ width:10, height:10 });
const emptyMediaStream = new MediaStream([videoTrack,audioTrack]);
//Establecemos identificación con el server identificandonos como receptor
const peer = new Peer('receptorXXX01', { host: '0.peerjs.com', port: 443, path: '/' })
//Nos quedamos escuchando la llegada de llamadas
peer.on('call', function(call) {
//Cuando llega una llamada la espondemos enviando nuestro stream de vídeo vacío
call.answer(emptyMediaStream);
//De la llamada recibida recogemos el stream de audio y video
call.on('stream', function(remoteStream) {
//Mostramos el stream de audio y video en el reproductor <video>
document.querySelector('video#remote').srcObject = remoteStream
});
});
</script>
<div>
Video remoto <br/>
<video id="remote" controls autoplay></video>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario