uniapp [全端兼容] - 最新详细实现拍摄视频录像并可播放预览视频，调起本机摄像头开启录像录制完毕后保存到本机临时存放，可对拍摄的视频进行压缩处理减少文件大小不损失画质，详解录制视频并读取播放！

前言

网上的教程乱七八糟BUG太多，本文提供优质示例代码。

在 uni-app 全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）项目开发中，详解完成 “uniApp拍摄录制视频并预览播放”，调起本机系统摄像头打开视频录制，用户点击按钮开始拍摄视频最终完成摄影，然后保存到本机临时文件存储，在页面上展示用户录制的视频mp4文件，可点击播放查看视频，最终确认无误可点击上传按钮给到服务器流程，自定义界面样式、限制视频录制时长(限制时间)，支持录制完毕后对视频进行压缩，不牺牲画质的情况下压缩视频大小，基础的读取视频和移除等常见功能，提供详细示例源码。

uniapp（vue2 | vue3）版本项目均可使用，跟着教程复制代码运行稍加改造即可。

---

如下图所示，调起摄像头录制及播放预览，当然手动上传本机相册的视频也是可以压缩及上传服务器的。

示例代码

具体实现代码如下