JS直接從視頻流獲取圖像作爲數據url

我將如何直接從視頻捕捉到JavaScript中的數據網址？我想將圖像作爲調整後的版本顯示給用戶，但保留全尺寸圖像可用。那麼，我將如何做到這一點？JS直接從視頻流獲取圖像作爲數據url

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

這是我當前如何節省上傳的圖片：

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

然後我retrive所保存的圖像，像這樣：

var dataUrl = PhotoBooth.canvas.toDataURL();

我想保持畫布默認情況下它的大小相同，但保留實際數據。基本上，我希望畫布顯示重新調整大小的版本，但保留全尺寸版本。

來源

2016-03-06 HSchmale

這裏，canvas保持原來的640×480的快照（使用https fiddle 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>

來源

2016-03-07 03:06:58 jib

JS直接從視頻流獲取圖像作爲數據url

回答

相關問題