八、视频录制基础知识-MediaRecorder

MediaRecorder 基本格式

let mediaRecorder = New MediaRecorder(stream, [options])
参数 说明
stream 媒体流，可以从getUserMedia，<video>，<audio>，<canvas> 等获取
options 限制选项

options 限制选项

选项 说明
mimeType (指定录制的音频还是视频以及录制的格式) 1.vide/webm (或者video/mp4)等 2.audio/webm 3.video/webm;codecs=vp8 4.vide/webm;codecs=h264 5.audio/webm; codecs=opus
audioBitsPerSecond 音频码率
videoBitsPerSecond 视频码率（码率越高，清晰度越高）
bitsPerSecond 整体码率

MediaRecorder API

  • MediaRecorder.start(timeslice)
    开始录制媒体，timeslice是可选的。
    如果设置了会按时间切片存储数据，若不设置，所有录制数据都会存储到一个大的Buffer中
  • MediaRecorder.stop()
    停止录制，会触发包括最终Bolb数据的 detaavailable事件
  • MediaRecorder.pause()
    暂停录制
  • MediaRecorder.resume()
    恢复录制
  • MediaRecorder.isTypeSupported()
    检查支持录制的文件格式

MediaRecorder 事件

  • MediaRecorder.ondataavailable
    当数据有效时触发，可监听此事件，当数据有效，存储到缓冲区中，会传event和data，data为真正数据
    每次记录一定事件的数据时，会定期触发。没有指定时间片，则记录整个数据时触发
  • MediaRecorder.onerror
    当有错误发生时，录制会自动被停止

JavaScript 几种存储数据方式

  • 字符串
  • Blob
    十分高效的和存储区域，Buffer 可放到Blob，可将整个缓存区写入文件中
  • ArrayBuffer
    可通过 Blob对 Buffer做各种操作
  • ArrayBufferView
    各种各样的 Buffer，都可以做 Blob的参数

生成文件用 Blob，底层数据一般用 ArrayBuffer或 ArrayBufferView

注：移动端兼容性较差，iOS不兼容，Android支持Chrome和微信

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容