# Webcam doesn’t display

**URL:** <https://forum.kirupa.com/t/webcam-doesn-t-display/666694>\
**Category:** programming\
**Created:** [May 5, 2024, 9:03pm UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694 "2024-05-05T21:03:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ronieeeeee](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@ronieeeeee](https://forum.kirupa.com/u/ronieeeeee)\
**Post date:** [May 5, 2024, 9:03pm UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694/1 "2024-05-05T21:03:59Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 5, 2024, 9:07pm UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694/2 "2024-05-05T21:07:13Z")

</div>

Does your console display any error or warning?

---

<div class="post-metadata">

**Author:** ![ronieeeeee](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@ronieeeeee](https://forum.kirupa.com/u/ronieeeeee)\
**Post date:** [May 5, 2024, 9:10pm UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694/3 "2024-05-05T21:10:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ronieeeeee](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@ronieeeeee](https://forum.kirupa.com/u/ronieeeeee)\
**Post date:** [May 5, 2024, 9:12pm UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694/4 "2024-05-05T21:12:16Z")

</div>

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 6, 2024, 2:09am UTC](https://forum.kirupa.com/t/webcam-doesn-t-display/666694/5 "2024-05-06T02:09:01Z")

</div>

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?

> [@ronieeeeee](#):
>
> yes but it doesn’t do anything it doesn’t enter

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