老师您好，想问下chrome浏览器中音频的 label是空是什么原因呢？

来源：6-3 【安全管理】获取音视频设备的访问权限

jerrychane

2021-02-08

图片描述
index.html 代码如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WebRTC capture video and audio</title>
    </head>

    <body>
        <div>
            <label>
                audio source:
            </label>
            <select id="audioSource"></select>
        </div>
        <div>
            <label>
                audio output:
            </label>
            <select id="audioOutput"></select>
        </div>
        <div>
            <label>
                vedeo source:
            </label>
            <select id="videoSource"></select>
        </div>
        <!-- playsinline 表示在页面中播放 -->
        <video autoplay playsinline id="player"></video>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="./js/client.js"></script>
    </body>
</html>

client.js 代码如下

// js/client.js
"use strict";
var videoplay = document.querySelector("video#player");
let audioSource = document.querySelector("select#audioSource");
let audioOutput = document.querySelector("select#audioOutput");
let videoSource = document.querySelector("select#videoSource");

function gotDevices(deviceInfos) {
  deviceInfos.forEach((deviceInfo) => {
    let option = document.createElement("option");
    option.text = deviceInfo.label;
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === "audioinput") {
      audioSource.appendChild(option);
    } else if (deviceInfo.kind === "audiooutput") {
      audioOutput.appendChild(option);
    } else if (deviceInfo.kind === "videoinput") {
      videoSource.appendChild(option);
    }
  });
}

function gotMediaStream(stream) {
  videoplay.srcObject = stream;
  return navigator.mediaDevices.enumerateDevices();
}

function handleError(error) {
  console.log("getUserMedia error:", error);
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  console.log("getUserMedia is not supported");
} else {
  var constraints = {
    video: true,
    audeo: true,
  };
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(gotMediaStream)
    .then(gotDevices)
    .catch(handleError);
}