Caputre Cam with JS

2,795 Kb

How do I make an caputre cam with js?

Here we use a phpacademy video tutorial as a base of creating javascript that grabs the user's video and draws it to a canvas element. This drawn video's rgb-values are then changed with javascript.. What is a caputre cam with js? How do you make a caputre cam with js? This script and codes were developed by KimmoCommit on 14 January 2023, Saturday.

Caputre Cam with JS Previews

Caputre Cam with JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Caputre Cam with JS</title> <link rel="stylesheet" href="css/style.css">
<body> <div id="booth"> <video id="video" width="400" height="300" autoplay></video>
<canvas id="canvas" width="400" height="300"></canvas>
</div> <script src="js/index.js"></script>

Caputre Cam with JS - Script Codes CSS Codes

#booth { width: 400px; border: 10px solid grey; margin: 0 auto; background-color: #ccc;

Caputre Cam with JS - Script Codes JS Codes

//self inwoking function that is run when page loads
(function() { var canvas = document.getElementById('canvas'), context = canvas.getContext("2d"), video = document.getElementById('video'), vendorUrl = window.URL || window.webkitURL; navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //js object navigator.getMedia({ video: true, audio: false }, function(stream){ video.src = vendorUrl.createObjectURL(stream);; }, function(error){ //some errors occured //console.log(error.code()); }); function draw(video, context, width, height){ // i is set to be the variable that represents the pixels that we loop through (increment) var image, data, i, r, g, b, brightness; context.drawImage(video, 0, 0, width, height); //getImageData returns color values in each pixel that are found canva's context - try running console.log(data) to see the results in the log image = context.getImageData(0,0, width, height); data =; //here we loop through all of the pixels and turn their color which we want and set them back up again for(i = 0; i < data.length; i = i + 4){ r = data[i]; g = data[i + 1]; b = data[i + 2]; brightness = ( (r + 22) + (g + 0) + (b + 10) ) / 3; //here we assign one value to all of the three data[i] = data[i + 1] = data[i + 2] = brightness; } = data; context.putImageData(image, 0, 0); //to not only call "draw" functon only once, we set this timeout setTimeout(draw, 22, video, context, width, height); } video.addEventListener("play", function(){ alert("There is some issues with loading this draw function - this alert helps it appear on FireFox"); draw(this, context, 400, 300); }, false); })();
Caputre Cam with JS - Script Codes
Caputre Cam with JS - Script Codes
Home Page Home
Developer KimmoCommit
Username KimmoCommit
Uploaded January 14, 2023
Rating 3
Size 2,795 Kb
Views 6,072
Do you need developer help for Caputre Cam with JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KimmoCommit (KimmoCommit) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!