Canvas.getcontext останавливает мою веб-камеру для работы на моей веб-странице HTML 5
Я пытаюсь захватить кадр из видео. Ниже приведен мой код.
Если в IAM пытается использовать
var ctx = canvas.getContext('2d'); прямая трансляция с веб-камеры терпит неудачу. Это не работает. Если я прокомментирую var ctx = canvas.getContext('2d');
тогда веб-камера работает, в чем может быть причина? Я должен использовать
var ctx = canvas.getContext('2d');
иначе моя программа не будет работать.
Пожалуйста, проводите.
<%@ 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>
Что я уже пробовал:
Если я прокомментирую
var ctx = canvas.getContext('2d');
тогда веб-камера работает, в чем может быть причина?