【Mapbox GL JS 实战】破解 VideoSource 不支持直播流的限制：替换 video 实例实现直播视频纹理

Mapbox GL JS 提供的VideoSource（官方文档）可以将视频作为纹理贴在地图图形上，但官方 API 只支持静态视频 URL，无法直接接入直播流（如 RTMP/RTSP/HTTP-FLV 等），这在需要实时视频叠加的场景中非常受限。

本文通过分析 Mapbox 源码，总结出替换VideoSource内部video实例的方案，完美解决直播流接入问题。

一、问题根源：VideoSource 的源码逻辑

先看VideoSource的核心源码（来源）：

class VideoSource extends ImageSource<'video'> {
   
   
  override load() {
   
   
    // 处理配置中的url列表
    this.urls = options.urls.map(url => transformRequest(url));
    // 核心：调用getVideo创建video元素
    getVideo(this.urls, (err, video) => {
   
   
      this.video = video; // 将创建的video赋值给实例属性
      this.video.loop = true;
      // 后续纹理渲染逻辑...
    });
  }
}

export const getVideo = function (urls: Array<string>, callback: Callback<HTMLVideoElement>)

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_50733426/article/details/156644032