Breaking News: Grepper is joining You.com. Read the official announcement!

capture webcam js

Crazy Cod answered on March 16, 2022 Popularity 9/10 Helpfulness 5/10

answer capture webcam js

capture webcam js

Comment

<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() {
   	let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
	video.srcObject = stream;
});

click_button.addEventListener('click', function() {
   	canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
   	let image_data_url = canvas.toDataURL('image/jpeg');

   	// data url of the image
   	console.log(image_data_url);
});>
</script>

Popularity 9/10 Helpfulness 5/10 Language html

Source: usefulangle.com

Tags: capture html webcam

Link to this answer
Share Copy Link

Contributed on Mar 16 2022

Crazy Cod

0 Answers Avg Quality 2/10

capture webcam js

Contents

More Related Answers

capture webcam js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.