Web前端JS通过getUserMedia API 获取麦克风、摄像头(相机) 音视频等多媒体数据（语音、录音、相机、视频对话、流媒体）

本文主要是介绍Web前端JS通过getUserMedia API 获取麦克风、摄像头(相机) 音视频等多媒体数据（语音、录音、相机、视频对话、流媒体），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

@[TOC](🪟Web前端JS通过getUserMedia API 获取麦克风、摄像头(相机) 音视频等多媒体数据（语音、录音、相机、视频对话、流媒体)

📊写在前面

随着人工智能的逐渐普及和广泛应用，不仅提高了设备的智能化水平，还为我们的日常生活带来了便利和新的可能，在各个应用领域中，通过多媒体设备如：麦克风、摄像头等极大地丰富了我们的日常生活。随着技术的不断进步，未来将在更多领域如：智能家居、健康医疗、教育娱乐等发挥了很大的作用，也进一步提升生活和工作质量。

🏡前提条件

想要在Web浏览器（无论是PC端浏览器，还是移动端浏览器）中，获取麦克风、摄像头的音视频数据需要满以下3个基本条件：

硬件设备
- 麦克风：想要录音、获取音频数据，就一定要有音频采集设备如麦克风，而且要保证能正常使用。
- 摄像头：想要画面、获取视频数据，就一定要有视频采集设备如摄像头，而且要保证能正常使用。
协议要求
- 由于Web安全策略为了保证安全，要求Web浏览器必须在HTTPS通信协议下，才允许使用getUserMedia API访问多媒体设备（如果是在本地开发环境 localhost 中是能正常访问的，但要在生产环境中使用必须是HTTPS才行）。
接口支持
- 在Web浏览器中获取音频、视频数据一般都是调用 getUserMedia API来获取数据的。所以Web浏览器本身得支持这个API，但这点不用担心，因为到目前为止，几乎所有的Web浏览器都支持 getUserMedia API 这个接口。
用户权限
- 在满足以上两个必要条件以后，为了安全起见，在Web浏览器中通过程序代码来调用 getUserMedia API 之前还得用户的许可受权后才能调用。

🖼️API简介

在HTML5中提供了 navigator.mediaDevices.getUserMedia API为用户提供访问硬件设备媒体（音频、相机、地理位置）的等多媒体访问接口，基于这个接口，Web应用程序开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。

📚实例代码

Web前端JS通过getUserMedia API 获取麦克风、摄像头的音视频数据流，具体代码下如：

获取当前可用的多摄媒体设备情况

function getMediaDevices() {if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {return console.log("不支持 enumerateDevices()， ");}navigator.mediaDevices.enumerateDevices().then(function (devices) {devices.forEach(function (device) {console.log('当前可用的媒体设备如下: ', device);console.log(device.kind + ": " + device.label + " id = " + device.deviceId);});}).catch(function (err) {console.error(err.name + ": " + err.message);});
};
getMediaDevices();

获取麦克风、摄像头(相机) 音视频多媒体数据

function getUserMedia() {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({audio: true, // 获取音频video: false,	// 获取视频 默认video: { facingMode: 'user' } }前置相机/* video: {   width: 1280, // 设置摄像头分辨率height: 720, facingMode: { exact: 'environment' } // 获取视频 后置相机} */}).then((stream) => {console.log('音视频数据：', stream);}).catch((err) => {console.error('new API：多媒体数据获取失败！(请检查媒体硬件设备是否正常、浏览器是否开启媒体设备访问权限)', err);});} else if (navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) {// 兼容 getUserMedia API的旧版本navigator.getUserMedia({audio: true, // 获取音频video: true, // 获取视频}, (stream) => {console.log('音视频数据：', stream);}, (err) => {console.error('old API：多媒体数据获取失败！(请检查媒体硬件设备是否正常、浏览器是否开启媒体设备访问权限)', err);});} else {if (0 > location.origin.indexOf('https://')) {console.error("提示：请尝试在本地localhost域名 或 https协议下重新运行！");} else {console.error("未识别到多媒体设备！");}}
}
getUserMedia();

📢常见问题

当我们兴高采烈的完成以上各个环节后，在Web浏览器打开试着运行一下代码功能，可能会出现以下报错信息，特别是涉及到用户隐私、安全等方面的操作，需要得到用户的受权许可、开启浏览器相关配置才能正常使用。
比如：在访问麦克风、摄像头的时候，如果多媒体设备在当前环境中不可用、未连接等情况时，会在Web浏览器控制台中显示相关的报错信息！
报错信息1：

DOMException: Requested device not found

根据错误信息提示：DOMException: Requested device not found 表示找不到请求的设备！

解决方案：

检查用户是否给予了网站访问媒体设备的权限。
确认用户的设备上确实有可用的媒体设备。
检查浏览器是否有任何插件或扩展阻止了媒体设备的访问。
如果是在开发环境中，确保你的开发服务器正确配置，并且在生产环境中部署时，所有设备设置和权限都已正确配置。
如果是编程错误，请检查代码中的媒体设备访问代码，确保正确处理设备未找到的情况，可能需要引导用户选择正确的设备，或者提供备选

报错信息2：

Uncaught TypeError: navigator.mediaDevices is undefined
Uncaught TypeError: Cannot read property 'getUserMedia' of undefined
Uncaught TypeError: Cannot read properties of undefined (reading 'enumerateDevices')

根据错误信息提示：Uncaught TypeError: navigator.mediaDevices is undefined 表示navigator.mediaDevices API不存在或未定义。
出现以上报错信息：基本都是访问和运行环境或通信协议的问题

直接以 file文件的形式在Web浏览器中打开有调用媒体设备getUserMedia API 代码的xxx.html文件
在非https协议的Web服务环境下调用媒体设备getUserMedia API

解决方案：

如果是在本地开发环境，可以使用 live-serve、http-server、phpstudy 等工具，启动一个本地Web服务在 localhost 或 127.0.0.1 域名、IP中访问和运行。
如果是已发布在生产环境，就给域名添加https安全证书，将http通信协议改为https通信协议就可以啦。