JSビデオストリームからデータURLとして直接画像を取得

Question

ビデオキャプチャからjavascriptのデータ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(); 

私はキャンバスを維持したいと思いますデフォルトでは同じサイズですが、実際のデータは保持します。基本的には、キャンバスにリサイズされたバージョンを表示したいが、フルサイズのバージョンは維持する。

ここ

Answer 1

、canvasは、元の640×480のスナップショット（Chromeの使用https fiddle）を維持する：

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>