javascript - js实时录音 如何实现只录系统声音或者只录麦克风声音？

Question

js或者vue实现实时录音功能、如何实现、只录电脑系统声音、或者只录麦克风声音、用户可以自行选择录音的方式
有那些插件或者其他实现方案吗。 请求大佬指教

无

Answer 1

在JavaScript或Vue中实现实时录音功能，并允许用户选择只录制系统声音或只录制麦克风声音，需要一些步骤。以下是实现此功能的基本方法：

HTML5 WebRTC API

WebRTC (Web Real-Time Communication) 是一个支持实时音视频通信的开放标准，可以在无需任何插件的情况下在浏览器之间直接进行音视频通话。WebRTC API 提供了获取系统音频输入和麦克风的接口，可以用来实现实时录音功能。

步骤：

1. 获取媒体设备：使用 navigator.mediaDevices.getUserMedia 方法获取音频输入设备（系统声音或麦克风）。

async function getUserMedia(constraints) {  return new Promise((resolve, reject) => {    navigator.mediaDevices.getUserMedia(constraints)      .then(resolve)      .catch(reject);  });}

2. 选择音频输入设备：通过设置 constraints 对象中的 audio 属性为 true 或 false 来选择是否录制系统声音或麦克风声音。

const constraints = { audio: true, video: false }; // 只录制音频（系统声音或麦克风）getUserMedia(constraints)  .then(stream => {    // 使用 stream 进行录音操作...  })  .catch(error => {    console.error('Error accessing media devices:', error);  });

3. 录音：使用 MediaRecorder API 进行录音。将获取的媒体流传递给 MediaRecorder 的构造函数，然后调用 start 方法开始录音。

const mediaRecorder = new MediaRecorder(stream);mediaRecorder.start();

4. 处理录音数据：在录音过程中，可以通过监听 dataavailable 事件来获取录音数据。可以将数据发送到服务器或进行其他处理。
5. 停止和释放资源：完成录音后，调用 mediaRecorder.stop() 方法停止录音，并使用 stream.getAudioTracks().forEach(track => track.stop()) 释放音频流。

注意事项：

• 需要在支持 WebRTC 和 MediaRecorder 的浏览器中运行此代码。大部分现代浏览器都支持这些API，但可能需要用户允许访问媒体设备。
• 在某些情况下，可能需要对音频数据进行降噪或过滤处理，以提高录音质量。