html5无法直接播放rtsp流，需先转为webrtc或websocket等浏览器支持格式，再通过css transform对video或canvas元素旋转；服务端转流时应禁用自动旋转元数据，确保前端控制的一致性。
HTML5 无法直接播放 RTSP 流
这是最根本的限制：RTSP 是基于 TCP/UDP 的实时流协议，而 <video></video> 标签只支持 HTTP(S) 协议下的 MP4、WebM、HLS（.m3u8）或 MPEG-DASH。浏览器原生不解析 RTSP，更谈不上旋转控制。
所以所谓“HTML5 播放 RTSP 并旋转”，实际是两步：先用服务端或 WebAssembly 方案把 RTSP 转成浏览器能播的格式（常见是转 WebRTC 或 WS + H.264 over WebSocket），再对最终渲染的 <video></video> 或 <canvas></canvas> 元素做 CSS 变换。
旋转画面靠 CSS transform，不是视频解码参数
一旦视频流成功渲染到页面（比如通过 <video></video> 或 <canvas></canvas>），旋转就是纯前端视觉层操作，和流本身无关：
-
transform: rotate(90deg)绕中心顺时针转 90° - 配合
transform-origin: center避免偏移 - 若需保持容器尺寸适配，加
width/height交换，或用aspect-ratio修正 - 注意：旋转后鼠标事件坐标会错位，如需交互（点击区域），得手动映射坐标
示例：
<video id="rtspPlayer" style="transform: rotate(90deg); transform-origin: center;"></video>
WebRTC 方案下旋转要同步处理 remoteTrack
如果用 WebRTC（如通过 mediasoup、Janus 或自建 SFU）中转 RTSP，视频轨道（remoteTrack）输出到 <video></video> 后，CSS 旋转依然有效。但要注意：
ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键
- 某些 WebRTC SDK（如
hls.js不适用，它不处理 RTSP；但webrtc-streamer的 JS SDK）会在内部创建<video></video>，你得拿到该元素再加样式 - 若用
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 控制”，逻辑清晰、调试可见、兼容性好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
