关于html5网络摄像头存在问题
这是我的错误
未捕获的TypeError:无法在“ URL”上执行“ createObjectURL”:找不到与提供的签名匹配的函数。
在photo.js:17
photo.js:17
video.src = vendorUrl.createObjectURL(stream);
请检查我的代码
非常感谢!
takeing_photo.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="{% static 'css/photo.css' %}" rel="stylesheet">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
<a href="#" id="capture" class="booth-capture-button">Take photo</a>
<canvas id="canvas" width="400" height="300"></canvas>
<img id="photo" src="http://placekitten.com/g/400/300" alt="photo of you">
</div>
<script src="{% static 'js/photo.js' %}"></script>
</body>
</html>
photo.js
(function(){
var video = document.getElementById('video'),
photo = document.getElementById('photo'),
context = canvas.getContext('2d'),
phto = document.getElementById('photo');
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video:true,
audio:false
}, function(stream){
video.src=vendorUrl.createObjectURL(stream);
video.play();
}, function(error){
});
document.getElementById('capture').addEventListener('click', function(){
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('image/png'))
});
})();
photo.css
.booth{
width:400px;
background-color: #ccc;
border:10px solid #ddd;
margin:0 auto;
}
.booth-capture-button {
display:block;
margin:10px 0;
padding:10px 20px;
background-color: cornflowerblue;
color: #fff;
text-align: center;
text-decoration: none;
}
#canvas {
display :none;
}
我只想正确制作网络摄像头
我想知道有一种方法可以在我将按钮“带走你”时将图片保存到文件夹中
请给我建议。非常感谢。
最佳答案
导致此错误的原因是不建议使用函数createObjectURL。您需要更新代码以将srcObject
直接设置为video
对象。
video.srcObject=stream;