使用javascript访问设备摄像头 [英] Accessing device camera using javascript
本文介绍了使用javascript访问设备摄像头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用 javascript 访问我的设备摄像头.但是这段代码只能在 firefox 中工作,在桌面上也一样.我想在其他浏览器和移动设备上访问我的相机.
I want to access my device camera using javascript . But this code only works in firefox and that too on desktop . I want to access my camera on other browsers as well as mobile devices.
function start()
{
var video = document.getElementById('video'),
vendorUrl = window.URL;
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
.then(function(stream) {
video.src = vendorUrl.createObjectURL(stream);
video.play();
})
.catch(function(err) {
alert("no");
});
};
推荐答案
(function() {
'use strict';
var video = document.querySelector('video')
, canvas;
function takeSnapshot() {
var img = document.querySelector('img') || document.createElement('img');
var context;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
if (navigator.mediaDevices) {
// access the web cam
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream
video.addEventListener('click', takeSnapshot);
})
.catch(function(error) {
document.body.textContent = 'Could not access the camera. Error: ' + error.name;
});
}
})();
video, img {
max-width:100%;
}
<video autoplay></video>
复制到本地运行
希望对你有帮助
这篇关于使用javascript访问设备摄像头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文