Question

如何直接从视频捕获转到javascript中的数据网址？我想将图像作为调整大小的版本显示给用户，但保持全尺寸图像可用。那么，我该怎么做呢？

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

然后我按原样检索保存的图像：

var dataUrl = PhotoBooth.canvas.toDataURL();

我希望画布默认保持相同的大小，但保留实际数据。基本上，我希望画布显示一个重新调整大小的版本，但保持完整大小的版本。

Answer 1

此处，canvas维护原始的640x480快照（对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>

JS直接从视频流中获取图像作为数据URL

1 个答案: