Webcam video stream not showing in html5 video tag
Question
I am trying to get access to a webcam and display video on an HTML page in a video tag. After I run the HTML page, I get a pop-up box asking for the permission to access webcam but after I grant permission, nothing happens. No video is shown in video tag. Below i the code. I am using Firefox 57.0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>webcam</title>
<script type="text/javascript">
var video = document.querySelector("#video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
alert('hello');
navigator.getUserMedia( {
video : true
},
handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
</head>
<body>
<table border="1" width="900" align="center">
<tr align="center">
<td>
Web Camera
<div id="camera" style="height:300px; width:400px; border-style:solid;">
<video id="video" width="400" height="300"></video>
</div>
</td>
<td>
Photo Frame
<div id="frame" style="height:300px; width:400px; border-style:solid;">
<canvas id="canvas" width="400" height="300"></canvas>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2">
<button id="snap" onclick="snap()">Snap Photo</button>
</td>
</tr>
</table>
</body>
</html>
Kindly guide me what am I doing wrong. I've searched a lot but couldn't find anything.
2 answers
solution1
0 2022-07-13 20:29:03
只需在video标签中设置autoplay属性
<video autoplay id="video" > </video>
solution2
-1 2018-01-01 11:57:27
Try below code :- Just one change in your code. Execute your code after DOM is loaded fully. I have wrapped your code inside window.onload function.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>webcam</title>
<script type="text/javascript">
window.onload = function(){
document.querySelector("#video");
console.log(video);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
alert('hello');
navigator.getUserMedia( {
video : true
},
handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
};
</script>
</head>
<body>
<table border="1" width="900" align="center">
<tr align="center">
<td>
Web Camera
<div id="camera" style="height:300px; width:400px; border-style:solid;">
<video id="video" width="400" height="300"></video>
</div>
</td>
<td>
Photo Frame
<div id="frame" style="height:300px; width:400px; border-style:solid;">
<canvas id="canvas" width="400" height="300"></canvas>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2">
<button id="snap" onclick="snap()">Snap Photo</button>
</td>
</tr>
</table>
</body>
</html>
In above code you will not be able to see live preview.
Change handleVideo function to :-
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}
After adding video.play(); you will see live preview.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.