首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Chrome 21+中使用getUserMedia捕获麦克风输入?

在Chrome 21+中使用getUserMedia捕获麦克风输入,需要遵循以下步骤:

  1. 检查浏览器是否支持getUserMedia API:
代码语言:javascript
复制
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // getUserMedia API 支持
} else {
  // 不支持 getUserMedia API
}
  1. 请求麦克风权限:
代码语言:javascript
复制
navigator.mediaDevices.getUserMedia({audio: true})
  .then(function(stream) {
    // 麦克风权限已授权
  })
  .catch(function(error) {
    // 麦克风权限被拒绝
  });
  1. 处理音频流:
代码语言:javascript
复制
navigator.mediaDevices.getUserMedia({audio: true})
  .then(function(stream) {
    // 创建音频上下文对象
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // 将音频流与音频上下文对象关联
    const source = audioContext.createMediaStreamSource(stream);

    // 创建音频分析器
    const analyser = audioContext.createAnalyser();

    // 将音频分析器与音频源关联
    source.connect(analyser);

    // 处理音频数据
    const frequencyData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(frequencyData);

    // 释放资源
    stream.getTracks().forEach(track => track.stop());
  })
  .catch(function(error) {
    // 麦克风权限被拒绝
  });

在这个示例中,我们使用了getUserMedia API来捕获麦克风输入,并使用音频上下文对象和音频分析器来处理音频数据。最后,我们释放了音频流的资源。

请注意,由于隐私和安全原因,getUserMedia API通常需要在HTTPS协议下运行。如果您在HTTP协议下尝试使用getUserMedia API,浏览器可能会阻止它。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

摆脱客户端?网页发起直播势在必行!

Chrome插件:由manifest.json和script.js组成。 manifest.json 填入一些基本数据。 backgroundscripts传入需执行的js文件。...通过chrome.runtime.sendMessage发送消息到Chrome插件调起屏幕共享。获取到streamId后,通过mediaDevices.getUserMedia得到stream。...Firefox 33之后可以直接通过使用mediaDevices.getUserMedia,指定约束对象mediaSource为screen、window、application来实现屏幕共享。...如果想节省开发成本,可以使用第三方SDK。下面简单介绍下使用声网SDK发起直播的流程。...Media access NotAllowedError: Permission denied; 若摄像头权限为询问,浏览器默认弹窗是否允许使用摄像头,允许后调用play()可看到摄像头捕获的画面。

