Combine Text, Image, Video, Audio, UserMedia, DisplayMedia to generate MediaStream. With [AVRcorder](../av-recorder/README.md) you can output MP4 streams and save them as local files or push them to the server.
npm install avrecorder-canvasCombine Text, Image, Video, Audio, UserMedia, DisplayMedia to generate MediaStream.
With AVRcorder you can output MP4 streams and save them as local files or push them to the server.
使用文字、图片、音视频文件、摄像头&麦克风、分享屏幕来生成 MediaStream。
配合 AVRcorder 可以输出 MP4 流,然后保存为本地文件或推送至服务器。
``ts
import { AVCanvas, VideoSprite } from 'avrecorder-canvas'
import { AVRecorder } from 'avrecorder-recorder'
const avCvs = new AVCanvas(document.querySelector('#app') as HTMLElement, {
bgColor: '#333',
resolution: {
width: 1920,
height: 1080
}
})
const userMediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
const userSprite = new VideoSprite('userMedia', userMediaStream, {
audioCtx: avCvs.spriteManager.audioCtx
})
await avCvs.spriteManager.addSprite(userSprite)
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true
})
const screenSprite = new VideoSprite('screen', screenStream, {
audioCtx: avCvs.spriteManager.audioCtx
})
await avCvs.spriteManager.addSprite(screenSprite)
// start event
const recorder = new AVRecorder(avCvs.captureStream(), {
width: 1280,
height: 720,
audioCodec: 'aac'
})
await recorder.start()
const fileHandle = await window.showSaveFilePicker({
suggestedName: 'tutorial.mp4'
})
recorder.outputStream
.pipeTo(fileHandle.createWritable())
// stop event
recorder.stop()
``