How to load the camera in HTML

Effect diagram: Overall effect:

Video loading:

Photograph:

Step 1: Create HTML elements

First, we need to create an HTML5 document.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Then insert the following code inside <body></body> :

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Screenshot</button>
<canvas id="canvas" width="640" height="480"></canvas>

Step 2: Create the JavaScript

First, create a JavaScript in <head></head> :

<script language="javascript">
	// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}
/* Legacy code below: getUserMedia 
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.srcObject = stream;
        video.play();
    }, errBack);
}
*/
</script>

Then, insert the following code after the HTML element you just created:

<script language="javascript">
	// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});
</script>

Now, this HTML can complete the functions of opening the camera and taking pictures!

This is the end of this article on how to load the camera in HTML. For more relevant html loading camera content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Front-end implementation of GBK and GB2312 encoding and decoding of strings (summary)

>>: Parse CSS to extract image theme color function (tips)