【音影片】攝像頭

看見了發表於2023-05-03

web camera vs ip camera

  • IP Camera主要指那些可以直接接入Internet的攝像頭，一般不需要專門的PC支援，可以歸類於嵌入式裝置。多用於監控，如公路上各個路口的監控裝置。價格相對較高
  • Web Camera主要指那些需要透過電腦、手機、平板等機器才能接入Internet的攝像頭，多是USB介面。多用於影片聊天，拍照等。價格相對也較低。

檢查裝置支援

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  console.log("Let's get this party started")
}

音影片採集

下面介紹瀏覽器採集音影片的相關API：

1. getUserMedia

MediaDevices.getUserMedia() 會提示使用者給予使用媒體輸入的許可，媒體輸入會產生一個MediaStream，裡面包含了請求的媒體型別的軌道。此流可以包含一個影片軌道（來自硬體或者虛擬影片源，比如相機、影片採集裝置和螢幕共享服務等等）、一個音訊軌道（同樣來自硬體或虛擬音訊源，比如麥克風、A/D 轉換器等等），也可能是其他軌道型別。

它返回一個 Promise 物件，成功後會resolve回撥一個 MediaStream 物件。若使用者拒絕了使用許可權，或者需要的媒體源不可用，promise會reject回撥一個 PermissionDeniedError 或者 NotFoundError 。

var promise = navigator.mediaDevices.getUserMedia(constraints);

2. MediaStreamConstraints

MediaStreamConstraints引數物件，指定了請求的媒體型別和相對應的引數。

constraints 引數是一個包含了video 和 audio兩個成員的MediaStreamConstraints 物件，用於說明請求的媒體型別。必須至少一個型別或者兩個同時可以被指定。如果瀏覽器無法找到指定的媒體型別或者無法滿足相對應的引數要求，那麼返回的 Promise 物件就會處於 rejected［失敗］狀態，NotFoundError作為 rejected［失敗］回撥的引數。

以下同時請求不帶任何引數的音訊和影片：

{ audio: true, video: true }

如果為某種媒體型別設定了 true ，得到的結果的流中就需要有此種型別的軌道。如果其中一個由於某種原因無法獲得，getUserMedia() 將會產生一個錯誤。

還可以對每一條媒體軌進行限制

{
    video:{
        frameRate: {min: 20},
        width: {min: 640, ideal: 1280},
        height: {min: 360, ideal: 720},
        aspectRatio: 16/9
    },
    audio:{
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
    }
}

影片的幀率最小20幀每秒；寬度最小640，理想寬度是1280；同樣的，高度最小是360，理想高度是720；此外寬高比是16:9；對於音訊則是開啟迴音消除、降噪以及自動增益功能。

返回前後置攝像頭

要告訴瀏覽器在裝置上使用前置或後置(移動)相機，可以在video物件中指定facingMode屬性：

{
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440
    },
    facingMode: 'user'
  }
}

此設定將始終在所有裝置中使用前置攝像頭。 要在移動裝置上使用後置攝像頭，可以將facingMode屬性更改為environment。

{
  video: {
    ...
    facingMode: {
      exact: 'environment'
    }
  }
}

enumerateDevices

呼叫enumerateDevices方法時，它將返回使用者PC上可用的所有可用輸入媒體裝置。

async function getDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
}

[
    {
        "deviceId": "",
        "kind": "audioinput",
        "label": "",
        "groupId": ""
    },
    {
        "deviceId": "d15b341c9c9c8ed243563ae5b4c9d000e5cd9fd1f49869bac710382a1cb104cc",
        "kind": "videoinput",
        "label": "HP Wide Vision HD (1bcf:2c87)",
        "groupId": "82c770e7689be826abd817b9a6e19d83ec561ae3057939caaae6d6168db57045"
    },
    {
        "deviceId": "",
        "kind": "audiooutput",
        "label": "",
        "groupId": ""
    }
]

相關文章