当前位置：首页 > uni-app

uniapp 录像

2026-01-13 20:48:25uni-app

uniapp 录像功能实现

在uniapp中实现录像功能可以通过调用uni-app的API或结合第三方插件完成。以下是常见的实现方法：

使用uni.chooseVideo方法

uni.chooseVideo({
  sourceType: ['camera'],
  maxDuration: 60,
  camera: 'back',
  success: function (res) {
    console.log(res.tempFilePath);
  }
});

此方法会调起手机摄像界面，允许用户录制视频并返回临时文件路径。参数maxDuration设置最大录制时长（秒），camera可指定前后摄像头。

使用plus.camera实现更复杂控制

var cmr = plus.camera.getCamera();
cmr.startVideoCapture(function(path){
  console.log('视频地址:'+path);
}, function(error){
  console.log('捕获视频失败:'+error.message);
}, {filename:'_doc/video/'});

这种方式需要真机调试，可自定义保存路径和文件名。注意需在manifest.json中配置相机权限。

使用原生插件 对于需要高级功能的场景，可考虑使用nativeObj摄像机组件或第三方原生插件：

安装插件后通过uni.requireNativePlugin调用
配置Android/iOS原生权限
实现自定义界面和参数控制

注意事项

需在manifest.json中配置权限：

"permission": {
"camera": {
  "request": "always",
  "desc": "需要摄像头权限"
}
}

iOS需在App Store隐私说明中添加相机使用描述
安卓需要动态申请权限
临时文件需及时处理，长时间不使用会被系统清理

视频处理技巧 获取视频文件后可通过uni.uploadFile上传服务器，或使用uni.compressVideo压缩视频：

uni.compressVideo({
  src: tempFilePath,
  quality: 'low',
  success: compressed => {
    console.log(compressed.tempFilePath);
  }
});

常见问题解决

权限被拒绝处理

uni.authorize({
  scope: 'scope.camera',
  success() {
    // 用户已授权
  },
  fail() {
    uni.showModal({
      content: '需要摄像头权限',
      success(res) {
        if(res.confirm){
          uni.openSetting(); // 引导用户打开设置
        }
      }
    });
  }
});

多平台兼容方案 通过条件编译处理平台差异：

// #ifdef APP-PLUS
plus.camera相关代码
// #endif
// #ifdef H5
HTML5的getUserMedia方案
// #endif

H5端实现 H5端需使用浏览器API：

uniapp 录像

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();
  });

注意需在HTTPS环境下或localhost调试。