Use HTML5 technology to control the camera on your computer or phone

The client APIs on mobile devices and desktops are not initially synchronized. Initially, you always have some features and APIs on your mobile device, but slowly, these APIs appear on your desktop computer. One of the application interface technologies is the Getusermedia API, which allows app developers to access the user's webcam or built-in camera. Let me show you how to access your webcam through a browser and extract screenshots.

Some comments are written in the following code, please read:

1. <!--

2. Ideally, we should first determine whether your device

3. There are cameras or cameras, but for simplicity, we are here directly

4. Write the HTML tag instead of using JavaScript to first determine

5. Then dynamically generate these tags

6.-->

7. <video id= "video" width= "640" height= "480" AutoPlay></video>

8. <button id= "Snap">snap Photo</button>

9. <canvas id= "Canvas" width= "640" height= "480"></canvas>

Before writing these tags should determine whether the user's client has webcam support, but here in order to not be so troublesome, here directly write out these HTML tags, it should be noted that we use the length of the width is 640x480.

JavaScript code

Because it is hand-written HTML, the following JS code will be much simpler than you think.

1.//Put event listeners into place

2.

3. Window.addeventlistener ("domcontentloaded", function() {

4.

5.//Grab elements, create settings, etc.

6.

7. var canvas = document.getElementById ("Canvas"),

8.

9. Context = Canvas.getcontext ("2d"),

10.

Video = document.getElementById ("video"),

12.

Videoobj = {"Video": True },

14.

Errback = function(error) {

16.

Console.log ("Video Capture Error:", Error.code);

18.

19.};

20.

//Put video listeners into place

22.

if(navigator.getusermedia) {//Standard

24.

Navigator.getusermedia (videoobj, function(stream) {

26.

VIDEO.SRC = stream;

28.

Video.play ();

30.

(Errback);

32.

.} Else if(navigator.webkitgetusermedia) {//Webkit-prefixed

34.

Navigator.webkitgetusermedia (videoobj, function(stream) {

36.

PNs. video.src = Window.webkitURL.createObjectURL (stream);

38.

Video.play ();

40.

(Errback);

42.

43.}

44.

The. else if(navigator.mozgetusermedia) {//Firefox-prefixed

46.

Navigator.mozgetusermedia (videoobj, function(stream) {

48.

video.src = window. Url.createobjecturl (stream);

50.

Wuyi Video.play ();

52.

(Errback);

54.

55.}

56.

(.}, false);

Once the user's browser is determined to support Getusermedia, the following is very simple, just need to set the video element src to the user's webcam video live connection. That's all the things you need to do with a browser to access the camera!

The function of taking pictures can only be said to be a little more complicated. We added a listener to the button to draw the video onto the canvas.

1.//Trigger Photo action

2.

3. document.getElementById ("Snap")

4.

5.. addeventlistener ("click", Function () {

6.

7. Context.drawimage (video, 0, 0, 640, 480);

8.

9.});

Of course, you can also add some filter effect to the picture .... I'd better put these techniques in a later article. But at least you can convert this canvas image into a single image.

We used to use a third-party plugin to access the user's camera from the browser, which is complicated. Now with just HTML5 canvas technology and JavaScript, we can easily and quickly operate the user's camera. Not just access the camera, but also because HTML5 's canvas technology and its power, we can add a variety of attractive filter effects to the image. Now, take a picture of yourself in the browser with your own camera!

Web Front end Learning Communication Group 21 598399936

Use HTML5 technology to control the camera on your computer or phone