极客笔记js mediarecorder
简介
随着 Web 技术的不断发展，JavaScript 已经成为了一个功能强大的语言，可以用于在浏览器中实现许多实时媒体处理的功能。其中，MediaRecorder 是一个重要的类，它允许开发者录制音频和视频，并且可以进行实时的操作和处理。
在本文中，我们将详细介绍 MediaRecorder 类的各个方面，包括如何使用它来录制音频和视频、如何配置录制参数，以及如何对录制的结果进行处理和保存。读者在阅读本文之后，应该对 JavaScript 中的 MediaRecorder 有一个全面的了解。
1. 录制音频
1.1 创建 MediaRecorder 实例
在 JavaScript 中，要录制音频，首先需要创建一个 MediaRecorder 的实例。可以通过传入一个 MediaStream 对象来进行实例化。以下是创建 MediaRecorder 实例的示例代码：
// 创建一个媒体流对象
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
// 实例化 MediaRecorder
const mediaRecorder = new MediaRecorder(stream);
// ...
})
.catch(function(error) {
// 处理错误
console.error('获取媒体流失败:', error);
});
注意，上面的代码中通过调用 navigator.mediaDevices.getUserMedia 方法来获取用户的音频流。由于在一些浏览器中需要用户授权才能访问音频设备，因此这里使用了 getUserMedia 方法来进行这一步操作。
1.2 开始和停止录制
一旦创建了 MediaRecorder 实例，就可以使用 start 和 stop 方法来开始和停止录制音频。以下是示例代码：
// 开始录制
mediaRecorder.start();
// 后续可根据需要执行其他操作
// 停止录制
mediaRecorder.stop();
值得注意的是，start 方法的调用必须在 MediaRecorder 实例的 dataavailable 事件监听器中或 start 之后立即调用，否则会报错。同样地，stop 方法的调用也必须在 MediaRecorder 实例的 dataavailable 事件监听器中或 stop 之后立即调用，否则也会报错。
1.3 处理录制的音频数据
一旦开始录制音频，MediaRecorder 会将录制的音频数据放入一个 Blob 对象中，并触发 dataavailable 事件，开发者可以通过监听该事件来获取录制的音频数据。
以下是示例代码，展示了如何监听 dataavailable 事件，获取录制的音频数据：
// 监听 dataavailable 事件
mediaRecorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
// 创建 audio 元素
const audio = document.createElement('audio');
// 设置 audio 的 src 属性为录制的音频数据的 URL
audio.src = URL.createObjectURL(e.data);
// 播放音频
audio.play();
}
});
上面的代码将录制的音频数据赋值给了新创建的 audio 元素的 src 属性，并通过调用 play 方法来播放音频。需要注意的是，每次触发 dataavailable 事件时，都会创建一个新的 audio 元素。如果要保留之前的录制数据，可以将 audio 元素放入数组或其他数据结构中。
2. 录制视频
与录制音频类似，要在 JavaScript 中录制视频，首先需要创建一个 MediaRecorder 的实例，并传入一个包含视频轨道的 MediaStream 对象。以下是示例代码：
// 创建一个媒体流对象
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// 实例化 MediaRecorder
const mediaRecorder = new MediaRecorder(stream);
// ...
})
.catch(function(error) {
// 处理错误
console.error('获取媒体流失败:', error);
});
与录制音频不同的是，上述代码中使用了 getUserMedia 方法获取了包含视频轨道的 MediaStream 对象。
在开始和停止录制视频方面，与录制音频类似，使用 start 和 stop 方法即可。示例如下：
// 开始录制
mediaRecorder.start();
// 后续可根据需要执行其他操作
// 停止录制
mediaRecorder.stop();
与录制音频不同的是，录制视频时，需要设置 video 的输出格式。可以通过 MIME 类型（如 video/webm 或 video/mp4）来进行设置。示例代码如下：
// 设置 video 的输出格式
mediaRecorder.video = { mimeType: 'video/webm' };
一旦开始录制视频，MediaRecorder 实例会将录制的视频数据放入一个 Blob 对象中，并触发 dataavailable 事件。开发者可以通过监听该事件获取录制的视频数据。
以下是示例代码，展示了如何监听 dataavailable 事件，获取录制的视频数据：
// 监听 dataavailable 事件
mediaRecorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
// 创建 video 元素
const video = document.createElement('video');
// 设置 video 的 src 属性为录制的视频数据的 URL
video.src = URL.createObjectURL(e.data);
// 播放视频
video.play();
}
});
上面的代码将录制的视频数据赋值给了新创建的 video 元素的 src 属性，并通过调用 play 方法来播放视频。同样地，每次触发 dataavailable 事件时，都会创建一个新的 video 元素。如果要保留之前的录制数据，可以将 video 元素放入数组或其他数据结构中。
3. 配置录制参数
在开始录制之前，开发者可以通过设置 MediaRecorder 实例的属性来配置录制的参数。下面是一些常见的配置选项：
mimeType：用于设置录制的音频或视频的媒体类型。audioBitsPerSecond：用于设置音频的比特率（每秒的比特数）。videoBitsPerSecond：用于设置视频的比特率（每秒的比特数）。
以下是示例代码，展示了如何配置这些参数：
// 设置输出格式为音频
mediaRecorder.mimeType = 'audio/webm';
// 设置音频比特率为128kbps
mediaRecorder.audioBitsPerSecond = 128000;
// 设置输出格式为视频
mediaRecorder.video = { mimeType: 'video/webm' };
// 设置视频比特率为1Mbps
mediaRecorder.videoBitsPerSecond = 1000000;
在实际应用中，根据需要进行参数的配置，可以根据不同的需求自由选择合适的参数。
4. 保存录制的音频或视频
完成音频或视频的录制之后，我们通常需要将其保存到服务器或本地设备上。在 JavaScript 中，可以通过将录制的音频或视频数据转换为 Blob 对象，并使用 URL.createObjectURL() 方法来生成一个可下载的链接。
以下是一个将录制的音频保存为文件的示例代码：
// 监听 dataavailable 事件，获取录制的音频数据
mediaRecorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
// 创建一个下载链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(e.data);
downloadLink.download = 'recordedAudio.webm'; // 设置下载文件的文件名
downloadLink.click(); // 模拟点击下载链接
}
});
上述代码中，我们创建了一个 a 标签，并将音频数据的 URL 赋值给 href 属性。通过设置 download 属性来指定下载文件的名称，然后通过调用 click 方法来模拟点击下载链接的操作。
同样的，我们也可以将录制的视频保存为文件。示例代码如下：
// 监听 dataavailable 事件，获取录制的视频数据
mediaRecorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
// 创建一个下载链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(e.data);
downloadLink.download = 'recordedVideo.webm'; // 设置下载文件的文件名
downloadLink.click(); // 模拟点击下载链接
}
});
上面的代码与保存音频的代码基本相同，只是将下载文件的文件名设置为了 recordedVideo.webm。
结论
MediaRecorder 是一个在 JavaScript 中用于录制音频和视频的重要类。本文通过详细介绍了如何使用 MediaRecorder 来录制音频和视频、配置录制参数以及保存录制的音频或视频。了解和熟练掌握 MediaRecorder 的相关知识，将为实现各种实时媒体处理的功能提供很大的便利。