前端基础（三十六）：读取本地音视频设备并进行播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端基础（三十六）：读取本地音视频设备并进行播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果

前端基础（三十六）：读取本地音视频设备并进行播放,前端基础,前端,音视频

navigator.mediaDevices.enumerateDevices

请求媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等

navigator.mediaDevices.getUserMedia

会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型文章来源地址https://www.toymoban.com/news/detail-556060.html

源码

<div id="app">
    <select id="audio-select">
        <option value="">请选择</option>
    </select>
    <select id="video-select">
        <option value="">请选择</option>
    </select>
    <video id="video" autoplay controls></video>
</div>

<script>
    window.onload = function () {
        const audioSelect = document.getElementById('audio-select');
        const videoSelect = document.getElementById('video-select');
        const video = document.getElementById('video');

        // 获取全部设备
        navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                devices.forEach(device => {
                    let option = document.createElement('option');
                    option.value = JSON.stringify(device);
                    option.innerText = device.label;
                    switch (device.kind) {
                        case 'audioinput':
                        case 'audiooutput':
                            audioSelect.appendChild(option);
                            break;
                        case 'videoinput':
                            videoSelect.appendChild(option);
                            break;
                    }
                });
            })

        function videoChange(device) {
            if (!device) return;
            // 播放音视频
            navigator.mediaDevices.getUserMedia({ audio: audioSelect.value ? JSON.parse(audioSelect.value) : false, video: device })
                .then(stream => {
                    video.srcObject = stream;
                })
        }

        videoSelect.onchange = function (e) { videoChange(JSON.parse(e.target.value)) }
    }
</script>