最轻量实现视频水平镜像翻转的方式是CSS的transform: scaleX(-1)，仅影响显示层，不影响原始流数据、截图或canvas处理；垂直镜像用scaleY(-1)；需配合transform-origin: center防偏移；动态控制可通过JS修改style；Canvas中翻转需在绘制时调用translate和scale。
直接用 CSS 的 transform: scaleX(-1) 就能实现视频的水平镜像翻转，这是最轻量、兼容性好且不影响性能的方式。
只对 video 元素生效，不改原始流数据
浏览器通过 getUserMedia 获取的前置摄像头流，默认就是镜像效果（用户自拍感），但底层数据仍是正向的。所以翻转只是显示层操作，适合纯预览场景。
水平镜像（常用，模拟照镜子）
- 给 video 标签加 CSS：
transform: scaleX(-1); - 加上
transform-origin: center;防止画面偏移或抖动 - 仅作用于显示，不影响截图、上传或后续 canvas 处理
垂直镜像（较少用，上下翻转）
- CSS 写法：
transform: scaleY(-1); - 同样建议加
transform-origin: center; - 注意：文字、控件也会被翻转，若需保留文字方向，可单独对子元素再翻转一次
动态控制（比如点击切换）
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 修改 style：
video.style.transform = 'scaleX(-1)'; - 恢复原状：
video.style.transform = 'scaleX(1)';或清空video.style.transform = ''; - 适合需要手动开关镜像的视频通话界面
注意区分：什么时候必须用 Canvas 翻转？
- 当你需要调用
canvas.toDataURL()截图、上传帧、做图像识别或叠加滤镜时，CSS 翻转无效——因为 canvas 绘制的是原始像素 - 此时得在 canvas 中先
ctx.translate(canvas.width, 0)，再ctx.scale(-1, 1)，最后drawImage()
