Electron实现麦克风声音、系统扬声器声音、桌面视频混合录制

已于 2022-06-16 11:45:34 修改
阅读量2.7k 收藏 4
点赞数 2
分类专栏： Electron高级 文章标签： 音视频 electron javascript
于 2022-06-16 00:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuzehn/article/details/125305877
版权
本文介绍了如何在Electron中使用MediaRecorder录制麦克风声音、系统扬声器声音及桌面视频。由于MediaRecorder不支持多音轨录制，作者通过混音解决此问题，详细阐述了采集麦克风音频、获取桌面媒体流以及混音的实现步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

功能需求

基础技术方案

吐血的试错过程

发现玄机

改进方案

一、采集本地麦克风的声音

二、获取麦克风音频轨

三、获取桌面媒体流

四、对麦克风和扬声器进行混音

结论

《Electron高级》系列-总览_Data-Mining的博客-优快云博客_electron 系列目录案例一案例二案例三【导读】欢迎大家阅读《Electron高级》技术专栏，本专栏结合Electron底层源码和工作原理介绍了一些项目中比较常见的突出问题和案例。 其中，每个案例从不同角度都提出了尽可能多的解决方案，文笔流畅，内容充实，且不乏趣味性。欢迎大家订阅分享，评论留言+点赞关注！案例一Electron解决闪屏问题的完美方案及其探索过程（上）Electron解决闪屏问题的完美方案及其探索过程（下）案例二深入浅出解决Electron窗口置顶失效的...

