如何使用JavaScript開啟網路攝像頭？

在本教程中，我們將學習如何使用JavaScript開啟網路攝像頭。可以使用WebRTC來實現。WebRTC是Web即時通訊的縮寫。使用此物件，我們可以訪問和捕獲使用者裝置中可用的網路攝像頭和麥克風裝置。

如何訪問網路攝像頭？

我們可以使用ECMAScript物件`navigator.mediaDevices.getUserMedia(constraints)`訪問使用者裝置的網路攝像頭和麥克風。

因此，`getUserMedia()`函式預設會請求使用者許可權以使用您的網路攝像頭。此函式返回一個**Promise**，一旦您點選確定並授予許可權，則Promise函式被觸發，它將在您的系統中啟用網路攝像頭；否則，如果您不允許，它還有一個catch方法來關閉網路攝像頭。

我們還可以向`getUserMedia()`函式傳遞引數，例如我們想要特定寬度或高度的圖片。

開啟網路攝像頭的過程

我們可以按照以下步驟使用JavaScript開啟網路攝像頭。

  • **步驟1** - 新增HTML元素，例如用於顯示網路攝像頭流的影片和一個按鈕。

  • **步驟2** - 檢查網路攝像頭是否可用並解析`getUserMedia`函式返回的Promise。

  • **步驟3** - 向`getUserMedia()`函式傳遞引數，例如audio和video為true，因為我們將使用它們。

  • **步驟4** - 在智慧手機的情況下，我們必須使用`facingMode`選項，因為兩個攝像頭都可用，並且預設情況下，我們使用前置攝像頭開啟。

示例

下面是一個開啟網路攝像頭的簡單程式。我們已經按照上述步驟完成了我們的任務。

<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>

使用CSS設計介面

首先，讓我們使用HTML和CSS設計我們的網頁介面。

我們添加了網路攝像頭影片區域之類的元件，並使用CSS將其高度和寬度設定為400px，背景顏色為黑色。它將顯示網路攝像頭影片流。

新增一個名為**開啟攝像頭**的按鈕並應用其CSS屬性；此按鈕將用於啟動網路攝像頭。

現在我們將新增並嵌入我們的功能程式碼到主程式中。

我們將呼叫函式，當單擊**開啟攝像頭**按鈕時，將執行上面討論的所有指令。

示例

在下面的示例中，我們添加了一些CSS來設計更具互動性的介面。

<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>

從輸出螢幕中可以看出，當我們點選“開啟攝像頭”按鈕時，它會請求訪問網路攝像頭，當我們允許訪問時，它將在影片區域螢幕中啟動網路攝像頭影片流；如果我們不授予訪問許可權，則不會顯示任何輸出。

更新於：2022年8月23日

19K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.