iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

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

Day09 在瀏覽器上檢查現有設備

前幾篇介紹了 WebRTC 是如何連線的,今天我們要開始在瀏覽器上使用 WebRTC 的 API。

使用瀏覽器 + WebRTC 可以快速實現即時影音通訊,而且非常容易,下圖可以看到在這十年的發展中,多數瀏覽器也都支援很成熟了。

https://ithelp.ithome.com.tw/upload/images/20210923/20130062OskVuYFwPu.png

https://caniuse.com/rtcpeerconnection

查看目前有哪些設備

我們要進行語音及視訊通話最基本的就是要有攝影機及麥克風,瀏覽器要如何查看目前有哪些設備呢?

使用 navigator.mediaDevices.enumerateDevices() 獲取音視訊裝置,我們可以再 Chrome 的consol中輸入測試看看。

https://ithelp.ithome.com.tw/upload/images/20210923/20130062g3VYWwg7UR.png

可以看到返回的是一個 Promise 裡面有 DeviceInfo 陣列,陣列中有每個輸入 / 輸出設備的訊息,有四個屬性:

  1. deviceId: 設備的Id
  2. kind: 設備的種類
  3. label: 設備的名稱
  4. groupId: 若兩個設備的id相同,代表是同一個物理設備

但是!如果沒有授權訪問設備的權限,我們會收到名稱及deviceId都是空的,這也是非常合理的,如果任何網站隨便都可以讀取我們的麥克風攝影機,想想都覺得很可怕!

我們可以呼叫 getUserMedia 讓瀏覽器來詢問使用者是否給予權限,在consol中輸入以下就可以看到要求權限!

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

https://ithelp.ithome.com.tw/upload/images/20210923/201300622xJ510ziQU.png

今天我們透過瀏覽器,測試了獲取麥克風及相機的權限還有檢查目前有哪些設備可以使用,明天我們來看看 getUserMedia 可以做哪些事吧!


上一篇
Day08 NAT 穿透 ICE、STUN、TURN
下一篇
Day10 獲取攝影機及麥克風的訪問權限
系列文
後疫情時代的 WebRTC 微學習30

尚未有邦友留言

立即登入留言