leaflet-extras / leaflet-providers

An extension to Leaflet that contains configurations for various free tile providers.
https://leaflet-extras.github.io/leaflet-providers/preview/
BSD 2-Clause "Simplified" License
2.12k stars 662 forks source link

please help me, how can the leaflet use the video player using the RTSP url #447

Closed gagaltotal closed 2 years ago

gagaltotal commented 2 years ago

because I'm making a project, namely GIS with live streaming CCTV, how do I do it if RTSP is used in the leaflet? does it have to be additional like the other plugins?

but if i use video it works fine example :

<script>
   var map = L.map('mapid').setView([{{ $place->latitude }},{{ $place->longitude }}],{{ config('leafletsetup.detail_zoom_level') }});

   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([{{ $place->latitude }},{{ $place->longitude }}]).addTo(map)

    axios.get('{{ route('api.places.index') }}')
    .then(function (response) {
        //console.log(response.data);
        L.geoJSON(response.data,{
            pointToLayer: function(geoJsonPoint,latlng) {
                return L.marker(latlng);
            }
        })
        .bindPopup(function(layer) {
            //return layer.feature.properties.map_popup_content;
            return ('<div class="my-2"><strong>CCTV Name</strong> :<br>'+layer.feature.properties.place_name+'</div> <video controls autoplay src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" width="350px"></video>');
        }).addTo(map);
        console.log(response.data);
    })
    .catch(function (error) {
        console.log(error);
    });

</script>

The project I'm using is the Laravel framework

brunob commented 2 years ago

off topic