JS直接从视频流中获取图像作为数据URL
JS Get image directly from video stream as data url
如何在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();
然后我像这样检索保存的图像:
var dataUrl = PhotoBooth.canvas.toDataURL();
我想保持画布与默认大小相同,但保留实际数据。基本上,我希望画布显示重新调整大小的版本,但保持完整大小的版本。
在这里,canvas
维护原始的 640x480 快照(使用 https fiddle for 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>
相关文章:
- 加载/调整大小时未切换图像数据标记
- 存储和检索图像数据URL
- 将图像数据设置为输入文件标记
- 是否可以创建一个画布来提取图像数据,而无需实际渲染画布
- 是从画布获取图像数据的任何方法,从远程视频中提取
- jQuery:裁剪以删除图像数据并替换为新数据
- 将图像数据加载到Angularjs中
- 使用从readAsDataURL()返回的图像数据
- EXIF图像数据可以使用JSSOR在页面上显示吗
- 获取当前图像数据Flexslider
- 将base64图像数据作为src分配给图像时,Firefox和Chrome上的结果不一致
- 原始图像数据显示
- 在画布上拖动和绘制时传输图像数据
- Selenium网络驱动程序:如何使用JavaScripts获取嵌入式图像数据
- 通过REST API上的GET请求发送图像数据
- 是否可以使用图像数据设置画架命中区域
- 获取图像数据跨源错误
- 如何使用Javascript从网页中获取图像数据
- 严格模式下的图像数据数据分配
- HTMLUnit是否包括一个功能性的[HTML5]画布2D实现,能够将图像数据渲染回Java代码