WebRTC媒体权限申请getUserMedia实例详解
作者：时光足迹
媒体权限申请
本文主要介绍了 getUserMedia 媒体权限申请的通用用法，包含权限申请配置、成功时媒体流预览及销毁处理、失败时的通用提示处理等等
getUserMedia() 方法是用来申请麦克风和摄像头的使用权限的。该方法存在兼容性问题，需要单独处理，如下是比较通用的处理方式：
// 申请媒体权限的兼容性写法
function getUserMedia(constrains, success) {
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
const getUserMedia =
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(
new Error("浏览器不支持访问用户媒体设备，请升级或更换浏览器")
);
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};
}
navigator.mediaDevices
// 参数配置
.getUserMedia(constrains)
// 成功回调 暴露出去
.then(success)
// 失败回调 待通用处理
.catch(mediaErrorCaptured);
}
媒体流预览与停止
getUserMedia()方法的返回是一个 promise 对象，成功后会 resolve 一个 MediaStream 媒体流对象，包含了请求的媒体类型的轨道，如视频轨道、音频轨道。
一般我们会将返回的 MediaStream 媒体流赋值到 video 元素上，就可以实现视频流的预览了。
如下所示，同时申请了摄像头和麦克风权限，当然，可以更改配置，单独申请麦克风或者摄像头权限
getUserMedia(
{
// 需要摄像头权限，优先使用前置摄像头 environment-后置摄像头
video: { facingMode: "user" },
// 需要麦克风权限，false则不需要
audio: true,
},
// 成功的回调处理
(stream) => {
// 将流数据存起来，之后停止流时需要
localStream = stream;
// 流展示到video标签中
localVideo.current.srcObject = stream;
// 触发播放：当然这个也是存在兼容性问题的
// 注意：有时候因为浏览器的安全限制，是需要与用户进行交互才能自动播放的
localVideo.current.play();
}
);
如下为 MediaStream 媒体流对象的打印展示，以及获取音频轨道(getAudioTracks)、获取视频轨道 getVideoTracks、获取所有轨道(getTracks)等方法的打印结果展示。
注意：MediaStream 的 active 为 true 时，才能正常的预览展示；为 false 时不能正常加载到 video 元素上
一般预览成功后，在页面销毁之前，需要进行关闭数据及清空流的操作
// 方式一：获取对应的轨道数据，进行清空操作
localStream.getAudioTracks()[0].stop();
localStream.getVideoTracks()[0].stop();
localVideo.current.srcObject = null;
// 方式二：遍历操作，关闭媒体轨道
localStream.getTracks().forEach((stream: MediaStreamTrack) => {
stream.stop();
});
媒体申请拒绝处理
如果用户拒绝了媒体的使用权限申请，则会 reject 回调一个错误对象。
因为错误处理是很通用的，所以直接可以通过一个通用函数进行处理，提高代码的复用性。
function mediaErrorCaptured(error) {
console.log("错误信息name打印", error?.name);
console.log("错误信息message打印", error?.message);
// 媒体权限失败处理（通用 详细）
const nameMap = {
AbortError: "操作中止",
NotAllowedError: "打开设备权限不足，原因是用户拒绝了媒体访问请求",
NotFoundError: "找不到满足条件的设备",
NotReadableError:
"系统上某个硬件、浏览器或网页层面发生的错误导致设备无法被访问",
OverConstrainedError: "指定的要求无法被设备满足",
SecurityError: "安全错误，使用设备媒体被禁止",
TypeError: "类型错误",
NotSupportedError: "不支持的操作",
NetworkError: "网络错误发生",
TimeoutError: "操作超时",
UnknownError: "因未知的瞬态的原因使操作失败)",
ConstraintError: "条件没满足而导致事件失败的异常操作",
};
// 媒体权限失败处理（通用 简单）
const messageMap = {
"permission denied": "麦克风、摄像头权限未开启，请检查后重试",
"requested device not found": "未检测到摄像头",
"could not start video source": "无法访问到摄像头",
};
let nameErrorMsg = nameMap[error.name];
if (!nameErrorMsg) {
nameErrorMsg = messageMap[error.message.toLowerCase() || "未知错误"];
}
// todo
alert(nameErrorMsg);
}
当然，IOS 和 Android 的权限拒绝报错中 message 可能会不一样，但是 name 相同，可以结合二者进行判断
if (
error.message.toLowerCase() === "permission denied" ||
error.name == "NotAllowedError"
) {
console.log(`麦克风、摄像头权限未开启，请检查权限`);
}
参考文档：MediaDevices.getUserMedia()
以上就是WebRTC媒体权限申请getUserMedia实例详解的详细内容，更多关于WebRTC getUserMedia的资料请关注脚本之家其它相关文章！