如何将直播流URL转换为Blob URL以隐藏原始播放地址？

嘿，我懂你想要的效果——把真实的直播流URL藏起来，让别人在开发者工具里只能看到Blob格式的地址，同时不影响视频正常播放对吧？结合你用hls.js的情况，我整理了一套可行的方案，你可以试试：

核心思路 #

HLS直播流由m3u8索引文件和多个ts媒体片段组成，我们不能直接把整个直播流转成单个Blob，但可以通过拦截hls.js的资源请求，把每个请求的原始资源转换为Blob URL后再交给播放器处理，这样开发者工具里就只会显示Blob地址了。

完整实现代码 #

<video id="liveVideo" controls autoplay muted playsinline></video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// 1. 封装资源转Blob URL的工具函数
async function convertToBlobUrl(originalUrl) {
  try {
    // 发起fetch请求获取资源
    const response = await fetch(originalUrl);
    if (!response.ok) throw new Error(`资源请求失败: ${response.status}`);
    
    // 将响应转为Blob对象
    const resourceBlob = await response.blob();
    // 创建并返回Blob URL
    return URL.createObjectURL(resourceBlob);
  } catch (error) {
    console.error('Blob URL转换失败:', error);
    // 转换失败时回退到原始URL，保证播放不中断
    return originalUrl;
  }
}

// 2. 初始化HLS播放器并拦截请求
document.addEventListener('DOMContentLoaded', async () => {
  const videoElement = document.getElementById('liveVideo');
  // 替换成你的真实直播流m3u8地址
  const originalLiveUrl = 'https://your-origin-stream-url/stream.m3u8';

  if (Hls.isSupported()) {
    // 先把主m3u8文件转成Blob URL
    const mainBlobUrl = await convertToBlobUrl(originalLiveUrl);

    const hls = new Hls({
      // 自定义loader拦截所有HLS资源请求
      loader: {
        load: function (context, _, callbacks) {
          // 处理相对URL，拼接成完整地址
          const fullResourceUrl = new URL(context.url, originalLiveUrl).href;

          // 把当前请求的资源转成Blob URL
          convertToBlobUrl(fullResourceUrl).then(blobUrl => {
            // 用Blob URL重新获取资源并交给hls.js处理
            fetch(blobUrl)
              .then(res => res.arrayBuffer())
              .then(data => {
                callbacks.onSuccess(data, { url: blobUrl });
              })
              .catch(err => callbacks.onError(err));
          });

          // 返回abort方法供hls.js调用（可按需完善）
          return {
            abort: () => console.log('请求已终止')
          };
        }
      }
    });

    // 加载Blob格式的主m3u8
    hls.loadSource(mainBlobUrl);
    hls.attachMedia(videoElement);

    // 监听加载成功事件
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      console.log('直播流加载完成，已替换为Blob URL');
    });
  } 
  // Safari原生支持HLS的情况处理
  else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
    const mainBlobUrl = await convertToBlobUrl(originalLiveUrl);
    videoElement.src = mainBlobUrl;
  }
});
</script>

关键注意点 #

• 跨域问题：你的直播流服务器必须开启CORS（跨域资源共享），否则fetch请求会被浏览器拦截。如果暂时无法修改服务器配置，开发阶段可以用浏览器的跨域禁用参数（比如Chrome的--disable-web-security）测试，但生产环境必须解决CORS问题。
• Blob URL生命周期：Blob URL仅在当前页面会话有效，页面刷新后会自动失效，这完全符合直播流的使用场景。
• 性能影响：每个媒体片段都会先经过fetch转Blob的步骤，可能会有轻微的延迟，但对于直播流来说几乎可以忽略。
• 开发者工具显示：设置完成后，在浏览器Network面板里看到的所有HLS相关请求都会是Blob格式的URL，原始地址不会暴露。

内容的提问来源于stack exchange，提问作者Rahul