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

电玩女神 2024-03-17 17:26 31阅读 0赞

### 效果 ###

![在这里插入图片描述][31cf44c1ecd8449f8b0d318455d84734.png_pic_center]

### `navigator.mediaDevices.enumerateDevices` ###

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

### `navigator.mediaDevices.getUserMedia` ###

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

### 源码 ###

<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>

[31cf44c1ecd8449f8b0d318455d84734.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/62590d3deba349e3bd2e05f2e904cf6d.png