JS Pobierz obraz bezpośrednio ze strumienia wideo jako URL danych

Question

Jak przejść bezpośrednio z przechwytywania wideo do adresu danych w javascript? Chcę wyświetlić obraz użytkownikowi jako wersję o zmienionym rozmiarze, ale zachowaj pełny rozmiar obrazu. Jak mam to zrobić?

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

To jak jestem obecnie zapisywania obrazu do przesłania:

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

Potem sprowadzaniu zapisany obraz tak:

var dataUrl = PhotoBooth.canvas.toDataURL(); 

Chciałbym zachować płótno taki sam rozmiar jest domyślnie, ale zachowaj rzeczywiste dane. Zasadniczo chcę, aby płótno pokazywało nową wersję, ale zachowuje pełną wersję.

Answer 1

Tutaj canvas zachowuje oryginalną 640x480 migawkę (użyj https fiddle dla 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>