webrtc获取设备音视频源代码

最新推荐文章于 2023-10-26 10:41:05 发布

拽拽就是我

最新推荐文章于 2023-10-26 10:41:05 发布

阅读量404

点赞数

分类专栏： webstorm前端学习之路文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_32355021/article/details/123967992

版权

webstorm前端学习之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在客户端JavaScript中使用WebRTC技术获取用户的音频输入、输出设备选项，并展示如何在HTML页面上展示这些选项。通过实例代码演示了如何在用户授权后，实现设备选择功能，便于后续音视频通信的配置。

摘要由CSDN通过智能技术生成

webrtc获取设备音视频

client.js源代码

"use strict"

var audioInputS = document.querySelector("select#audioInputSelect");
var audioOutputS = document.querySelector("select#audioOutputSelect");
var videoInputS = document.querySelector("select#videoInputSelect");

function start() {
    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
        console.log('getUserMedia is not supported!');
        return;
    }
    navigator.mediaDevices.enumerateDevices()
        .then(function(devicesInfo){
            devicesInfo.forEach(function(device){
                console.log((device.kind+":"+device.label+ ":" + device.deviceId))
                var option = document.createElement("option")
                option.text = device.label;
                option.value = device.deviceId;

                if (device.kind === "audioinput") {
                    audioInputS.appendChild(option);
                } else if(device.kind === "audiooutput") {
                    audioOutputS.appendChild(option);
                } else if (device.kind === "videoinput") {
                    videoInputS.appendChild(option);
                }

            });
        })
        .catch(handleErr);
}

function handleErr(err){
    console.log(err.name + ":" + err.message);
}
start();

index.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <label>音频输入设备</label>
        <select id = "audioInputSelect"></select>
    </div>
    <div>
        <label>音频输出设备</label>
        <select id = "audioOutputSelect"></select>
    </div>
    <div>
        <label>视频输入设备</label>
        <select id = "videoInputSelect"></select>
    </div>


    <script src = "./client.js"></script>

</body>
</html>

如果label标签没有任何显示，就使用getUserMedia使得浏览器获取权限，一次获取之后在浏览器设置里，把所有设备权限都改为允许，方便后续操作。

拽拽就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webrtc获取设备音视频源代码

webrtc获取设备音视频client.js源代码"use strict"var audioInputS = document.querySelector("select#audioInputSelect");var audioOutputS = document.querySelector("select#audioOutputSelect");var videoInputS = document.querySelector("select#videoInputSelect");funct
复制链接

扫一扫

专栏目录