調用攝像鏡頭

發表於 | 分類於 | |

調用硬體的攝像鏡頭可以實現許多有趣的功能
像是拍照或是掃描 QR code

底下來說明調用攝像鏡頭的方法吧：

  • 認識 MediaDevices 的 getUserMedia 方法
  • 使用 getUserMedia 來調用攝像鏡頭(啟動及關閉)

認識 MediaDevices 的 getUserMedia 方法

調用鏡頭會需要先認識 MediaDevices 這個瀏覽器物件
詳細可以參考 MDN(Mozilla Developer Network) 的文檔

這邊就先列一下幾個比較重要的代碼範例：

調用方式：

1
2
3
4
navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {})
  .catch(function (err) {});

constraints 這個參數可以指定要調用的硬體設備
像是麥克風或是攝像頭

調用攝像頭：

1
2
3
{
  video: true;
}

調用攝像頭並優先使用前鏡頭：

1
2
3
4
5
{
  video: {
    facingMode: "user";
  }
}

調用攝像頭並優先使用後鏡頭：

1
2
3
4
5
{
  video: {
    facingMode: "environment";
  }
}

調用攝像頭並強制使用後鏡頭：

1
2
3
4
5
6
7
{
  video: {
    facingMode: {
      exact: "environment";
    }
  }
}

註： 我這邊實測沒有強制使用前鏡頭的設定，只有後鏡頭是可以強制設定的！

使用 getUserMedia 來調用攝像鏡頭(啟動及關閉)

啟動攝像鏡頭的方法比較單純
至於關閉攝像鏡頭則會需要先記住 mediaStream
這邊是使用閉包的方式讓啟動和關閉相機的函式都可訪問這個變數
並在停用相機時清除 mediaStream 的引用和 video.srcObject 的位置
讓其在不被需要時可以被正確回收記憶體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const onCamera = () => {
  const video = document.querySelector("video");
  let mediaStream;

  // 開啟攝像頭
  const startCamera = async () => {
    try {
      mediaStream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: "environment", width: 300 },
      });
      video.srcObject = mediaStream;
    } catch (err) {
      console.log("GetUserMedia Error:", err.message);
    }
  };

  // 關閉攝像頭
  const stopCamera = async () => {
    if (mediaStream) {
      const videoTracks = mediaStream.getVideoTracks();
      videoTracks.forEach((track) => track.stop());
      // 釋放資源
      mediaStream = null;
      video.srcObject = null;
    }
  };

  return { startCamera, stopCamera };
};

const { startCamera, stopCamera } = onCamera();

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/08/04/調用攝像鏡頭/

0%