Cesium 使用MediaStreamRecorder 或者MediaRecorder录屏并下载视频,以及开启摄像头录像。

Cesium录制canvas视频

利用H5 API MediaRecorder 并借用canvas.captureStream录制屏幕。

直接上代码(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 或者 MediaStreamRec

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值