Html 获取用户媒体api在本地主机中不工作
我正在探索get user媒体的API,并尝试在我的localhost中运行该API,示例代码附在下面 它在jsbin中运行良好 但在localhost中完全失败,出现以下错误 未捕获类型错误:无法读取null capture的属性“addEventListener”。html:43 未捕获类型错误:无法将属性“src”设置为null 代码:Html 获取用户媒体api在本地主机中不工作,html,html5-video,getusermedia,Html,Html5 Video,Getusermedia,我正在探索get user媒体的API,并尝试在我的localhost中运行该API,示例代码附在下面 它在jsbin中运行良好 但在localhost中完全失败,出现以下错误 未捕获类型错误:无法读取null capture的属性“addEventListener”。html:43 未捕获类型错误:无法将属性“src”设置为null 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script>
(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 200,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();
</script>
<style>
html {
background: #111111;
height: 100%;
background: linear-gradient( #333, #000);
}
canvas {
display: none;
}
video, img, #startbutton {
display: block;
float: left;
border: 10px solid #fff;
border-radius: 10px;
}
#startbutton {
background: green;
border: none;
color: #fff;
margin: 100px 20px 20px 20px;
padding: 10px 20px;
font-size: 20px;
}
#container {
overflow: hidden;
width: 880px;
margin: 20px auto;
}
</style>
</head>
<body>
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/200/150" id="photo" alt="photo">
</body>
</html>
文件标题
(功能(){
var流=假,
video=document.querySelector(“#video”),
封面=document.querySelector(“#封面”),
canvas=document.querySelector(“#canvas”),
photo=document.querySelector(“#photo”),
startbutton=document.querySelector(“#startbutton”),
宽度=200,
高度=0;
navigator.getMedia=(navigator.getUserMedia | |
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia);
navigator.getMedia(
{
视频:没错,
音频:错误
},
功能(流){
如果(navigator.mozGetUserMedia){
video.mozSrcObject=流;
}否则{
var vendorURL=window.URL | | window.webkitURL;
video.src=vendorURL?vendorURL.createObjectURL(流):流;
}
video.play();
},
功能(err){
log(“发生错误!”+err);
}
);
video.addEventListener('canplay',函数(ev){
如果(!流){
高度=video.videoHeight/(video.videoWidth/宽度);
video.setAttribute('width',width);
video.setAttribute('height',height);
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
流=真;
}
},假);
函数takepicture(){
画布宽度=宽度;
canvas.height=高度;
canvas.getContext('2d').drawImage(视频,0,0,宽度,高度);
var data=canvas.toDataURL('image/png');
photo.setAttribute('src',数据);
}
startbutton.addEventListener('click',函数(ev){
拍摄照片();
ev.preventDefault();
},假);
})();
html{
背景:#111111;
身高:100%;
背景:线性梯度(#333,#000);
}
帆布{
显示:无;
}
视频、img、#开始按钮{
显示:块;
浮动:左;
边框:10px实心#fff;
边界半径:10px;
}
#开始按钮{
背景:绿色;
边界:无;
颜色:#fff;
利润率:100px 20px 20px 20px;
填充:10px 20px;
字体大小:20px;
}
#容器{
溢出:隐藏;
宽度:880px;
保证金:20px自动;
}
拍照
这是因为脚本试图访问尚未创建的html元素。HTML是自上而下读取的。将脚本移动到页面主体中,或者告诉它在整个页面加载之前不要执行
当我把你的脚本移到正文而不是页首时,它对我来说效果很好