JS Nhận hình ảnh trực tiếp từ luồng video dưới dạng url dữ liệu

Question

Làm cách nào để chuyển trực tiếp từ quay video sang url dữ liệu trong javascript? Tôi muốn hiển thị hình ảnh cho người dùng dưới dạng phiên bản đã thay đổi kích thước nhưng vẫn giữ nguyên hình ảnh có kích thước đầy đủ. Vì vậy, làm thế nào tôi sẽ làm điều này?

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

Đây là cách tôi hiện đang lưu giữ hình để tải lên:

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

Sau đó, tôi retrive hình ảnh được lưu như vậy:

var dataUrl = PhotoBooth.canvas.toDataURL(); 

Tôi muốn giữ cho vải cùng kích thước theo mặc định, nhưng giữ dữ liệu thực tế. Về cơ bản, tôi muốn canvas hiển thị phiên bản có kích thước lại nhưng vẫn duy trì phiên bản kích thước đầy đủ.

Answer 1

Ở đây, canvas duy trì bản gốc 640x480 ảnh chụp (sử dụng https fiddle dành cho 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>