JS Ottieni l'immagine direttamente dal flusso video come URL di dati

Question

Come passare direttamente dall'acquisizione video a un URL di dati in javascript? Voglio mostrare l'immagine all'utente come una versione ridimensionata, ma mantenere l'immagine a dimensione intera disponibile. Quindi, come lo farei?

var PhotoBooth = { 
    onMediaStream: function(stream) { 
     PhotoBooth.canvas = $('canvas')[0]; 
     PhotoBooth.context = PhotoBooth.canvas.getContext('2d'); 

     PhotoBooth.localVideo = $('video')[0]; 
     PhotoBooth.localVideo.src = window.URL.createObjectURL(stream); 
    }, 
    noStream: function() { 
     console.log('FAIL TO GET WEBCAM ACCESS'); 
    } 
}; 

getUserMedia(
    {video: true}, 
    PhotoBooth.onMediaStream, 
    PhotoBooth.noStream 
); 

Questo è il modo Attualmente sto salvare l'immagine per l'upload:

PhotoBooth.context.drawImage(PhotoBooth.localVideo, 0, 0, 200, 150); 
$('#preview').show(); 

Poi ho retrive l'immagine salvata in questo modo:

var dataUrl = PhotoBooth.canvas.toDataURL(); 

mi piacerebbe mantenere la tela la stessa dimensione è di default, ma conserva i dati effettivi. Fondamentalmente, voglio che la tela mostri una versione ridimensionata, ma mantenga la versione a dimensione intera.

Answer 1

Qui, canvas mantiene la 640x480 istantanea originale (utilizzare https fiddle per Chrome):

var start =() => navigator.mediaDevices.getUserMedia({ video: true }) 
 
    .then(stream => video.srcObject = stream) 
 
    .catch(log); 
 

 
var canvas = document.createElement("canvas"); 
 
canvas.width = 640; 
 
canvas.height = 480; 
 

 
var snap =() => { 
 
    canvas.getContext('2d').drawImage(video, 0, 0, 640, 480); 
 
    preview.getContext('2d').drawImage(canvas, 0, 0, 160, 120); 
 
} 
 

 
var log = msg => div.innerHTML += "<br>" + msg;

<button onclick="start()">Start!</button> 
 
<button onclick="snap()">Snap!</button><div id="div"></div> 
 
<video id="video" width="160" height="120" autoplay></video> 
 
<canvas id="preview" width="160" height="120"></canvas>