Step 12. Device Management-Surveillance Video

Prerequisites

Authorization

You need to have an authorization code first. To obtain the authorization code, please refer to Authorization Application.

Resource acquisition

Attention

The pictures, models, third-party libraries, source code and other resources involved in the scene can be obtained by click to download.

Steps

• The surveillance video module in device management can access surveillance data and view surveillance images at any time.

1. Add geofence

• Enclose the area covered by surveillance with 3D geofences.

  addFence() {
    // flight positioning
    let locations = [
      {
        center: [120.72926045543136, 31.28868731509428],
        zoom: 17.587162625340376,
        bearing: -37.87271910936988,
        pitch: 64.42598133276567,
        speed: 0.3,
        curve: 1,
      },
    ];
    this.changeViewers(locations);
  
    //geofence data
    let fenceData = [
      [120.72841909978374, 31.287745591127717, 1],
      [120.72850753347531, 31.287652507096332, 1],
      [120.72946780543789, 31.28764973659848, 1],
      // ...the remaining data is omitted and can be copied from the source code
    ];
    
    // Add the geofence to the scene
    this.Fence = this._layer.addGeoFencing({
      type: 'fade', // Set the type of geofence
      color: '#2647d4', // Color of geofence
      speed: 2, // The changing speed of the geofence
      opacity: 0.8, // Geofence opacity
      height: 30, // Geofence height
      data: { // Geofence data
        name: 'name',
        coordinate: fenceData // The coordinates of the points that make up the fence, in the form [[Longitude, Latitude, Height], [Longitude, Latitude, Height]...]
      },
    });
  }
  notes

  For more information about 3D geofencing, visit addGeoFencing.

2. Add monitoring icons and videos

• First, define a variable to store monitoring tag data.

  constructor(map, layer, group) {
    
    // ...Omit relevant existing code
    
    this.videoMarkers = []; // Array to store monitoring tags
  }

• Add monitoring icons and videos. Note that for illustration purposes, the same videos are used here. You can change them to dynamic ones.

  addMonitorMarker(monitorDatas) {
    let self = this;
    // Get the 3D layer
    let modelLayer = this._layer;
  
    //Create a new array with the same length as the passed data
    let datas = new Array(monitorDatas.length);
    // Traverse the array
    for (let i = 0; i < monitorDatas.length; i++) {
      //Create a new object for each data item
      datas[i] = {
        id: `monitor${i}`,
        // Create a DOM element as a markup
        element: self.createDeviceDom( 'cameraInfo', './assets/images/camera4.png', '35px', '50px', 'cameraClass' ),
        position: monitorDatas[i], // label position
      };
    }
  
    //Add monitoring tags to the scene
    let monitorMarker = modelLayer.addMarker({
      id: 'marker_monitor',
      data: datas,
    });
  
    self.markerData.push(monitorMarker);
  
    // Traverse monitoring tags
    monitorMarker.element.children.forEach((dom, index) => {
      //Add click event for each label
      dom.element.addEventListener('click', (e) => {
        // If the surveillance video pop-up box already exists, delete it
        if (self.videoMarkers.length > 0) {
          self.videoMarkers.forEach((m) => {
            if (m.remove) m.remove();
            m = null;
          });
          self.videoMarkers = [];
        }
        
        //Create video pop-up label and set style
        let dom = self.createDeviceDom( 'videopop', './assets/images/ui/video.png', '320px', '160px' );
        dom.style.paddingTop = '40px';
        dom.style.paddingBottom = '15px';
        dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
        
        //Create a pop-up window closing element
        let closeIcon = document.createElement('div');
        closeIcon.className = 'closeVideo';
  
        //Create a video element and set styles
        const video = document.createElement('video');
        video.src = './assets/images/ui/videoexample.mp4';
        video.controls = false;
        video.autoplay = true;
        video.muted = true;
        video.loop = true;
        video.height = 160;
        video.width = 320;
        dom.appendChild(video);
        dom.appendChild(closeIcon);
        video.style.opacity = 1.0;
  
        //Add video pop-up frame to the scene
        let cameraMarker = modelLayer.addMarker({
          id: 'marker_video',
          data: [
            {
              name: 'video',
              element: dom,
              position: datas[index].position,
            },
          ],
        });
        self.videoMarkers.push(cameraMarker);
  
        //Add a click event for the close button of the video pop-up box
        cameraMarker.element.children[0].element.addEventListener(
          'click',
          (e) => {
            // Get the currently clicked target sub-element
            let target = e.target; 
            // If the close icon is clicked, delete the video pop-up box
            if (target.className == 'closeVideo') {
              if (self.videoMarkers.length > 0) {
                self.videoMarkers.forEach((m) => {
                  if (m.remove) m.remove();
                  m = null;
                });
                // Clear the video tag array
                self.videoMarkers = [];
              }
            }
          }
        );
      });
    });
  }
  notes

  For more information about 3D labels, visit addMarker.

3. Remove 3D geofence

• The code for removing three-dimensional geofences is as follows.

  removeFence() {
    this._layer.removeModel(this.fence);
  }

4. Call method

• Define monitoring tag data in LyBottom.vue.

  var monitorData = [
    [120.72859280417336, 31.287819536766325, 16.61136703401467],
    [120.72903709929072, 31.287816041953096, 17.753007312637767],
    [120.72996483598551, 31.287815367533703, 21.220148879042075],
    [120.73057112450243, 31.288328793535406, 22.856333422502818],
    [120.73030159329818, 31.288916335578875, 21.168314064335178],
    [120.72855965306707, 31.288364164704344, 25.369974683089666],
    [120.72894653602232, 31.288950980748243, 12.14282479806209],
    [120.72934200510562, 31.287979641573436, 9.59280601642283],
  ];

• Remove the comments about the addMonitorMarker and removeFence methods in LyBottom.vue.

5. Check the effect

• Run and see the effect.

  npm run dev