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

发布于：2025-04-19 ⋅ 阅读:(23) ⋅ 点赞:(0)

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

📊写在前面

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

🏡前提条件

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

  • 硬件设备

    • 麦克风：想要录音、获取音频数据，就一定要有音频采集设备 如 麦克风，而且要保证能正常使用。
    • 摄像头：想要画面、获取视频数据，就一定要有视频采集设备 如 摄像头，而且要保证能正常使用。

  • 协议要求

    • 由于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应用程序开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。

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

在用户通过提示受权允许的情况下，打开电脑上的相机、麦克风、屏幕共享等采集设备，并提供 MediaStream 包含多媒体如：视频轨道或音频轨道的输入。

MediaStream 接口是一个媒体内容的流.。一个流包含几个轨道，比如视频和音频轨道。

🚀实际案例

📚实例代码

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

使用navigator.mediaDevices.enumerateDevices() API 获取当前可用的多媒体设备情况！

// 查看当前可用的媒体设备
function getMediaDevices() {
   
    try {
   
        navigator.mediaDevices.enumerateDevices().then(function (devices) {
   
            devices.forEach(function (device) {
   
                switch (device?.kind) {
   
                    case 'audioinput':
                        console.log('音频输入设备(麦克风|话筒)：'

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布