オーディオおよびビデオ デバイスを取得するための WebRTC API

一。enumerateDevices

        WebRTC は、システムのオーディオ デバイスとビデオ デバイスを取得するための mediaDevices.enumerateDevices API を提供します。

var ePromise = navigator.mediaDevices.enumerateDevices();

        上記の呼び出しの戻り値は Promise オブジェクトです. 完了すると MediaDeviceInfo オブジェクトの配列を受け取ります. MediaDeviceInfo 属性値の意味は次のとおりです.

属性 意味
デバイスID デバイスID
ラベル 装置名
親切 audioinput/videoinput/audiooutput/videooutput などのデバイスの種類
グループ ID デバイス グループ ID

2. デモンストレーション例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WebRTC获取音视频设备</title>
    </head>
    <body>
        <div>
            <label>音频输入设备</label>
            <select id="audio_input"></select>
        </div>
        <div>
            <label>视频输入设备</label>
            <select id="video_input"></select>
        </div>
        <div>
            <label>音频输出设备</label>
            <select id="audio_output"></select>
        </div>
        <script src="./js/enumerate_devices.js"></script>
    </body>
</html>
'use strict'

var audioInput = document.querySelector("select#audio_input");
var videoInput = document.querySelector("select#video_input");
var audioOutput = document.querySelector("select#audio_output");

function HandleError(err) {
    console.log(err.name + "," + err.message);
}

function GetStream(stream) {
    return navigator.mediaDevices.enumerateDevices();
}

function GetDevices(deviceInfos) {
    deviceInfos.forEach(function(deviceInfo) {
        var option = document.createElement("option");
        option.text = deviceInfo.label;
        option.value = deviceInfo.deviceId;
        if (deviceInfo.kind === "audioinput") {
            audioInput.appendChild(option);
        } else if (deviceInfo.kind === "videoinput") {
            videoInput.appendChild(option);
        } else if (deviceInfo.kind === "audiooutput") {
            audioOutput.appendChild(option);
        } else if (deviceInfo.kind === "videooutput") {
            videoOutput.appendChild(option);
        } else {
            console.log("unknown device kind");
        }
    });
}

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    console.log('enumerateDevices is not supported!');
} else {
    navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then(GetStream)
    .then(GetDevices)
    .catch(HandleError);
}

        実行後の効果は以下の通りで、全てのオーディオ入力デバイス、ビデオ入力デバイス、オーディオ出力デバイスを見ることができます。

おすすめ

転載: blog.csdn.net/weixin_38102771/article/details/123611980