An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Slashdot
- Spoon Graphics
- Vandelay Design
- Noupe
- Reencoded
- CSS Globe
- 24 Ways
- Stylized Web
- Android Dissected
- Android Headlines
Help Webnuz
Referal links:
How to Stream Your Webcam to an HTML Document
Streaming your webcam to an HTML document is a short & simple process. We start by creating a plain HTML document (call it index.html).
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Your Face</title> </head> <body> </body></html>Now, we need to implement a <video> tag for streaming the webcam.
<body> <video width="500px" height="500px" id="webcam" autoplay></video></body>In a separate JavaScript file (index.js), we write code to access the webcam.
const video = document.getElementById("webcam")async function getMedia() { let stream = null try { stream = await navigator.mediaDevices.getUserMedia({ video: true }) video.srcObject = stream } catch (err) { console.log("error") }}getMedia()In the code, we grabbed the element by ID and stored it in variable video. It is important that we are using asynchronous function so the browser doesn't freeze on delay. The navigator.mediaDevices contains methods that is used to interact with input devices. The stream is stored and passed as source object to the video.
Finally, we need to import this back to the HTML document. In the <head> section,
<script defer src="index.js"></script>The defer attribute will ensure that the JavaScript is executed only after the page is loaded.
Now open your HTML document and it will ask for permission to access the camera. Click allow the and smile.
Original Link: https://dev.to/aravsanj/how-to-stream-your-webcam-to-an-html-document-303e
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To