了解本专栏 订阅专栏 解锁全文
Electron常见问题 65 - Electron 如何操作本地的音视频设备
liuzhen007的专栏
04-08 1546
之前的文章中提到过，安卓等移动端APP在采集音视频数据时，需要打开本地摄像头和麦克风设备。同理，桌面端应用程序在采集音视频数据时也需要依赖本地的音视频设备，今天本文的主要内容就是讨论Electron是如何操作本地的麦克风和摄像头以及如何控制麦克风和摄像头采集音视频数据。《Electron实战》系列-总览。
Electron客户端实现本地录制功能详解【附代码】
liuzhen007的专栏
03-17 4912
话不多说，直接上干货 Electron作为桌面端的跨平台开源框架，可以比较容易的实现本地录制功能。这里有小伙伴可能会问：什么是本地录制？为什么要实现本地录制功能？是的，本地录制功能和特定的使用场景相关联，特别音视频相关的产品，比如视频会议、线上教学等使用场景都会用到本地录制功能。本地录制其实就是将本地的视频画面保存下来，方便以后回放查看。 ...
利用WebAudioAPI在electron+vue项目中实现录音功能.zip
10-21
利用WebAudioAPI在electron+vue项目中实现录音功能.zip
electron中使用ffi-napi和ref-napi调用讯飞语音唤醒
最新发布
weixin_57769558的博客
02-20 432
新项目要求做一个语音机器人，类似于小爱同学的桌面端；我的任务是做一个简单的demo调研一下语音唤醒是否可以使用；当时做了两版；
electron+vue实现录音功能（linux-Ubuntu系统也可以使用）Web-audio
浩星
08-18 3435
前言： 在使用electron的过程中，因为业务需要配置录音的功能，但是之前找的 js-audio-recorder 在实际使用中不生效，所以在重新研究查找资料，自己解决报错，修改源码后，终于实现该功能，在这里将自己的资料整理一份。 ***注意：这个只能在electron运行，谷歌浏览器是不可以的，点击停止录音的时候会报错： 实现效果图：（electron运行出来的，不是谷歌浏览器） 经过比较，是这里拿的的数据不一样，谷歌是 / , 在electron上是一个本地路径 ...
web (h5) 和 Electron 实现录音软件
creen027的博客
11-05 1297
Electron和React的协同Electron是一个基于Chromium和Node.js的开发框架，用于构建跨平台的桌面应用程序。通过与React的结合，可以轻松实现复杂的用户界面和交互体验，既能满足用户需求，又能提高开发效率。因此，将Electron和React应用于录音软件的开发中，能够为用户提供更好的体验，并且从开发者角度来看，更加便捷和高效。WebRTC技术的应用WebRTC是一项用于浏览器之间实时通信的开放性标准，它提供了音频、视频和数据传输的能力，适用于广泛的应用场景。
js录制系统/麦克风声音（基于electron）
facing-screen's blog
11-15 9210
最近想用electron写一个和音视频相关的软件，尽管在写之前都想好了要用哪些技术，但依然写得很艰难，今天对相关知识的个人理解做个记录和整理。 先看几个浏览器api 1、AudioContext构造器 AudioContext接口表示由音频模块连接而成的音频处理上下文；它可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为......
Electron-vue中通过WebAudioApi实现录音功能，并转换为mp3格式，实时监测音频设备变化...
weixin_30752377的博客
09-02 1167
实现以下功能： 1、检测当前音频环境，是否支持录音（WebAudio Api）； 2、获取输入、输出设备列表，获取电脑默认的音频设备； 3、试音功能，通过分析录音样本数据，判断是否录到声音； 4、实时监听录音过程，根据样本片段展示录音音波； 5、实时监听音频设备变化，有设备插入或拔出时给出相应反馈； 6、生成wav文件； 7、支持转换为mp3格式，由于是同步转换，所有...
electron端实现录音播放功能
lbn2676043895的博客
05-10 4175
js-audio-recorder，引用此控件实现录音功能，主要api在npm官网上有所描述 贴上实现效果源码： html代码： <audio controls autoplay></audio> <input @click="startRecording" type="button" value="录音"> <input @click="sto...
C#麦克风录音组件与播放源码
热门推荐
zhuweisky
07-10 2万+
在网络聊天系统中，实现麦克风录音与播放，是最基础的模块之一。本文我们就介绍如何快速地实现这个基础模块。
基于Electron框架，零代码实现BS系统转为桌面应用系统的解决方案
10-05
实现对现有BS架构的系统转换，可升级为桌面应用系统，适用于企业级信息管理系统，APP管理后台，小程序管理后台，SAAS应用系统及管理后台，提升用户体验。 基于Electron的框架开发，能够满足在MacOS、Windows、Linux...
soundmachine-ElectronJS:声音机器-使用Electron JS的桌面应用程序
05-13
声机-ElectronJS ========================= 使用Electron JS的Sound Machine桌面应用程序 使用Electron，我们可以轻松地使用Web技术创建桌面应用程序。 我们可以轻松地将任何MVC框架（Backbone，Angular，Ember）与其集成，并开发桌面应用程序。 我们甚至可以轻松地为OS（包括Mac，Windows和Linux）创建软件包。 安装 首先，请确保您已安装Node和Npm。 访问nodejs.org以安装节点和NPM 克隆项目并转到soundmachine-ElectronJS目录并运行以下命令： $ npm install -------> To install dev-dependencies 要运行该应用程序，请运行以下命令： $ npm start
基于Electron的UI框架，提供国产操作系统桌面应用升级替换方案
10-05
系统是基于Electron框架开发，可实现在MacOS、Windows、Linux跨平台上运行的桌面客户端框架，业务功能的实现还是基于Web页面，适用于企业级信息管理系统，APP管理后台，小程序管理后台，SAAS应用系统及管理后台。...
如何抓取扬声器的声音
weixin_34348111的博客
07-05 2151
工作中有个需求是关于抓取扬声器的声音， 为什么会有这个需求？ 试想我们在共享远程桌面时，如果能够把本地桌面应用程序的声音也一起发给对方，然后播放出来， 用户体验该是多么棒。 在考虑如何实现这个需求前，我们先讨论下电脑声音的三种模式： 1) render模式 该方式实际上就是播放(output)声音，常见的API如PlaySound, WaveOutXXX， DirectSound...
electron录制屏幕+声音并保存在本地
rongyi2233的博客
06-05 6588
const electron = require('electron'); const { desktopCapturer } = require('electron'); const fs=require("fs"); let source; /*获取当前屏幕和应用窗口源信息*/ desktopCapturer.getSources({ types: ['window', 'screen'] }, (error, sources) => { if(error) throw error; c.
Electron + react 实现录音分段播放
l371545670的博客
05-14 399
到这里基本就可以放 网上搜的 可以直接用 sourceNode 再 链接 设备 可以直接放 但是api 配合样式比较复杂 想着是否可以 直接把这个资源给audio 标签帮我播放 我直接用 audio 标签的api。需求：整体需求 做一个录音组件，可以录音，可以播放完整录音(我的活)，可以针对某个问题进行标记(我的活)，可以播放标记录音(我的活)两种方案 1.使用webaudio API 合并 一个音频 2.通过数据seek 到一个播放器的多个不同位置播放。4.AudioBuffer 转 Blob。
在electron中获取麦克风和相机权限
liuqinrui520的博客
03-13 1852
在 macOS 系统中，应用程序需要获得用户的明确授权才能使用麦克风或相机权限。本文介绍如何在Electron中去获取macOS的相关权限。
Python写了个用线程同时录制系统音频和麦克风输入的代码，运行时有时候可以正常执行，有时候就报错，请问原因？
m0_67112014的博客
04-30 730
Python写了个用线程同时录制系统音频和麦克风输入的代码，运行时有时候可以正常执行，有时候就报错，请问原因？
Electron mac申请麦克风/摄像头权限，Electron无法打开麦克风
果冻
05-18 2315
在渲染进程中发送消息给注进程，让他申请麦克风或者摄像头权限。
electron 麦克风和系统声音
09-05
对于 Electron 应用程序来说，要实现麦克风和系统声音的捕获和播放，可以使用一些第三方库来辅助实现。 对于麦克风的捕获，可以使用 `node-record-lpcm16` 这个 Node.js 模块。它允许你在 Electron 应用程序中录制音频并将其保存为 PCM 格式。你需要安装该模块并按照其文档来使用。 对于系统声音的捕获，你可以使用 `electron-audio-device` 这个 Electron 扩展。它提供了 API 来获取系统当前的音频设备列表，以及监视设备的更改。你可以使用这个扩展来获取系统声音的输入流。 至于播放麦克风和系统声音，你可以使用 Electron 内置的 `webContents` API 来创建一个隐藏的 BrowserWindow，并在其中播放音频。你可以通过设置正确的音频输入源来实现播放麦克风音频，而对于系统声音，你可以使用 `electron-audio-device` 或其他相关库来获取系统声音的输出流，并将其输入到隐藏的 BrowserWindow 中以播放。 这只是一种实现方式，具体取决于你的需求和应用程序的复杂性。希望对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Data-Mining

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值