Webrtc 多视频合成、本地录制、云端录制；videos merger、remote、local recording；
npm install webrtc-cloud-mixer
npm install webrtc-cloud-mixer
`
$3
`
import {WebRTCRecorder} from 'webrtc-cloud-mixer'
`
$3
| 字段 | 字段说明|
|:-:|:-:|
| api| 远程服务端API|
|logger| 是否开启日志|
|bandwidthInKbps|远程发送宽带配置（单位kbps），如果画质不清晰可以增加|
|recordMic| 是否录制麦克风,如果不开启音频默认为视频的混音，开启后则会同时录制麦克分声音到混合音频|
|config| webrtc协商类型、stun服务地址、turn服务地址等配置，遵循原生 PeerConnection(configuration) 参数配置|
|mergerParams| 合成输出基础配置|
|videoElements|要合并的video元素，内部参数为布局，数组第一个元素为主要画面也就是底层铺满画面|
$3
#### 初始化
`
let recorder = new WebRTCRecorder({
api: 'http://127.0.0.1:18090', // 远程服务端API
logger: true, // 是否开启日志
recordMic: false, // 是否录制麦克分
config: {
sdpSemantics: 'unified-plan',
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
}, // webrtc ice servers 配置
mergerParams: {
width: 1920,
height: 1080,
fps: 30
} //合成输出参数配置
})
console.log(recorder)
`
#### 画面合成
`
let videoElements = [
{
type: 'mp4',
dom: document.getElementById('localmeidastream'), // 固定视频dom
x: 0,
y: 0,
width: recorder.mergerParams.width,
height: recorder.mergerParams.height,
mute: true
},
{
type: 'mp4',
dom: document.getElementById('staticmeidastream'), // 动态视频dom
x: 100, // x坐标
y: 100, // y坐标
width: 200, // 宽度
height: 200, // 高度
mute: false
},
{
type: 'mp4',
dom: document.getElementById('staticmeidastream'), // 动态视频dom
x: recorder.mergerParams.width-200, // x坐标
y: recorder.mergerParams.height-200, // y坐标
width: 200, // 宽度
height: 200, // 高度
mute: false
}
]
//开始合成
await recorder.startStreamMerger(videoElements,'requestAnimation')
//获取合成视频 mediaStream
console.log(recorder.mergerStream)
//将合成指定stream 投射到指定 video元素 【mergerVideoDom】为自定义video标签 ID
recorder.setDomVideoStream('mergerVideoDom',recorder.mergerStream)
`
#### 本地录制
> 本地录制不需要配置API，录制全在本地浏览器中进行
`
//开启画面合成
await recorder.startStreamMerger(videoElements, 'requestAnimation')
//开启本地录制
await recorder.sendLocalRecord(recorder.mergerStream)
//10s后结束录制并获取录制的流以及录制时常
setTimeout(async () => {
const { blob, videoUrl, totalTime } = await recorder.stopLocalRecord()
console.log(blob, videoUrl, totalTime)
//本地预览
that.localRecordVideoUrl = videoUrl
},10000)
await recorder.sendRemoteRecord(recorder.mergerStream)
`
#### 远程录制
> 远程录制的前提是前面合成画面已经开始合成；同时必须配置远程的API才可以用（注意控制比特率）
> 也可以手动在传输过程中变更 recorder.changeBitRate(2000)//2000kbps
`
await recorder.sendRemoteRecord(recorder.mergerStream)
`
#### 远程录制返回参数
`
recorder.remoteCallBackInfo
``