Skip to main content

Fisheye camera video cropping

Supports cropping of the fisheye camera video fusion layer, and can also set the cropping range of the video image based on the index.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>boxVideo</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 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>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.744471002000068, 31.306768408000039], 
        zoom: 17, 
        pitch: 0, 
        bearing: 0,
        userId: '***', // Authorization code
    });

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

        //Load the fisheye camera video fusion layer
        addBoxVideo();
    })

    //Load the fisheye camera video fusion layer
    function addBoxVideo(){
        map.addLayer({
            id: "video_model",
            type: "boxVideo",
            cameraData: [
                {
                    videoUrl: './static/175.mp4',
                    videoType: 0,  
                    cameraModel: 1,   
                    width: 2560,  
                    height: 1920,  
                    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,  
                            maskBox: [0, 1.0, 0, 0.6], 
                            verticalFactor: 2,  
                            anchorPoints: [[926, 622], [1635, 620], [2141, 179], [402, 123]],  
                            cropRange: [ // crop range
                                [ 0.022521987979167317, 0.01559753653082429 ],
                                [ 0.954955211603292, 0.01444055780106279 ],
                                [ 0.9235586919942271, 0.82420869068380237 ],
                                [ 0.03695638324712053, 0.8030032876590158 ],
                            ],
                        },
                        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]],
                            cropRange: [ // crop range
                                [ 0.032521987979167317, 0.0 ],
                                [ 0.895215217921217215, 0.0 ],
                                [ 0.829851281485465156, 1.0 ],
                                [ 0.03695638324712053, 1.0],
                            ],
                        },
                        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]],
                        }
                    }
                },
                {...},
                {...},
            ],
            callback: function (group,layer) {
                BoxVideoLayer = layer;
            }
        });
    }

    // Crop video
    function clipVideo(){
        BoxVideoLayer.setCropRangeByIndex(0, 'front', [
            [ 0.022521987979167317, 0.01559753653082429 ],
            [ 0.954955211603292, 0.01444055780106279 ],
            [ 0.9235586919942271, 0.82420869068380237 ],
            [ 0.03695638324712053, 0.8030032876590158 ],
        ])
    }
</script>
</body>
</html>