如何爲WebRTC（javascript）獲取多個USB設備（攝像頭）的唯一ID？

Question

我正在Windows機器上開發，但目標平臺是使用Chromium的Raspberry Pi（這是可選的，任何瀏覽器都可以）。我將多臺攝像機（比如一打）連接到Pi，顯然甚至必須使用USB集線器。在下面的代碼中，每次插入攝像頭或甚至在新的瀏覽器會話中，我都會看到不同的設備ID。我需要能夠從特定的相機錄製，錄製視頻或圖像，打開/關閉相機等，但除非我能爲每臺相機獲取某種唯一標識符，否則我無法做到這一點。

我也可以使用視頻輸入標識符來識別相機（例如/ dev/video0，/ dev/video1，.../dev/video n），但不知道如何在瀏覽器。

HTML：

<div id="container"> 
    <h1>Test Page</h1> 
    <div id="List"></div> 
    <div class="select"> 
     <p><label for="videoSource">Video source: </label><select id="videoSource"></select></p> 
     <p><label for="audioOutput">audioOutput source: </label><select id="audioOutput"></select></p> 
     <p><label for="audioInput">audioInput source: </label><select id="audioInput"></select></p> 
    </div> 
    <video muted autoplay></video> 
</div> 

的javascript：

<script> 
    var DeviceInfo = ""; 
    var videoSelect = document.getElementById("videoSource"); 
    var audioOutputSelect = document.getElementById("audioOutput"); 
    var audioInputSelect = document.getElementById("audioInput"); 
    navigator.mediaDevices.enumerateDevices() 
     .then(gotDevices) 
     .catch(errorCallback); 
    function gotDevices(deviceInfos) { 
     alert("deviceInfos.length: " + deviceInfos.length); 
     for (var i = 0; i !== deviceInfos.length; ++i) { 
      var deviceInfo = deviceInfos[i]; 
      DeviceInfo += "<br>================="; 
      for (var key in deviceInfo) { 
       DeviceInfo += "<br>" + key + " => " + deviceInfo[key]; 
      } 
      var option = document.createElement('option'); 
      option.value = deviceInfo.deviceId; 
      if (deviceInfo.kind === 'audioinput') { 
       option.text = deviceInfo.label || 
       'Microphone ' + (audioInputSelect.length + 1); 
       audioInputSelect.appendChild(option); 
      } else if (deviceInfo.kind === 'audiooutput') { 
       option.text = deviceInfo.label || 'Speaker ' + 
       (audioOutputSelect.length + 1); 
       audioOutputSelect.appendChild(option); 
      } else if (deviceInfo.kind === 'videoinput') { 
       option.text = deviceInfo.label || 'Camera ' + 
       (videoSelect.length + 1); 
       videoSelect.appendChild(option); 
      } 
     } 
     document.getElementById("List").innerHTML = DeviceInfo; 
    } 
    function errorCallback(err) { 
     alert(err.name + ": " + err.message); 
    } 
</script> 

樣本輸出：

================= 
toJSON => function toJSON() { [native code] } 
deviceId => 68KeeWjqTyTiECj/vjwuwWSMNXraaUu/sz5CDSnbNg0= 
kind => videoinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => wuJ0e0dyB7bUyO3L6MHV6CD8v+FQRRZ0V9oSS/IMebg= 
kind => videoinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => BdtXeGDVhh2g68rfu4cOg9yZoS7WdgTNr8nXOThLfPU= 
kind => videoinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => mAc/SogzkQKpq8O3Zto64+SlOwsg1kKdXJLxua5t328= 
kind => audioinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => n1or62DRNYW0zC4yQVox75nQhBZb0BYR9C/VWB1GLkM= 
kind => audioinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => 74K5qAhhroD8esqAYW+9P8jxs4yvdWnPQ1Ia8OYJZqc= 
kind => audioinput 
label => 
groupId => 
================= 
toJSON => function toJSON() { [native code] } 
deviceId => rHIqRAFL4ZcfTqJc214llo5XxeDLm+pTG/DoicpOryM= 
kind => audioinput 
label => 
groupId => 

還要注意標籤是空白（在Windows /火狐），但在Raspbian /鉻我做獲取標籤。不幸的是，它們並不是唯一的（例如，USB2.0 Camera（1871：0142））如果我能以某種方式使用這些標籤......這個page表示標籤「返回一個DOMString，它是描述此設備的標籤（例如」External USB網絡攝像機「）。只有在活動MediaStream使用或授予永久權限時纔可用。」我不知道什麼或如何做「持久性權限」。

任何幫助表示讚賞。我願意使用不同的技術，即fswebcam以某種方式鏈接到瀏覽器（自定義URL）或PHP或其他任何方式。

Answer 1

瀏覽器維護同一個deviceid可能是安全問題，網站可以通過使用deviceid（如瀏覽器cookie）跟蹤用戶。

您可以從deviceInfo標籤或MediaTrack標籤獲得設備供應商名稱，如果它們全部來自同一供應商，則請戳here。或挖chromium devices並構建您的自定義版本。

Answer 2

deviceId就是那個id。由於隱私原因，該頁面的來源是獨一無二的，但在第一次將相機或麥克風許可授予來自原始頁面的頁面之後，它將在cookie之類的瀏覽會話中持續存在。之後，它應該持續到用戶清除他們的cookies。

換句話說，如果用戶過去曾授予getUserMedia訪問您的頁面的權限，無論是昨天還是一年前，那麼您現在得到的id將與他們當時的內容相匹配，在來源網頁中提供此後用戶還沒有清除他們的Cookie。

label字段也是空白的，直到您完成此操作，再次出於隱私原因。

拔下插頭和重新插入設備應該沒有關係。 ID應該仍然可用。