Tengo este código que reproduce la vista de mi cámara en una etiqueta de video y luego en el elemento de lienzo en la misma página, la página tiene 2 cuadrados, uno para la etiqueta de video (reproduciendo la vista de la cámara) y el otro es para el lienzo (reproduciendo el mismo video de la etiqueta de vídeo). ¿Cómo puedo editar mi código para hacer que el video se reproduzca en un lienzo en otra página para que mi usuario lo vea en vivo? también aceptado.
aquí está mi archivo html:
<html> <head> <meta charset="UTF-8"> <title>With canvas</title> </head> <body> <div class="booth"> <video id="video" width="400" height="300" autoplay></video> <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas> </div> <script src="video.js"></script> </body> </html>Y aquí está mi archivo js:
(function() { var canvas= document.getElementById('canvas'), context = canvas.getContext('2d'), video = document.getElementById('video'), vendorUrl = window.URL || window.webkitURL; navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia ({ video: true, audio: false }, function(stream) { //video.src = vendorUrl.createObjectURL(stream); if ('srcObject' in video) { video.srcObject = stream; } else { video.src = vendorUrl.createObjectURL(stream); } video.play(); }, function(error) { // An error occured //error.code }); video.addEventListener('play', function() { setInterval(() => { draw(this, context, 400, 300); }, 100); }, false ); function draw(video, context, width, height) { context.drawImage(video, 0, 0, width, height); } }) ();use MediaRecorder para obtener datos en vivo en fragmentos a medida que la grabadora de medios graba desde la cámara y proporciona fragmentos que se pueden enviar a otro extremo del usuario
luego use mediasource para agregar fragmentos en el otro lado del usuario para agregarlo y reproducirlo en vivo a medida que recibe nuevos fragmentos
Sé que es algo complicado, pero créanme, cuando estaba experimentando esto, pasé una buena cantidad de tiempo para comprenderlo. Creo que obtendrá algún beneficio de mi código de experimento a continuación.
aquí hay una demostración de trabajo
var mediasource = new MediaSource(),video = document.querySelector("video"), mime = 'video/webm;codecs=vp9,opus' video.src = URL.createObjectURL(mediasource) mediasource.addEventListener("sourceopen",function(_){ var source = mediasource.addSourceBuffer(mime) navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream=>{ var recorder = new MediaRecorder(stream,{mimeType:mime}) recorder.ondataavailable = d =>{ // creating chunks of 5 seconds of video continiously var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer r.then(arraybuffer=>{ source.appendBuffer(arraybuffer) }) } recorder.start(5000) }) }) <video class="video" controls autoplay></video>versión separada para recopilar datos en vivo y reproducirlo demo
// gathering camera data to liveData array var vid = document.querySelector(".video"), mime = 'video/webm;codecs=vp9,opus', liveData = [] navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(stream=>{ var recorder = new MediaRecorder(stream,{mimeType:mime}) recorder.ondataavailable = d =>{ console.log("capturing") new Response(d.data).arrayBuffer().then(eachChunk=>{ // recording in chunks here and saving it to liveData array liveData.push(eachChunk) }) } recorder.start(5000) }) //-------------------------------------------------------------------------------- // playing from liveData in video var ms = new MediaSource() vid.src =URL.createObjectURL(ms) ms.onsourceopen = function(){ var source = ms.addSourceBuffer(mime),chunkIndex = 0 setInterval(function(){ if(liveData.length > 0){ var currentChunk = liveData[chunkIndex] source.appendBuffer(currentChunk) console.log("playing") chunkIndex++ } },5000) }