html camera code example

Example 1: how to add a camera in html

<video autoplay></video>

    <script>
    const constraints = {
      video: true,
    };
    
    const video = document.querySelector("video");
    
    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
      video.srcObject = stream;
    });
    </script>

Example 2: js access webcam

<!DOCTYPE html>
<html>
<body>
	<div id="container">
		<video autoplay="true"></video>
	</div>
	<button class="btn" onclick="startWebCam()">Start</button>
	<script type="text/javascript">
		var video = document.querySelector("video");
		function startWebCam() {
			if (navigator.mediaDevices.getUserMedia) {
				navigator.mediaDevices.getUserMedia({ video: true })
			    	.then(function (stream) {
			      		video.srcObject = stream;
			    	})
			    	.catch(function (err0r) {
			      		console.log("Something went wrong!");
			    	});
			}
		}
		startWebCam();
	</script>
</body>
</html>

Tags:

Html Example

Recent Posts