Skip to main content

Fisheye camera video fusion

Load the 3D video fusion layer to support fisheye camera video fusion. Obtaining parameters related to video projection requires relying on the video calibration tool. For details, please contact customer service (lower right corner).

show
<!DOCTYPE html>
<html>

<head>
  <title>Fisheye camera video fusion</title>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }

  </style>
  <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
  <div id='map'></div>
  <script>

    const map = new mapmost.Map({
      container: 'map',
      style: '<your style url>',
      center: [120.681049691001206, 31.321349947429418],
      zoom: 20.5,
      pitch: 30,
      bearing: 12,
      userId: '***', // Authorization code
      env3D: {
        envMap: './static/WhiteBG_Ref_1K.hdr',
        exposure: 1.8,
        defaultLights: false,
      }
    });

    map.on('load', () => {
      map.addLayer({
        id: 'model_layer',
        type: 'model',
        models: [{
          type: 'glb',
          url: './static/house1.glb'
        }],
        project: "3857",
        center: [120.681049691001206, 31.321349947429418, 0.0],
      });

      addBoxVideoLayer();
    })

    function addBoxVideoLayer() {
      let options = {
        id: 'box-video-layer',
        type: 'boxVideo',
        center: [120.68152338516848, 31.321349947429432, 0.5],
        cameraData: {
          videoUrl: './static/175.mp4',
          videoType: 0, //Video source format, required
          cameraModel: 1, // 0---no distortion correction, 1---fisheye distortion correction, 12---division model distortion correction
          width: 2560, // Video width, required
          height: 1920, // Video height, required
          fx: 511.28906240553897,
          fy: 509.2086566536431,
          u0: 1284.0372612568253,
          v0: 959.0415832165829,
          k1: 0.18428408682396316,
          k2: -0.10387142960869065,
          k3: 0.06083848190005854,
          k4: -0.013071638867916777,
          fScale: 0.5,
          boxDivision: {
              front: {
                visible: true, // Is it visible?
                maskBox: [0, 1.0, 0, 0.6], // Planar area cropping [xMin, xMax, yMin, yMax]
                verticalFactor: 2, //Video vertical stretching ratio
                anchorPoints: [[926, 622], [1635, 620], [2141, 179], [402, 123]], // Image corner points
              },
              right: {
                visible: true,
                maskBox: [0, 1, 0, 0.6],
                verticalFactor: 2,
                anchorPoints: [[1635, 620], [1628, 1287], [2144, 1766], [2141, 179]],
              },
              back: {
                visible: true,
                maskBox: [0, 1, 0, 0.6],
                verticalFactor: 2,
                anchorPoints: [[1628, 1287], [922, 1286], [382, 1782], [2144, 1766]],
              },
              left: {
                visible: true,
                maskBox: [0, 1, 0, 0.6],
                verticalFactor: 2,
                anchorPoints: [[922, 1286], [926, 622], [402, 123], [382, 1782]],
              },
              bottom: {
                visible: true,
                maskBox: [0, 1, 0, 1],
                verticalFactor: 1,
                anchorPoints: [[922, 1286], [1628, 1287], [1635, 620], [926, 622]],
              }
          }
        }
      }
      map.addLayer(options);
    }

  </script>
</body>
</html>