WebRTC之MediaRecorder

你的名字 2023-06-13 11:16 2阅读 0赞

### 文章目录 ###

*  构造
 *   *  参数
 *  方法
 *   *  MediaRecorder.start(timeslice)
     *  MediaRecorder.isTypeSupported()
     *  MediaRecorder.resume()
     *  MediaRecorder.stop()
     *  MediaRecorder.pause()
 *  事件
 *  下载所录制的数据

MediaRecorder这个类是用来对指定的 `MediaStream`进行录制的。

# 构造 #

其构造方法为：

`const mediaRecorder = new MediaRecorder(mediaStream, options)`

## 参数 ##

*  `mediaStream`：这是一个`MediaStream`类实例对象，是所要录制的流。这个流可以是来自`navigator.mediaDevices.getUserMedia`创建的流，亦或是来自`video`或`audio`标签的。
 *  `options`：这是一个对象，包含以下字段：
    
     *  `mimeType`：为`MediaRecorder`指定录制的类型，是录制视频还是音频
     *  `audioBitsPerSecond`：指定音频的码率
     *  `videoBitsPerSecond`：指定视频的码率
     *  `bitsPerSecond`：可以用来指定视频和音频的比特率，如果以上两个属性只有其中之一被指定，那么此属性可以用来设定另外一个

# 方法 #

## MediaRecorder.start(timeslice) ##

开始录制，这个方法接受一个`timeslice`参数，若设置了这个**毫秒值**，那么录制的数据会按照设定的值分割成一个个单独的区块。

## MediaRecorder.isTypeSupported() ##

检查当前设置的MIME类型是否被用户的设备所支持

## MediaRecorder.resume() ##

继续录制被暂停的录制

## MediaRecorder.stop() ##

停止录制，同时触发`dataavailable`事件。

## MediaRecorder.pause() ##

暂停媒体录制

# 事件 #

事件里最应该关注的是`ondataavailable`事件，这个时间会在`start`方法执行后被触发，如果设置了`timeslice`，那么则会每隔`timeslice`毫秒的时间触发一次。

这个事件的回调函数会接受一个事件对象作为参数，对象上有一个`data`字段，这是一个`Blob`对象，即录制的数据，**可以使用数组将其存储起来**。

# 下载所录制的数据 #

实例化一个新的`Blob`对象，实例化时将之前存储数据的数组传入，其次传入MIME类型。

接着调用`URL.createObjectURL`，将刚刚创建的`Blob`对象传入就可生成一个URL。

然后创建一个`a`标签，但不显示，将`download`字段设置成你所希望的文件名，将`href`字段设置成刚刚生成的URL，最后再调用标签的`click`方法即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebRTC 之音视频同步

在网络视频会议中，我们常会遇到音视频不同步的问题，我们有一个专有名词 lip-sync 唇同步来描述这类问题，当我们看到人的嘴唇动作与听到的声音对不上的时候，不同步的问题就

偏执的太偏执、/ 2024年02月21日 07:04/ 0 赞/ 109 阅读

相关 MediaRecorder API 简介

在网络上，我们可以[捕捉来自用户的摄像头，麦克风媒体流][Link 1]和[甚至桌面][Link 2]。我们可以使用这些媒体流[通过 WebRTC][WebRTC]进行

傷城~/ 2023年10月02日 11:11/ 0 赞/ 47 阅读

相关 MediaRecorder API

MediaRecorder API将实时音频/视频内容作为输入以生成压缩媒体。虽然直接用例是从摄像头和/或麦克风录制，但此 API 可以将任何 MediaStreamT

柔光的暖阳◎/ 2023年10月02日 11:09/ 0 赞/ 4 阅读

相关 Android录屏 MediaRecorder介绍

Android录屏 MediaRecorder介绍 Android录屏的三种方案 1、adb shell命令screenrecord 2、MediaRe

电玩女神/ 2023年07月17日 14:13/ 0 赞/ 42 阅读

相关 WebRTC之MediaRecorder

文章目录构造参数方法 MediaRecorder.start(timeslice) MediaRecorder.i

你的名字/ 2023年06月13日 11:16/ 0 赞/ 3 阅读

相关 mediarecoder 安卓_MediaRecorder

Creates and returns a copy of this Object. (Inherited from Object) Compares this insta

妖狐艹你老母/ 2022年12月31日 08:29/ 0 赞/ 51 阅读

相关 WebRTC标准之父谈WebRTC

2015-12-03 kelly blacker 说明：以下内容整理自InfoQ的专访，blacker加了一些注释。问题1: InfoQ：JavaS

╰+哭是因爲堅強的太久メ/ 2022年09月24日 11:25/ 0 赞/ 257 阅读

相关 Android--MediaRecorder录音录像

前言　　Android除了支持播放多媒体文件之外，还可以从对应的硬件中捕获多媒体，比如从麦克风录音、从摄像头录像等。本篇博客讲解一下Android下如何通过MediaRec

淩亂°似流年/ 2022年09月18日 14:50/ 0 赞/ 296 阅读

相关 Android MediaRecorder录制音频

原帖：http://aina-hk55hk.iteye.com/blog/706793 <?xml version="1.0" e

た入场券/ 2022年02月05日 05:55/ 0 赞/ 381 阅读

相关 webrtc之三 iceServer

webrtc建立点对点的对等连接需要用到iceServers参数，可以使用公开免费的一些ice服务器资源，也可以使用开源程序自己搭建ice server，找了一些资源供参考：

冷不防/ 2022年02月05日 03:45/ 0 赞/ 1858 阅读