WebRTC获取设备信息
一、概述
1.新建一个Https服务端(Node,tomcat),看自己喜好。我这里用的NodeJs
2.因为现在大多数浏览器已经支持了WebRTC(如果不支持,直接用Chrome),所以WebRTC的js包不需要导入,直接使用即可。
3.在使用Chrome浏览器的时候要用https服务(也就是打开网页的链接要是https形式的),不然获取不到设备信息。
4.我再本案例中用的是,nodejs服务+openssl自己弄了一个本地的https服务。
5.由于是台式电脑,我让手机和电脑在一个局域网,用pc开发用手机浏览器测试。
6.到此,环境描述就介绍完了。下面看看示例代码
二、示例代码
1.网页端代码
"UTF-8">WebRTC获取设备信息测试 //引入是为了多浏览器适配<select id="audioSource">select><select id="audioOutput">select><select id="videoSource">select>
2.网页端js代码
//这种方式只有在chrome浏览器上有效,以内各个浏览器获取音视频权限的内部实现都不一样,所以这种方式在Safari和Firefox浏览器看不到设备名称 ‘use strict‘ var audioSource = document.querySelector("select#audioSource"); var audioOutput = document.querySelector("select#audioOutput"); var videoSource = document.querySelector("select#videoSource"); if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log("不支持获取设备信息"); } else { var ePromise = navigator.mediaDevices.enumerateDevices(); ePromise.then(getMediaInfoSuccess).catch(getMediaInfoFail); } /** * 获取媒体信息成功 */ function getMediaInfoSuccess(deviceInfos) { deviceInfos.forEach(function (deviceInfo) { console.log("设备种类:" + deviceInfo.kind); console.log("设备名称:" + deviceInfo.label); console.log("设备Id:" + deviceInfo.deviceId); console.log("groupId:" + deviceInfo.groupId); var option = document.createElement("option"); option.text = deviceInfo.label;//deviceInfo.label有可能会获取不到 option.value = deviceInfo.deviceId; if (deviceInfo.kind === "audioinput") { option.text = "音频输入设备"; audioSource.appendChild(option); } else if (deviceInfo.kind === "audiooutput") { option.text = "音频输出设备"; audioOutput.appendChild(option); } else if (deviceInfo.kind === "videoinput") { option.text = "视频输入设备"; videoSource.appendChild(option); } }); } /** * 获取媒体信息失败 */ function getMediaInfoFail(err) { console.log(err.name + "|" + err.message); }
3.服务端(可自行设计,什么形式的都行,只要支持https协议即可)
原文:https://www.cnblogs.com/tony-yang-flutter/p/14870043.html