HTML5 JavaScript Webcam and Example

Let's get started by setting up some HTML Elements to be used for displaying the webcam video stream.

video_element = document.createElement("video"); video_element.autoplay = true; video_element.playsinline = true; video_element.setAttribute('playsinline', 'playsinline'); // For iOS video_element.style.width = "100%";

Now we'll set up the asynchronous function to start the video stream.

startVideo = async function(){ stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: {width: 1920, height: 1080, facingMode: "user"} }); videoTracks = stream.getVideoTracks(); video_element.srcObject = stream; }

Let's call the function we've just created and print the video element to the screen.

print(video_element); startVideo();

Once you've got video, let's create a canvas that we'll use to capture a picture.

canvas_element = document.createElement("canvas"); canvas_element.style.width = "100%"; // Fits canvas to screen canvas_element.width = video_element.videoWidth; canvas_element.height = video_element.videoHeight; context = canvas_element.getContext('2d');

With our canvas created, we can now print the element to the screen (should be done before we draw the image), and capture an image from the video stream.

canvas_element.width = video_element.videoWidth; canvas_element.height = video_element.videoHeight; print(canvas_element); context.drawImage(video_element, 0, 0, video_element.videoWidth, video_element.videoHeight);

Let's do something with that canvas and transform the image. Let's grab the pixel data of the canvas and transform it using a greyscale calculation.

canvas_image_data = context.getImageData(0, 0, canvas_element.width, canvas_element.height); for (var i=0; i<canvas_image_data.data.length; i+=4) { // This is our greyscale filter var r = canvas_image_data.data[i]; var g = canvas_image_data.data[i+1]; var b = canvas_image_data.data[i+2]; // CIE luminance for the RGB // The human eye is bad at seeing red and blue, so we de-emphasize them. var v = 0.2126*r + 0.7152*g + 0.0722*b; canvas_image_data.data[i] = canvas_image_data.data[i+1] = canvas_image_data.data[i+2] = v } print(canvas_element); context.putImageData(canvas_image_data, 0, 0);

Okay, images are cool, but let's take that video and continuously draw it to the canvas, then, let's apply a new threshold filter.

threshold_value = 35; // Increase this to change the lightness of the video (0 - 255) if (window.interval){window.clearInterval(window.interval)} window.interval = window.setInterval(function(){ context.drawImage(video_element, 0, 0, video_element.videoWidth, video_element.videoHeight); canvas_image_data = context.getImageData(0, 0, canvas_element.width, canvas_element.height); for (var i=0; i<canvas_image_data.data.length; i+=4) { // This is our threshold filter (very similar to greyscale) var r = canvas_image_data.data[i]; var g = canvas_image_data.data[i+1]; var b = canvas_image_data.data[i+2]; // CIE luminance for the RGB // The human eye is bad at seeing red and blue, so we de-emphasize them. var v = 0.2126*r + 0.7152*g + 0.0722*b; canvas_image_data.data[i] = canvas_image_data.data[i+1] = canvas_image_data.data[i+2] = (Math.round(Math.min(255,(v+threshold_value))/255)*255) | 0; } context.putImageData(canvas_image_data, 0, 0); },30); print(canvas_element);

Close the video stream when you're done.

if (!stream){ return; } stream.getTracks().forEach(function(track) { track.stop(); }); stream = null;

Explore OakFrame

    Games

    Play games in your browser for free, handcrafted by us here at OakFrame!

    Oak Studio Documentation

    Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration...

    Design Systems

    A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies....

    About OakFrame

    OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences...

Leave a Reply

Your email address will not be published. Required fields are marked *