How to add video stream (WebRTC) overlay? I tried to use addSource for videoSource, but it still did not work

[syauqisabili]

Hi, I'm currently building a real-time radar video on a map, but an issue appears when showing the video overlay.

The video stream in the form of a webpage (HTML) like the video record below:

Screencast.from.2025-01-29.00-06-45.webm

I have tried to use addSource method for videoSourceOption.

  addRadarVideo(name: string, mappable: Mappable, range: number, url: string[]): void {
    // Get bounds
    const latOffset = range/111.32;
    const lngOffset = range/(111.32 * Math.cos(mappable.location.lat * Math.PI / 180));

    const latNorth = mappable.location.lat + latOffset;
    const latSouth = mappable.location.lat - latOffset;
    const lngEast = mappable.location.lng + lngOffset;
    const lngWest = mappable.location.lng - lngOffset;

    // Video source option
    const videoSourceOption: maplibregl.VideoSourceSpecification = {
      type: 'video',  
      urls: url,
      coordinates: [
        [lngWest, latNorth],
        [lngEast, latNorth],
        [lngEast, latSouth],
        [lngWest, latSouth],
      ]
    }

    // Add video source and layer
    if (this.map.isStyleLoaded()) {
      this.map.addSource('video-source', videoSourceOption);
      this.map.addLayer({
        id: "video-layer",
        source: 'video-source',
        type: 'raster',
      });
    } else {
      this.map.on('load', () => {
        this.map.addSource('video-source', videoSourceOption);
        this.map.addLayer({
          id: "video-layer",
          source: 'video-source',
          type: 'raster',
        });
      });
    }
  }

the browser could not play the media and the warning appeared:

Okay, since the content type is text/html, I worked around it by creating the marker.
the htmlContent argument is the url video stream: http://localhost:8889/live/radar

  addRadar (lng, lat, htmlContent) {
    // Create element for the radar (video)
    const el = document.createElement('div');
    el.style.width = '300px'; 
    el.style.height = '300px'; 
    el.style.position = 'absolute'; 
    el.style.transform = 'translate(-50%, -50%)';

    // Create the iframe for the video
    const iframe = document.createElement('iframe');
    iframe.src = `${htmlContent}?controls=0`; 
    iframe.width = '100%'; 
    iframe.height = '100%';
    iframe.style.border = 'none'; 
    iframe.style.borderRadius = '50%'; 
    iframe.style.objectFit = 'cover';
    el.appendChild(iframe); 

    new maplibregl.Marker({
      element: el,
      opacity: '0.8',
      anchor: "center"
    })
      .setLngLat([lng, lat]) 
      .addTo(this.map); 
  }

The result is that the radar can appear according to its coordinates, and progressively render a 360-degree sweep. But problems arise regarding the zoom level control as the video below.

Screencast.from.2025-01-29.01-15-14.webm

Any advice for the best approach to overcome this issue?

[HarelM]

The video is coming from somewhere, instead of trying to present the html that holds the video, pass the video url to the video source.
Other option is to adjust the marker size to the relevant size when the map moves (move event is fired).

[syauqisabili]

Hi Harel, I fixed this issue based on your advice on adjusting the marker size by adding a callback function for load, zoom, and move events.

  addRadar (lng: number, lat: number, range: number, htmlContent: string) {
    // Create element for the radar (video)
    const el = document.createElement('div');
    el.style.position = 'absolute'; 
    el.style.borderRadius = '50%';

    // Create the iframe for the video
    const iframe = document.createElement('iframe');
    iframe.src = `${htmlContent}?controls=0&noscroll=1`;  // URL of the video stream
    iframe.style.display = 'block';
    iframe.width = '100%'; 
    iframe.height = '100%';  
    iframe.style.border = 'none';  
    iframe.style.borderRadius = '50%';  
    iframe.style.objectFit = 'cover';
    el.appendChild(iframe);  

    // Add the radar (video) to the map
    new maplibregl.Marker({
      element: el,
      opacity: '0.8',
      anchor: "center"
    })
      .setLngLat([lng, lat]) 
      .addTo(this.map); 

    // Function to calculate the size of the radar based on zoom level
    const updateSize = () => {
      // Convert range (in km) to meters
      const rangeInMeters = range * 1000;

      // Calculate the pixel distance for the range at the current zoom level
      const center = this.map.getCenter();
      const centerPixel = this.map.project(center);
      const offsetPixel = this.map.project([
        center.lng + (rangeInMeters / 111320) * (1 / Math.cos((lat * Math.PI) / 180)),
        center.lat,
      ]);

      // Calculate the diameter in pixels
      const diameterInPixels = Math.abs(offsetPixel.x - centerPixel.x) * 2;

      // Update the size
      el.style.width = `${diameterInPixels}px`;
      el.style.height = `${diameterInPixels}px`;

    };

    // Update radar size when the map is loaded, zoomed, and moved
    this.map.on('load', updateSize);
    this.map.on('zoom', updateSize);
    this.map.on('move', updateSize);
  }

video-stream-overlay.webm

Thanks.