如何在.NET Blazor的HTML5 Video标签中集成RTSP摄像头流

因为HTML5 <video>标签原生不支持RTSP协议，必须通过协议转码或中间服务将RTSP转换成浏览器兼容的格式（如HLS、WebRTC、HTTP-FLV），以下是几种落地性强的方案：

方案1：利用编码器自身的转码能力（优先尝试） #

先确认你的SPE-400是否支持直接输出HLS/HTTP-FLV这类浏览器兼容的流：

• 登录编码器的管理后台，检查「流媒体输出」或「编码设置」选项，看是否可以开启HLS（.m3u8）或HTTP-FLV输出
• 如果支持，直接获取对应的流地址，在Blazor的<video>标签中引用即可：

  <video width="640" height="480" controls autoplay>
      <source src="http://[编码器IP]/stream/hls/channel1.m3u8" type="application/x-mpegURL">
      你的浏览器不支持HTML5视频
  </video>
  

• 注：部分编码器需要开启对应的流媒体服务端口，记得在防火墙中放行。

方案2：部署轻量转码中间服务 #

如果编码器本身不支持转码，可部署轻量的RTSP转码服务，比如：

用FFmpeg搭建本地转码服务 #

FFmpeg是最常用的多媒体转码工具，可将RTSP转成HLS或HTTP-FLV：

1. 安装FFmpeg到服务器/本地
2. 启动转码命令（以转成HLS为例）：

   ffmpeg -i rtsp://[编码器IP]/stream/channel1 -c:v h264 -c:a aac -f hls -hls_time 2 -hls_list_size 5 http://[转码服务IP]:8080/stream/channel1.m3u8
   

3. 在Blazor中直接引用转码后的HLS地址，和方案1的<video>标签写法一致。

用现成的开源流媒体服务 #

比如ZLMediaKit、Go2rtc这类开源项目，它们支持RTSP转WebRTC/HLS/FLV，配置简单且性能稳定：

• 部署服务后，添加RTSP流地址到服务管理后台
• 获取转换后的WebRTC或HLS地址，在Blazor中集成：
  • 若用WebRTC，可使用第三方Blazor组件（如BlazorWebRTC）来渲染流；若用HLS，直接用<video>标签即可。

方案3：使用商业流媒体服务 #

如果不想自己部署服务，可考虑云厂商的流媒体处理服务，将RTSP流推送到云服务，由云服务转码成浏览器支持的格式，再获取播放地址嵌入Blazor应用。

Blazor中的注意事项 #

• 确保流地址支持CORS：如果转码服务和Blazor应用不在同一域名下，需要在转码服务端配置CORS允许Blazor应用的域名访问
• 自动播放问题：现代浏览器要求视频自动播放需满足静音或用户交互触发，可添加muted autoplay属性：

  <video width="640" height="480" controls muted autoplay>
      <source src="[转码后的流地址]" type="application/x-mpegURL">
  </video>
  

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