Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to access the device camera in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to access the device camera in JavaScript.

How to use the camera

To access the user's camera (or microphone), we use JavaScript MediaStream API. The API allows streaming access to video and audio captured by these devices.

The first step is to check whether the browser supports this API:

If ("mediaDevices" in navigator & & "getUserMedia" in navigator.mediaDevices) {/ / ok, supported by browsers}

In modern browsers, support is good (without Internet Explorer, of course).

Capture video stream

To capture the video stream generated by the camera, we use the getUserMedia method of the mediaDevices object. This method receives an object that contains the type of media we want to request (video or audio) and some requirements. First, we can get the video of the camera through {video: true}.

Const videoStream = await navigator.mediaDevices.getUserMedia ({video: true})

This call will ask the user whether to allow access to the camera. If the user refuses, it throws an exception and does not return the flow. Therefore, this situation must be handled within the try/catch block.

Note that it returns a Promise, so you must use an async/await or then block. Authorization will also pop up on the Mac OS system.

Yes, I use the Mac version of Edge browser.

Click "OK" to access the computer camera. The videoStream object output from the console is as follows

Video Specification (requirements)

We can improve video requirements by passing information about the required resolution and minimum and maximum limits:

Const constraints = {video: {width: {min: 1280, ideal: 1920, max: 2560,}, height: {min: 720, ideal: 1080, max: 1440,}; const videoStream = await navigator.mediaDevices.getUserMedia (constraints)

In this way, the stream enters with the correct width and height ratio, and if it is a phone in vertical mode, the size needs to be reversed.

Display video on the page

Now that there is a stream, how should we deal with it?

We can display the video in the video element on the page:

/ / there is a tag const video = document.querySelector ("# video"); const videoStream = await navigator.mediaDevices.getUserMedia (constraints); video.srcObject = videoStream in the page

Note the autoplay attribute autoplay in the video tag. Without it, you need to call video.play () to actually start displaying the image.

Access to the front and rear cameras of the phone

By default, getUserMedia uses the system's default video recording device. If it is a phone with two cameras, it uses a front-facing camera.

To access the rear camera, we must include faceModeMode: "environment" in the video specification:

Const constraints = {video: {width: {...}, height: {...}, facingMode: "environment"},}

The default is faceingMode: "user", that is, the front camera.

It is important to note that if you want to change the camera when the video is already playing, you need to stop the current video stream and then replace it with another camera's video stream.

VideoStream.getTracks () .forEach ((track) = > {track.stop ();})

Screenshot

Another cool thing you can do is capture a video image (screenshot).

You can draw the current video frame on canvas, for example:

/ / there is a tag const canvas = document.querySelector ("# canvas") in the page; canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext ("2d") .drawImage (video, 0,0)

You can also display canvas content in the img element.

In the example created in this tutorial, I added a button that dynamically creates an image from the canvas and adds it to the page:

Const img = document.createElement ("img"); img.src = canvas.toDataURL ("image/png"); screenshotsContainer.prepend (img); Thank you for reading. The above is the content of "how to access the device camera in JavaScript". After the study of this article, I believe you have a deeper understanding of how to access the device camera in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.