How to open webcam using JavaScript?-JS Tutorial-php.cn

How to open webcam using JavaScript?

PHPz

Release： 2023-08-24 15:09:08

forward

2217 people have browsed it

如何使用 JavaScript 打开网络摄像头？

In this tutorial, we will look at the process of opening a webcam using JavaScript. So, this can be done using WebRTC. WebRTC is the abbreviation for Web Real-Time Communications. Using this object we can access and capture the webcam and microphone devices available in the user's device.

How to access the webcam?

We can access the user device webcam and microphone using the ECMAScript object navigator.mediaDevices.getUserMedia(constraints).

Therefore, the getUserMedia() function will by default seek the user's permission to use your webcam. The function returns a promise, once you click OK and grant permission, then the promise will be fired and it will enable the webcam in your system; otherwise, if you don't allow it, Well it also has a catch method to turn off the webcam.

We can also pass parameters to the function getUserMedia() function, just like we want an image of a specific width or height.

The process of opening the webcam

We can follow the steps below to open the webcam using JavaScript.

Step 1 - Add HTML elements such as video and button.
Step 2 - Check if the webcam is available and resolve the returned promise getUserMedia function.
STEP 3 - Pass parameters to getUserMedia() function such as audio and video true because we will use them
Step 4 - For smartphones we have to use faceingMode option for both The camera is available and by default we turn it on with the front camera.

Example

Below is a simple program to open a webcam. We followed the above steps to complete our task.

<html>
<head>
   <title>Open webcam using JavaScript. </title>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <button id="startBtn" onclick="openCam()">Open Webcam</button>
   <br/><br/>
   <video id="videoCam"></video>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script>
</body>
</html>

Copy after login

Use CSS to design the interface

First, let's design our web interface using HTML and CSS.

We add a component like the webcam video area and use CSS to set its height and width to 400px and the background color to black. It will display the webcam video stream.

Add a button named Open Camera and apply its CSS properties; this button will be used to launch the webcam.

Now we will add the function code and embed it into the main program.

We will call this function when the OpenCamera button is clicked, and within this function, all instructions will happen as discussed above.

Example

In the example below, we added some CSS to design a more interactive interface.

<html>
<head>
   <title>Open webcam using JavaScript.</title>
   <style>
      *{
         background-color: #658EA9;
      }
      #videoCam {
         width: 630px;
         height: 300px;
         margin-left: 0px;
         border: 3px solid #ccc;
         background: black;
      }
      #startBtn {
         margin-left: 280px;
         width: 120px;
         height: 45px;
         cursor: pointer;
         font-weight: bold;
      }
      #startBtn:hover{
         background-color: #647C90;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Open WebCam Using JavaScript</h1>
   <br/>
   <video id="videoCam"></video>
   <br/><br/>
   <button id="startBtn" onclick="openCam()">Open Camera</button>
   <script>
      function openCam(){
         let All_mediaDevices=navigator.mediaDevices
         if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
            console.log("getUserMedia() not supported.");
            return;
         }
         All_mediaDevices.getUserMedia({
            audio: true,
            video: true
         })
         .then(function(vidStream) {
            var video = document.getElementById('videoCam');
            if ("srcObject" in video) {
               video.srcObject = vidStream;
            } else {
               video.src = window.URL.createObjectURL(vidStream);
            }
            video.onloadedmetadata = function(e) {
               video.play();
            };
         })
         .catch(function(e) {
            console.log(e.name + ": " + e.message);
         });
      }
   </script> 
</body>
</html>

Copy after login

As you can observe from the output screen, when we click on the "Open Camera" button, it asks for access to the webcam and when we allow that access, it launches the webcam in the video area screen Video streaming; if we don't grant access, it won't show any output.

The above is the detailed content of How to open webcam using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!