浏览器原生不支持RTSP，需通过技术转换实现网页播放：一、WebRTC网关转流；二、FFmpeg+WebSocket+MSE；三、旧版IE插件（已淘汰）；四、VLC插件（已废弃）；五、WebSocket+Canvas逐帧渲染。
如果您尝试在HTML页面中直接播放RTSP视频流，会发现浏览器原生不支持RTSP协议，因为RTSP未被HTML5 <video> 标签纳入标准支持范围。以下是实现RTSP流在网页端可视化的多种技术路径：
一、通过WebRTC网关转换RTSP为WebRTC流
该方法利用专用网关（如Janus、Medooze、Wowza或自建基于GStreamer的WebRTC中继）将RTSP源实时转封装为WebRTC协议，使浏览器可通过JavaScript API建立点对点式低延迟连接。
1、部署支持RTSP输入与WebRTC输出的网关服务，并确保其HTTP/HTTPS接口可被前端访问。
2、在HTML中引入WebRTC客户端库（如adapter.js），并编写JavaScript代码发起信令交互。
立即学习“前端免费学习笔记（深入）”；
3、调用 navigator.mediaDevices.getUserMedia() 非必需，实际使用 RTCPeerConnection 直接处理远端SDP Offer/Answer。
4、将网关返回的SDP响应传入 pc.setRemoteDescription(new RTCSessionDescription(sdp)) 完成媒体协商。
5、将 RTCPeerConnection 的 addTrack 输出绑定至 <video> 元素的 srcObject 属性。
二、使用FFmpeg + WebSocket + MSE方案
该方案通过后端将RTSP流解复用为H.264/AAC裸流，经WebSocket分片推送至前端，再由MediaSource Extensions（MSE）动态注入 <video> 元素进行播放。
1、启动FFmpeg进程拉取RTSP流，输出为fragmented MP4（fMP4）格式： ffmpeg -i rtsp://xxx -c:v copy -c:a aac -f mp4 -movflags +frag_keyframe+empty_moov -。
2、后端服务（如Node.js）读取FFmpeg标准输出，按moof+mdat结构切片，通过WebSocket逐帧发送二进制数据。
3、前端创建 MediaSource 对象并挂载到 <video> 的 src 属性。
4、监听WebSocket消息，将接收的fMP4片段追加至 sourceBuffer.appendBuffer()。
5、确保设置 sourceBuffer.mode = 'segments' 并正确处理时间戳映射，避免音画不同步。
三、嵌入第三方ActiveX或NPAPI插件（仅限旧版IE）
此方法依赖已淘汰的浏览器插件机制，在现代浏览器中完全不可用，仅适用于封闭内网中仍运行IE8–11且禁用更新的特殊环境。
1、安装支持RTSP的ActiveX控件（如EasyN VR SDK、WebCamera ActiveX）。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
2、在HTML中使用 <object classid="clsid:XXX"> 声明控件实例。
3、通过JavaScript调用控件暴露的方法（如 LoadRTSP("rtsp://...")）启动播放。
4、设置控件宽高及自动播放参数，例如 AutoStart=true 和 ShowControl=false。
5、注意Windows系统需启用“启用不安全控件”策略，且HTTPS页面无法加载HTTP资源控件。
四、调用本地VLC Web Plugin（已废弃）
VLC曾提供NPAPI插件支持浏览器内嵌播放RTSP，但自Chrome 45、Firefox 52起全面移除NPAPI，当前所有主流浏览器均不再兼容。
1、下载并安装VLC 2.2.x版本（最后支持NPAPI的稳定版）。
2、启用VLC插件：打开VLC → 工具 → 插件与扩展 → 服务插件 → 启用“Web插件”。
3、在HTML中插入 <embed type="application/x-vlc-plugin" target="rtsp://..."> 标签。
4、设置 width 和 height 属性以控制显示区域大小。
5、用户首次访问需手动允许浏览器加载被标记为“过时”的插件，且仅限HTTP站点生效。
五、使用WebSocket + Canvas逐帧渲染H.264帧
该方法绕过MSE限制，将H.264 Annex B格式NALU帧通过WebSocket传输，在Canvas上借助WebAssembly解码器（如h264bsd、mp4box.js中的解码模块）逐帧绘制。
1、后端使用FFmpeg提取关键帧（IDR）和非关键帧，按NALU边界（0x00000001）拆分并编码为Base64或二进制。
2、前端建立WebSocket连接，监听message事件获取帧数据。
3、将接收到的NALU送入WebAssembly H.264解码器实例，输出YUV420p像素数据。
4、使用 createImageBitmap() 或 OffscreenCanvas 将YUV转RGB并渲染至Canvas。
5、严格按PTS顺序排队解码，丢弃超时帧以维持实时性，延迟控制依赖网络抖动缓冲区大小。
