Cesium recording canvas video

Using H5 API Mediarecorder and borrow canvas.capturestream to record the screen.

Direct upper code (Vue lower)

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) 
      }
      recorder.start()
      setTimeout(() => {
        recorder.stop()
      }, 10000)
    },

Disadvantages: only canvas can be recorded, and other DOM pages cannot be recorded.

Add a camera to open the video, also using mediarecorder or   Mediastreamrecorder, mediastreamrecorder provides more control means, and the corresponding JS files need to be imported.

Mediastreamrecorder GitHub address

Mediarecorder mode

Note that when creating a mediarecorder instance, you should correctly set the value of mimeType. Otherwise, the downloaded video will be black. In addition, the video format chrome seems to only support WEMP format.

Calling mediarecorder. Stop() does not turn off the camera. You need to manually turn off video and audio by stream.gettracks.

makeRecordes () {
      if (navigator.mediaDevices) {
        console.log('getUserMedia supported.')

        var constraints = { audio: true, video: { width: 1280, height: 720 } }
        var chunks = []
        let that = this
        navigator.mediaDevices.getUserMedia(constraints)
          .then(function (stream) {
            var mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8,opus' })

            mediaRecorder.start()
            mediaRecorder.ondataavailable = function (e) {
              chunks.push(e.data)
            }
            setTimeout(() => {
              mediaRecorder.stop()
              stream.getTracks().forEach(function (track) {
                track.stop()
              })
              mediaRecorder.onstop = () => {
                const videoBlob = new Blob(chunks, { 'type': 'video/webm' })
                let videoUrl = window.URL.createObjectURL(videoBlob)
                that.startDownload(videoUrl)
              }
            }, 10000)
          })
          .catch(function (err) {
            console.log('The following error occurred: ' + err)
          })
      }
    },

If you need more control, such as pause, and don’t want to implement it yourself, use mediastreamrecorder

Also set the value mimeType correctly, otherwise the recorded video will be black.

makeRecordesByMSR () {
      if (navigator.mediaDevices) {
        console.log('getUserMedia supported.')

        var constraints = { audio: true, video: { width: 1280, height: 720 } }
        navigator.mediaDevices.getUserMedia(constraints)
          .then(function (stream) {
            // eslint-disable-next-line no-undef
            var mediaRecorder = new MediaStreamRecorder(stream)
            mediaRecorder.stream = stream
            mediaRecorder.width = window.screen.width
            mediaRecorder.height = window.screen.height
            mediaRecorder.mimeType = 'video/webm;codecs=vp8,opus'
            mediaRecorder.ondataavailable = function (blob) {
              mediaRecorder.save(blob, 'myName.webm')
            }
            mediaRecorder.start(6000)

            setTimeout(() => {
              mediaRecorder.stream.stop()
            }, 12000)
          })
          .catch(function (err) {
            console.log('The following error occurred: ' + err)
          })
      }
    }