GIS开发者社区

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 提供了更