webrtc学习记录一【媒体录制MediaRecorder】

系列文章目录

webrtc学习记录二【基于socket.io创建信令服务器聊天室】

webrtc学习记录三【创建基于RTCPeerConnection本机内的1v1音视频互通】

---

目录

系列文章目录

前言

一、MediaRecorder类的使用

基本格式

参数说明

二、MediaRecorder的options参数说明

示例代码

三、MediaRecorder的一些API

MediaRecorder.start(timeSlice)

MediaRecorder.stop()

MediaRecorder.pause()

MediaRecorder.resume()

MediaRecorder.isTypeSupported(string)

四、MediaRecorder的一些事件

MediaRecorder.ondataavailable

MediaRecorder.onerror

实例

---

前言

记录webrtc学习过程中的要点，以便温故知新。本章主要学习媒体录制相关

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、MediaRecorder类的使用

媒体录制功能主要是基于MediaRecorder这个类来实现的。

基本格式

var mediaRecorder = new MediaRecorder(stream, [,options])

参数说明

参数	说明
stream	媒体流，可以getUserMedia，<video>，<audio>，<canvas>中获取
options	一些配置项，如录制格式，mimeType，码率等。

---

二、MediaRecorder的options参数说明

选项	说明
mimeType	录制格式：                                                                                 video/webm audio/webm video/webm;codecs=vp8 video/webm;codecs=h264 audio/webm;codecs=opus
audioBitsPerSecond	音频码率
videoBitsPerSecond	视频码率
bitsPerSecond	整体码率

示例代码

const options = {
    mimeType: 'video/webm;codecs=vp8'
}
mediaRecorder = new MediaRecorder(mediaStream, options)

---

三、MediaRecorder的一些API

MediaRecorder.start(timeSlice)

开始录制媒体，timeSlice为可选的，如何设置了会按照时间切片存储数据。

MediaRecorder.stop()

结束录制，此时会触发包括最终Blob数据的dataavailable事件。

MediaRecorder.pause()

暂停录制，

MediaRecorder.resume()

恢复录制

MediaRecorder.isTypeSupported(string)

判断是否支持该格式

---

四、MediaRecorder的一些事件

MediaRecorder.ondataavailable

每次记录一定时间的数据时（如果没有指定时间片，则记录整个数据时）会定期触发

MediaRecorder.onerror

当有错误时，录制会停止并触发该事件。

---

实例

假设有一个2个video标签，一个用于获取媒体流，一个用于展示录制的视频。

简单的html代码如下：

  <div class="video_wrap">
    <span>视频窗口：</span>
    <video width="120" height="120" muted id="video" autoplay></video>
    <span>录制视频播放器:</span>
    <video width="120" height="120" muted id="recVideo" autoplay></video>
  </div>

先获取video中的媒体流信息，并将视频画面展示在video标签中。

const video = document.getElementById('video')
const recVideo = document.getElementById('recVideo ')
let mediaStream = null

navigator.mediaDevices.getUserMedia({
    video:true,
    audio:true
}).then(stream => {
    mediaStream = stream
    video.srcObject = stream
})

然后通过MediaRecorder类生成mediaRecorder的实例，用于录制媒体流信息。

if(!MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    console.error(`video/webm;codecs=vp8 is not supported!`)
    return false
}
let mediaRecorder = new MediaRecorder(mediaStream,{
    mimeType: 'video/webm;codecs=vp8'
})

拿到mediaRecorder实例后，绑定ondataavailable事件，生成Blob数据，并开始录制。

let mediaBlob = null
mediaRecorder.ondataavailable = e => {
    if(e && e.data && e.data.size > 0){
        const mediaBuffer = [e.data]
        mediaBlob = new Blob(mediaBuffer, {type: 'video/webm'})
    }
    
}
mediaRecorder.start()

录制一段时间后，停止录制，并且将ondataavailable 事件中生成的mediaBlob存放到recVideo的src中，以显示播放视频。

  recVideo.srcObject = null
  recVideo.src = window.URL.createObjectURL(mediaBlob)
  recVideo.controls = true
  recVideo.play()