如何在HTML5中制作一个简单的快照webapp？
我需要制作一个HTML5页面，可以显示来自设备摄像头/网络摄像头的实时视频，并且有一个可以拍摄快照的按钮；没有什么特别的（类似于html5camera.com）。我试着遵循一些教程（和），但我对HTML还是新手，所以我不确定如何处理我找到的代码片段 我将一些代码复制到一个HTML文件中，但当我用Chrome打开它时，它在地址栏的右边说，它阻止了对摄像头和麦克风的访问（不需要麻烦请求许可）。当我下次单击该选项请求权限并重新加载页面时，什么也没有发生。无法将首选项设置为默认允许。我还尝试了Chrome金丝雀（与Chrome相同）和Firefox（未经许可） 我在HTML中犯了错误吗？Chrome是问题所在吗？ 到目前为止，我掌握的代码是：如何在HTML5中制作一个简单的快照webapp？,html,web-applications,camera,webcam,snapshot,Html,Web Applications,Camera,Webcam,Snapshot,我需要制作一个HTML5页面，可以显示来自设备摄像头/网络摄像头的实时视频，并且有一个可以拍摄快照的按钮；没有什么特别的（类似于html5camera.com）。我试着遵循一些教程（和），但我对HTML还是新手，所以我不确定如何处理我找到的代码片段 我将一些代码复制到一个HTML文件中，但当我用Chrome打开它时，它在地址栏的右边说，它阻止了对摄像头和麦克风的访问（不需要麻烦请求许可）。当我下次单击该选项请求权限并重新加载页面时，什么也没有发生。无法将首选项设置为默认允许。我还尝试了Chrom
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>
快照
//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
video=document.getElementById（“视频”），
videoObj={“video”：true}，
errBack=函数（错误）{
日志（“视频捕获错误：”，错误代码）；
};
//将视频侦听器放置到位
if（navigator.getUserMedia）{//Standard
getUserMedia（videoObj，函数（流）{
video.src=流；
video.play（）；
}，errBack）；
}else if（navigator.webkitGetUserMedia）{//WebKit前缀
webkitGetUserMedia（videoObj，函数（流）{
video.src=window.webkitURL.createObjectURL（流）；
video.play（）；
}，errBack）；
}
//触发拍照
document.getElementById（“snap”）.addEventListener（“单击”，函数）（）{
drawImage（视频，0，0，640，480）；
});
}，假）；
> >你也可以考虑原地踏步。使用BridgeIt:，您可以非常轻松地将本机摄像头和摄像机支持添加到Android、iOS或Windows Phone 8上的任何web应用程序中。这是一个简单的javascript api，允许您访问本机移动功能