iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

後疫情時代的 WebRTC 微學習系列 第 10

Day10 獲取攝影機及麥克風的訪問權限

上一篇我們使用 getUserMedia 來獲取使用者裝置權限,不過他的實際功能如其名,是用來取得使用者的媒體流(Media stream),裡面包含了要求的影音軌(Track)。

語法

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

https://ithelp.ithome.com.tw/upload/images/20210924/20130062rJVbEC8mbK.png

如果 getUserMedia 成功(使用者允許使用權限)則可以通過 Promise 獲得 MediaStream 物件,也就是說我們可以從使用者的鏡頭、麥克風取得影音的資料了!

若是使用者拒絕我們訪問設備或是訪問的設備不可使用則 reject 返回 PermissionDeniedErrorNotFoundError 等錯誤。

參數

從剛剛的語法中可以看到, getUserMedia 需要帶入一個參數 constraints ,其中包含 videoaudio ,這個結構可以指定我們要收集音訊或是視訊,例如只收集視訊:

const contrains = {
    video: true,
    audio: false
};

 

難道只有這樣?

不!我們還可以通過更進階的條件(MediaTrackConstraints)去設定,例如我們的應用是上音樂課視訊可能較不重要:

const contrains = {
  video: {
    frameRate: 15,
    width: 640,
    height: 360,
  },
  audio: {
    noiseSuppression: false,
    autoGainControl: false
  }
};

視訊的 FPS 設定為15,寬高設定為 640 x 360,為了收集樂器的聲音關閉噪音消除及自動增益的功能。

安全

作為可能涉及重大隱私問題的 API,通過 MediaDevices.getUserMedia() 取得使用者媒體權限時,只有以下情況會成功:

  1. 使用 localhost
  2. 使用 HTTPS 保護的網域
  3. 使用 file:// 協議打開的文件

其他情況會失敗回傳 undefined。


上一篇
Day09 在瀏覽器上檢查現有設備
下一篇
Day11 [實作] 如何在 WebRTC 中切換設備
系列文
後疫情時代的 WebRTC 微學習30

尚未有邦友留言

立即登入留言