Tag Archives: Cesium

Error message for HLS Video Fusion for the second time when using mars3d

Using Mars technology’s mars3d API and several video fusion written according to the sample code, clicking different web page tags will fly to different locations and turn on Video Fusion there.

    var video3D = new mars3d.graphic.Video3D({
        // type: mars3d.graphic.Video3D.Type.Image,
        // url: videoInfo.pic_url,
        type: mars3d.graphic.Video3D.Type.Video,
        dom: $("#trailer"),
        position: videoInfo.position,
        cameraPosition: videoInfo.cameraPosition,
        style: videoInfo.style,
        showFrustum: videoInfo.showFrustum,
    });
     gLayer.addGraphic(video3D);
    map.setCameraView(videoInfo.view);

However, glayer. Addgraphic (video3d) often appears; report errors. The first call is sure to succeed, and then the second call may fail. After a failure, all methods fail, which will also prevent the call of other methods, such as flight. Error message: unable to:_ 0xc3d9ee add addeventlistener.

After debugging, I found that this DOM element was obtained for the first time

the second time, it was just (forgot the screenshot):

dom:{
	selector:#trailer
}

Therefore, the specific reason for the problem is not clear, but it must be related to jQuery. The second time, I don’t know why I didn’t get the DOM elements completely and then pass them in
No, jQuery is fine anyway:

    var video3D = new mars3d.graphic.Video3D({
        // type: mars3d.graphic.Video3D.Type.Image,
        // url: videoInfo.pic_url,
        type: mars3d.graphic.Video3D.Type.Video,
        dom: document.getElementById("trailer"),
        position: videoInfo.position,
        cameraPosition: videoInfo.cameraPosition,
        style: videoInfo.style,
        showFrustum: videoInfo.showFrustum,
    });
     gLayer.addGraphic(video3D);
    map.setCameraView(videoInfo.view);

Error in loading online pictures on billboard in cesium tainted canvas may not be loaded

There is no problem loading the pictures in the project. An error will be reported when loading the online pictures

resolvent:

image.setAttribute(‘crossOrigin’, ‘anonymous’);  

Reason: when canvas is drawn, online pictures involve cross domain problems.

 

Of course, while setting the front end, you also need to set it in the background to allow cross domain access to pictures.

 

 

Cesium uses mediastreamrecorder or mediarecorder to record and download videos, and turn on the camera for recording.

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)
          })
      }
    }

[Solved] Turf.js error: uncaught (in promise) error: the solution of invalid unit

Solution for turf.js error: Uncaught (in promise) Error: Invalid unit
Error code (npm i turf):

import turf from 'turf';

var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
var options = {units: 'miles'};

var along = turf.along(line, 200, options); // Wrong

Correct code (NPMI @ turf/turf)

import * as turf from '@turf/turf';

var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);
var options = {units: 'miles'};

var along = turf.along(line, 200, options);