Cesium uses mediastreamrecorder or mediarecorder to record screen and download video, as well as turn on camera recording. [transfer]

Cesium Recording canvas video
utilize H5 API MediaRecorder And borrow canvas.captureStream Recording screen .

Go straight to the code （vue Next ）

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) //  Here to create a Just download the tag 
      }
      recorder.start()
      setTimeout(() => {
        recorder.stop()
      }, 10000)
    },

shortcoming ： Can only record canvas, Page other dom Can't record .

Add a camera to open the video , Same use MediaRecorder perhaps MediaStreamRecorder ,MediaStreamRecorder Provides more controls , The corresponding js The file import .

MediaStreamRecorder GitHub Address

MediaRecorder The way

Be careful , establish MediaRecorder When an instance , Set it up correctly mimeType Value , otherwise , The downloaded video will be black , Other video formats chrome It seems to support only wemp Format .

call MediaRecorder.stop() It doesn't turn off the camera , Manual required stream.getTracks Turn off video and audio .

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()
              //  Turn off camera 
              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 suspended , I don't want to realize it by myself , Then use MediaStreamRecorder

Also set the value correctly mimeType, Otherwise, the 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)
          })
      }
    }

　　

Link to the original text ：https://blog.csdn.net/qq_42081843/article/details/119005254