Canvas.getcontext停止我的网络摄像头在我的HTML 5网页上工作 [英] Canvas.getcontext stops my webcam to work onmy HTML 5 webpage
问题描述
我正在试图从视频中捕捉一帧。以下是我的代码。
如果iam尝试使用
I amtrying to capture a frame from the video. Below is my code.
If iam trying to use
var ctx = canvas.getContext('2d');来自网络摄像头的实时流失败。它不起作用。如果我发表评论
the live stream from webcam fails. It doesnt work. If i comment
var ctx = canvas.getContext('2d');
然后摄像头工作，可能是什么原因？我必须使用
then webcam works, what could be the reason? I have to use
var ctx = canvas.getContext('2d');
否则我的程序将无效。
请指导。< br $>
else my program will not work.
Please guide.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Webscanner.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<video autoplay="true" id="videoElement"></video>
<button id="snap">Snap Photo</button>
</div>
</form>
<script>
var video = document.querySelector("#videoElement");
var canvas = document.querySelector('canvas');
// var ctx = canvas.getContext('2d');
var localMediaStream = null;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
else
alert('HTML5 getUserMedia() is not supported on your browser');
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}
//function snapshot() {
// if (localMediaStream) {
// ctx.drawImage(video, 0, 0);
// // "image/webp" works in Chrome.
// // Other browsers will fall back to image/png.
// document.querySelector('img').src = canvas.toDataURL('image/webp');
// myVar = setTimeout(snapshot, 2000);
// }
//}
////video.addEventListener('click', snapshot, false);
function videoError(e) {
// do something
}
video.addEventListener('click', snapshot, false);
</script>
</body>
</html>
我的尝试：
如果我评论
What I have tried:
If i comment
var ctx = canvas.getContext('2d');
然后摄像头工作，可能是什么原因？
then webcam works, what could be the reason?
推荐答案
文件。 querySelector（） [ ^ 将退缩urn文档中的第一个匹配元素。如果没有匹配的元素，它将返回null。
您的文档不包含< canvas>元素，所以document.querySelector（'canvas'）返回null。
当你尝试在canvas变量上调用方法时，你会得到一个Javascript错误：
document.querySelector()[^] will return the first matching element in the document. If there are no matching elements, it will returnnull.
Your document does not contain a<canvas>element, sodocument.querySelector('canvas')returnsnull.
When you then try to call a method on thecanvasvariable, you'll get a Javascript error:
TypeError: canvas is null
然后您的脚本将停止，并且以下任何一个语句都不会将执行。
要修复错误，您需要删除脚本中与画布相关的部分，或者将缺少的HTML元素添加到文档中。 />
注意：通过打开浏览器的开发人员工具，您可以更快地找到它。所有现代浏览器都包含一个控制台，用于记录任何脚本错误的详细信息。
Your script will then stop, and none of the following statements will execute.
To fix the error, you either need to remove the canvas-related parts of your script, or add the missing HTML elements to your document.
NB: You could have found this out for yourself much faster by opening your browser's developer tools. All modern browsers include a console which logs the details of any script errors.
这篇关于Canvas.getcontext停止我的网络摄像头在我的HTML 5网页上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
