Cesium录制canvas视频
利用H5 API MediaRecorder 并借用canvas.captureStream录制屏幕。
安装MediaRecorder
npm install msr
直接上代码(vue)
recorderCanvas () {
let that = this
let viewer = window.earth
const stream = viewer.canvas.captureStream()
const recorder = new MediaRecorder(stream, { MimeType: 'video/webm' })
that.data = []
recorder.ondataavailable = function (event) {
if (event.data && event.data.size) {
that.data.push(event.data)
}
}
recorder.onstop = () => {
that.url = URL.createObjectURL(new Blob(that.data, { type: 'video/webm' }))
that.startDownload(that.url) // 这里创建a标签下载就好了
}
recorder.start()
setTimeout(() => {
recorder.stop()
}, 10000)
},
缺点:只能录制canvas, 页面其他dom录制不了。
附加个打开摄像头录像的,同样采用MediaRecorder 或者 MediaStreamRecorder ,MediaStreamRecorder 提供了更