html5 mediarecorder,用浏览器轻松录制音频、视频—— MediaRecorder API

# 用浏览器轻松录制音频、视频—— MediaRecorder API

浏览器有个强大而且简单的API —— MediaRecorder，顾名思义，可以用来录制音频和视频。

闲话不说，先上demo ——

# demo1: 录制语音

< 微信(66) 哈哈哈 ···

说话

按住说话

# demo2: 录制视频

< 微信(66) 哈哈哈 ···

拍段视频吧

按住拍视频

看完demo，再来看看怎么实现吧 ——

# 简介

API可以说是相当简单粗暴了

# 一个构造函数 MediaRecorder()

创建一个新的MediaRecorder对象，用来进行录制操作。

上面的demo只用到了两个方法和两个事件 ——

# 两个方法start、stop

# start()

开始录制媒体。

可以设置一个参数，录制的媒体会按照设置的值进行分割成一个个单独的区块， 而不是以默认的方式录制一个非常大的整块内容。

# stop()

停止录制，同时触发dataavailable事件，返回一个存储Blob内容的录制数据。

# 三个事件start、stop、dataavailable

# onstart

录制开始时触发

# onstop

录制结束时触发

# ondataavailable

录制结束时同时触发，事件对象中返回录制的媒体数据

# 代码片段

demo中用到的部分代码：

获取用户媒体权限