Webcam doesn’t display

programming
1

I did this on my computer but it doesn’t work, I don’t see anything happening.

<!DOCTYPE html>
<html>
<head>
	<title>cam</title>
	<meta charset="utf-8">
	<meta http-equiv="x-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="widthdvice-width, initial-scale=1.0">
</head>


<style type="text/css">
	
h1 {

	font-family: sans-serif;
	color: green;
}

body{
	margin: 50px;
}

#container {

	margin: 0px;
	width: 500px;
	height: 375px;
	border: 10px #333 solid;
}

#videoElement{
	width: 500px;
	height: 375px;
	background-color: #666; 
}

</style>

<body>
<h1>Display webcam</h1>
<div id="container">
	
<video autoplay="true" id="videoElement">

</video>

</div>

<script >

let video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) 
{

navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream)
{
	video.srcObject = stream;
})

.catch (function (error){

console.log("Something went wrong!");
})
   }

else {
	console.log("getUserMedia not supported");
}

</script>

</body>
</html>
2

Does your console display any error or warning?

1 Like
3

yes but it doesn’t do anything it doesn’t enter

4 
<!DOCTYPE html>
<html>
<head>
	<title>cam</title>
	<meta charset="utf-8">
	<meta http-equiv="x-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="widthdvice-width, initial-scale=1.0">
</head>


<style type="text/css">
	
h1 {

	font-family: sans-serif;
	color: green;
}

body{
	margin: 50px;
}

#container {

	margin: 0px;
	width: 500px;
	height: 375px;
	border: 10px #333 solid;
}

#videoElement{
	width: 500px;
	height: 375px;
	background-color: #666; 
}

</style>

<body>
<h1>Display webcam</h1>
<div id="container">
	
<video autoplay="true" id="videoElement">

</video>

</div>

<script >

let video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) 
{

navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream)
{
	video.srcObject = stream;
})

.catch (function (error){

console.log("Something went wrong!");
})
   }

else {
	console.log("getUserMedia not supported");
}

</script>

</body>
</html>
5

Hi @ronieeeeee - when I try your example, it works fine for me in Chrome and Firefox. Are you seeing the permissions dialog appear where you have to grant your browser access to your webcam?

What error does your console show? I am not seeing it on my end.