浏览器原生不支持RTSP，需通过技术转换实现网页播放：一、WebRTC网关转流；二、FFmpeg+WebSocket+MSE；三、旧版IE插件（已淘汰）；四、VLC插件（已废弃）；五、WebSocket+Canvas逐帧渲染。
如果您尝试在HTML页面中直接播放RTSP视频流，会发现浏览器原生不支持RTSP协议，因为RTSP未被HTML5 标签纳入标准支持范围。以下是实现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 输出绑定至 元素的 srcObject 属性。
二、使用FFmpeg + WebSocket + MSE方案
该方案通过后端将RTSP流解复用为H.264/AAC裸流，经WebSocket分片推送至前端，再由MediaSource Extensions（MSE）动态注入 元素进行播放。
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 对象并挂载到 的 src 属性。
4、监听WebSocket消息，将接收的fMP4片段追加至 sourceBuffer.appendBuffer()。
5、确保设置 sourceBuffer.mode = 'segments' 并正确处理时间戳映射，避免音画不同步。
三、嵌入第三方ActiveX或NPAPI插件（仅限旧版IE）
此方法依赖已淘汰的浏览器插件机制，在现代浏览器中完全不可用，仅适用于封闭内网中仍运行IE8–11且禁用更新的特殊环境。
1、安装支持RTSP的ActiveX控件（如EasyN VR SDK、WebCamera ActiveX）。
2、在HTML中使用 声明控件实例。
本文档主要讲述的是android rtsp流媒体播放介绍；实时流协议（RTSP）是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频，的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接，为选择发送通道，如UDP、组播UDP与TCP，提供途径，并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
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中插入 标签。
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顺序排队解码，丢弃超时帧以维持实时性，延迟控制依赖网络抖动缓冲区大小。
