HTML5无法直接播放RTSP流，需先转为WebRTC或WebSocket等浏览器支持格式，再通过CSS transform对video或canvas元素旋转；服务端转流时应禁用自动旋转元数据，确保前端控制的一致性。
HTML5 无法直接播放 RTSP 流
这是最根本的限制：RTSP 是基于 TCP/UDP 的实时流协议，而 标签只支持 HTTP(S) 协议下的 MP4、WebM、HLS（.m3u8）或 MPEG-DASH。浏览器原生不解析 RTSP，更谈不上旋转控制。
所以所谓“HTML5 播放 RTSP 并旋转”，实际是两步：先用服务端或 WebAssembly 方案把 RTSP 转成浏览器能播的格式（常见是转 WebRTC 或 WS + H.264 over WebSocket），再对最终渲染的 或 元素做 CSS 变换。
旋转画面靠 CSS transform，不是视频解码参数
一旦视频流成功渲染到页面（比如通过 或 ），旋转就是纯前端视觉层操作，和流本身无关：
-
transform: rotate(90deg)绕中心顺时针转 90° - 配合
transform-origin: center避免偏移 - 若需保持容器尺寸适配，加
width/height交换，或用aspect-ratio修正 - 注意：旋转后鼠标事件坐标会错位，如需交互（点击区域），得手动映射坐标
示例：
立即学习“前端免费学习笔记（深入）”；
WebRTC 方案下旋转要同步处理 remoteTrack
如果用 WebRTC（如通过 mediasoup、Janus 或自建 SFU）中转 RTSP，视频轨道（remoteTrack）输出到 后，CSS 旋转依然有效。但要注意：
- 某些 WebRTC SDK（如
hls.js不适用，它不处理 RTSP；但webrtc-streamer的 JS SDK）会在内部创建，你得拿到该元素再加样式 - 若用
canvas.drawImage()手动绘制帧（例如做图像处理），旋转必须在ctx.rotate()和ctx.translate()中完成，不能只靠 CSS - 移动端 Safari 对
transform+video的硬件加速支持不稳定，偶发黑屏，可尝试加will-change: transform或降级为canvas渲染
服务端转封装时别误设旋转元数据
有些 RTSP 摄像头（如海康、大华）在流中嵌入了 rotation 视频旋转标识（存于 SPS 中）。若服务端转流工具（如 FFmpeg、GStreamer）未清除或忽略该标识，浏览器可能自动旋转——但这不可控、不一致，且多数 HTML5 播放器根本不读这个字段。
稳妥做法是在转流环节强制消除旋转信息：
ffmpeg -i rtsp://... -vf "transpose=1" -c:v libx264 ... # 显式转90°，而非依赖元数据
或者用 -noautorotate（FFmpeg 4.3+）禁用自动旋转解析。
真正需要旋转时，坚持“流内容正向输出 + 前端 CSS 控制”，逻辑清晰、调试可见、兼容性好。
