Skip to main content

Load live video

Load live video on the map, supporthlsvideo streaming andflvVideo streaming.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Load live video</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/lite/v9.1.0/mapmost-lite-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>

    var map = new mapmost.Map({
        container: 'map',
        style: "<your style url>",
        center: [120.6231110792369, 31.29393790264095],
        zoom: 17,
        pitch:60, 
        userId: '***', // Authorization code,This parameter must be added
    });

    map.on('load', function () {

        // Add 2D flat video
        map.addOnlineVideo({
            id: 'test',  // with layersidSimilar, need unique
            type: 'hls', //  hlsLive video streaming type
            coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;4326coordinate
                [120.621, 31.295],
                [120.623, 31.295],
                [120.623, 31.293],
                [120.621, 31.293],
            ],
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'  // hlsvideourl
        });

        // Add stereoscopic video
        map.addOnlineVideo({
            id: 'test-3d',  // with layersidSimilar, need unique
            type: 'flv', //  flvLive video streaming type
            coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;4326coordinate
                [120.621, 31.296, 100],
                [120.623, 31.296, 100],
                [120.623, 31.296, 0],
                [120.621, 31.296, 0],
            ],
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flvvideourl
        });

        // Add stereoscopic video to add feathering effect
        map.addOnlineVideo({
            id: 'test-3d-mask',  // with layersidSimilar, need unique
            type: 'flv', //  flvLive video streaming type
            coordinates: [    // Corner point coordinate array: starting from the upper left corner of the video, clockwise;4326coordinate
                [120.624, 31.294, 100],
                [120.626, 31.294, 100],
                [120.626, 31.294, 0],
                [120.624, 31.294, 0],
            ],
            mask: "../example_data/images/mask.png",
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv',  // flvvideourl
        });

        map.on('click', function () {
            // Remove video
            map.removeOnlineVideo('test')
        })
    })

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