2.9K61
  • 用getDisplayMedia实现在Chrome中共享屏幕

    It is relatively simple and promise-based like getUserMedia : W3C一直致力于标准化屏幕捕获API。...简单,基于承诺的管理,getUserMedia: Microsoft Edge 今年早些时候刚刚使用此API 提供了屏幕共享。...绝大多数用户都是通过内嵌安装进行安装的,因此可能会在2014年之前我们从未更新过Chrome浏览器商店的扩展屏幕截图。 现在,Chrome网上商店正在删除内联安装,本博文中所述。...我们的用户与我们的网站建立了现有的信任关系 - 通常我们可以传输他们的网络摄像头和麦克风使用这种建立的信任关系进行内联安装可以说比从Chrome网上应用店安装更安全。...调用此API通常会进入到与使用Firefox的 getUserMedia调用和 mediaSource 参数完全相同的位置。

    4.7K30

    媒体数据获取与播放

    API 介绍: MediaDevices: developer.mozilla.org/zh-CN/docs/…      这个 API 提供了如何访问媒体数据输入的设备, PC 电脑的摄像头、麦克风...MediaDevices.getUserMedia():      通过传入不同的约束提条件来获取到不同的媒体数据流,前提的用户授权使用的情况下。...使用到摄像头、麦克风时浏览器就会对用户提示并希望得到用户授权。...在获取 Mac 屏幕/窗口进行屏幕共享的时候需要在 Mac 的【偏好设置】=>【安全与隐私】=>【隐私】=>【屏幕录制】勾选允许Chrome。...得到媒体流: const stream = await navigator.mediaDevices.getUserMedia(constraints); 复制代码 通过媒体流得到设备的信息,设备名称

    96220

    Zoom的Web客户端与WebRTC有何不同?

    打开chrome://webrtc-internals显示只有getUserMedia用于访问相机和麦克风,但是没有像WebRTC那样调用RTCPeerConnection。...因此,让我们在Chrome运行这种非常有趣的环境下快速查看这些“优秀特性”。...它使用WebSocket传输媒体,这当然不是最佳选择。类似于WebRTC的Turn/TCP——它会影响传输质量,并且在很多情况下都不能很好地工作。...另一方面,WebAudio通过getUserMedia调用捕获媒体数据,发送给WebAssembly编码器编码,然后通过WebSocket传输。...将解码器与画布连接,WebAudio用于”布局” 将编码器和getUserMedia连接用于输入 将编码后的数据通过不可靠的信道发送 以某种方式连接RTCDataChannel反馈度量和音频/视频编码器

    1.8K20

    Electron音视频相关

    (HECATE G30 GAMING HEADSET) (2d99:0026)" } 其中kind有以下几种类型 videoinput 视频输入 (摄像头) audioinput 音频输入 (麦克风...) audiooutput 音频输出 (扬声器) 其中deviceId是设备的id,有以下几种值 default 默认的设备(只有一个) communications 通讯的设备(只有一个) id...设备的id 会和前面的默认设备重复 其中groupId代表同一个设备 比如我的耳机既能听声音又有麦克风,那么获取到的音频输入和音频输出设备的groupId就会是一样的。...,应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。...}, }, }, handleStream, handleError ) Electron获取窗口的流 下面的示例演示如何从标题为 Electron 的桌面窗口捕获视频

    2.4K30

    Safari上使用WebRTC指南

    特别是,最好避免使用传统的addStream API,这使得操作流的轨道变得更加困难。...这对于视频通话的常见用例来说是个好消息,因为您很可能已经获得用户使用麦克风/摄像头的许可,这符合第一条规则。请注意,这些规则与MacOS和iOS的基本自动播放规则一起使用,因此也很好地了解它们。...Apple的WebRTC实现仅允许一次捕获一个getUserMedia 如果您的应用程序从多个“getUserMedia()”请求获取媒体流,则可能会出现iOS问题。...用户选择的设备的标签 对于最终将“deviceId”传递给“getUserMedia()”的任何代码工作流: 尝试使用保存的“deviceId” 如果失败,请再次枚举设备,并尝试 从保存的设备标签查找...在我的测试,许多(但不是全部)Android手机都采用硬件H.264编码,但那些缺少硬件编码的手机在Chrome不能用于Android。

    3.2K20

    如何使用JavaScript访问设备摄像头(前后)

    如何使用相机 API 要访问用户的相机(或麦克风),我们使用 JavaScript MediaStream API。该 API 允许通过流访问这些设备捕获的视频和音频。...捕获视频流 要捕获由摄像机生成的视频流,我们使用 mediaDevices 对象的 getUserMedia 方法。这个方法接收一个对象,其中包含我们要请求的媒体类型(视频或音频)和一些要求。...访问手机的前后摄像头 默认情况下,getUserMedia使用系统默认的视频录制设备。如果是有两个摄像头的手机,它使用前置摄像头。...videoStream.getTracks().forEach((track) => { track.stop(); }); 截屏 你可以做的另一件很酷的事情是捕获视频的图像(屏幕快照)。...PC 手机 QQ 浏览效果: ? 手机QQ浏览效果

    10.6K61

    H5利用JS调用电脑摄像头实现拍照效果

    该方法提示用户允许使用媒体输入,产生包含所请求类型的媒体轨道。...包括视频轨道(由诸如照相机,视频记录设备,屏幕共享服务等的硬件或虚拟视频源产生),音频轨道(类似地,由物理或虚拟音频源,麦克风,A / D转换器等),以及其他可能的轨道类型。...Image();         //设置属性和src         img.id = "imgBoxxx";         img.src = image;         //将图片添加到页面...如果没有,则会导致调用 getUserMedia() 错误。 出于隐私原因无法访问有关用户摄像头和麦克风的信息,不过应用程序可以使用其他约束来请求所需的摄像头和麦克风功能。...因为即使用户尚未授予使用底层设备的权限,也可能发生此错误,因此可能会将其用作指纹表面。 SecurityError Document在getUserMedia()被调用的对象上禁用用户媒体支持。

    9.5K41

    Web前端WebRTC攻略(二) 音视频设备及数据采集

    和帧率相同,分辨率越高越清晰,但在直播占用的宽带越多。因此分辨率应该根据网络情况进行动态调整。 麦克风 用于采集音频数据。...“轨”在多媒体中表达的就是每条轨数据都是独立的,不会与其他轨相交, MP4 的音频轨、视频轨,它们在 MP4 文件是被分别存储的。 流(Stream) 可以理解为容器。...二、音视频采集 getUserMedia getUserMedia 方法在浏览器访问音视频设备非常简单。...通过 getUserMedia 采集到的媒体流,可以在本地直接播放使用。...); 三、音视频设备 MediaDevices 接口提供了访问(连接到计算机上的)媒体设备(摄像头、麦克风)以及屏幕分享的方法。

    3.4K10

    实时音视频 TRTC 常见问题汇总---WebRTC篇

    Web 端 SDK 在使用的过程拔掉摄像头,怎么清除摄像头列表里面的数据?...Web 端如何在屏幕分享的时候采集系统声音?...点击查看教程,采集系统声音只支持 Chrome M74+ ,在 Windows 和 Chrome OS 上,可以捕获整个系统的音频,在 Linux 和 Mac 上,只能捕获选项卡的音频。...其它 Chrome 版本、其它系统、其它浏览器均不支持。 Web 端如何切换摄像头和麦克风? 点击查看教程,您可以先获取到系统的摄像头和麦克风设备后,调用 switchDevice 来进行切换。...技术支持 亲爱的开发者,如果在使用产品过程遇到任何问题,欢迎到 云+社区 和 GitHub 提问或者查询历史问题以及解决方案。

    22.6K108

    uni-app实战案例:实现H5页面麦克风权限获取与录音功能

    在这个过程,技术上的难点主要集中在如何通过浏览器获取麦克风权限,以及如何处理麦克风接收到的音频流。...在这篇文章,我将带你一步步实现这一功能,并探讨如何使用uni-app开发H5页面获取麦克风权限并进行录音。...技术背景与需求分析在浏览器环境,获取麦克风权限并进行录音通常需要依赖Web API的navigator.mediaDevices.getUserMedia和MediaRecorder接口。...这两种方式最终的目的都是为了将音频数据传递到服务器进行处理,语音识别(TTS)等。...这段配置代码是用于向用户请求麦克风权限,确保应用在运行时可以访问设备的音频输入

    1.6K10

    H5录制视频、音频(WebRTC)

    使用Navigator.getUserMedia可以做到在主流浏览器获取用户摄像头数据,麦克风数据,我研究了一下,发现在ios、安卓微信浏览器中都不行。...而在安卓6.0.1自带浏览器可以,iOS Safari不支持,mac Safari不支持,兼容性还是太差,所以还是弃用了。但是我研究的结果还是保存一下,万一以后微信浏览器支持了呢?...应该也只支持这两种了,我看了MDN和W3c,都没发现第三种 以下把video参数写成object格式的,在chrome中都会报错Uncaught TypeError: Failed to execute...,然而这些用法真的是MDN和W3C标准,不知道chrome为什么不支持。...然而在chrome中有特殊的使用后置摄像头的方法,参考:http://blog.csdn.net/journey191/article/details/40744015,这个参考里的方法我测过,安卓6.0.1

    5.2K40

    WebRTC 之媒体流与轨道

    当开始采集音频或视频设备后就会源源不断的产生媒体数据(媒体流),比如从摄像头,画布,桌面捕获到的视频流,从麦克风捕获到的音频流。只有当我们不停的接收到媒体流才能看到视频和听到音乐。...在实际应用场景这些媒体流将由更多种数据组成,WebRTC 将其划分成了多个轨道,我们可以得到不同轨道对应的设备信息,也可以对其进行控制,麦克风静音或网络不优秀的时候关掉视频。...Video 对象播放的媒体流,通过传入更大的帧率得到更清晰流畅的画面,也需要更高的宽带支持 Canvas.captureStream fps 帧率 捕获 Canvas 的媒体数据,可以动态的播放画布的数据...摄像头:捕获用户设备中所支持的摄像头硬件设备; 麦克风捕获用户设备中所支持的麦克风硬件设备; 计算机屏幕,窗口:捕获用户计算机屏幕、窗口等; Canvas:捕获在 Canvas 的内容; 视频源 Video...:捕获 Video 播放中视频的内容; 远端流:使用对等连接来接收新的流。

    1.1K10

    Web Audio API 介绍和 web 音频应用案例分析

    麦克风)stream音频输出 BufferSource是指通过xhr获取服务器音频输出 不同的音频源输出有不同的应用场景或处理方式,StreamAudioSource可以用来音频录音,BufferSource...Web Audio API应用案例分析 web音频录音和实时回放 思路:首先创建一个stream源节点,通过navigator.getUserMedia获取麦克风音频stream,然后再连接到ScriptProcessorNode...://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API 具体实现过程 1 获取麦克风 2 使用MediaRecorder...Api进行录音 MediaRecorder可以读取到navigator.getUserMedia输入的音频数据,并提供了接口进行数据存取。...3 录音过程采用ScriptProcessor实现音频实时回放 在navigator.getUserMedia录音过程,将MediaStreamSource源连接到ScriptProcessor进行处理

    7K10

    JavaScript 是如何工作的:WebRTC 和对等网络的机制!

    WebRTC APIs MediaStream —  MediaStream用来表示一个媒体数据流,允许你访问输入设备,麦克风和 Web摄像机,该 API 允许从其中任意一个获取媒体流。...MediaStream (别名getUserMedia) MediaStream API 代表媒体流的同步。比如,从摄像头和麦克风获取的媒体流具有同步视频和音频轨道。...MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。...getUserMedia() 在打开任何媒体收集输入(网络摄像头或麦克风)之前,必须始终获得用户许可。...浏览器需要显示一个指示器,该指示器显示正在使用的摄像机或麦克风,超出可能存在的任何硬件指示器。

    2.3K40

    实时音视频入门学习:开源工程WebRTC的技术原理和使用浅析

    2012年1月:谷歌已经把这款软件集成到Chrome浏览器,Opera初步集成WebRTC。 2013年 6月:Mozilla Firefox[5]发布22.0版本正式集成及支持WebRTC。...7.6 多对多的建立 多对多建立点到点连接概念图,以三个用户点对点的连接为例: 7.7 WebRTC的主要JavaScrip接口 getUserMedia():访问数据流,例如来自用户的相机和麦克风...error: ', error); } //利用摄像头捕获多媒体流 navigator.mediaDevices.getUserMedia(constraints).   ...8.1 设计框架 多人视频基本框架图: 8.2 关键代码 8.2.1)媒体捕获: 获取浏览器视频权限,捕获本地视频媒体流,在Video元素附加媒体流,显示本地视频结果。代码如下。...由于安卓设备厂商众多,每个厂商都会在标准的安卓框架上进行定制化,导致很多可用性问题(访问麦克风失败)和质量问题(回声、啸叫)。 5)对Native开发支持不够。

    1.7K30
    领券