当前位置：首页 > uni-app

uniapp如何录像

2026-02-05 22:41:20uni-app

使用uniapp实现录像功能

在uniapp中实现录像功能可以通过调用系统相机或使用第三方插件完成。以下是具体实现方法：

调用系统相机API

uniapp提供了uni.chooseVideo方法，可以直接调用系统相机进行录像：

uni.chooseVideo({
  sourceType: ['camera'], // 只使用相机
  maxDuration: 60, // 最长录制时间(秒)
  camera: 'back', // 使用后置摄像头
  success: function(res) {
    console.log(res.tempFilePath); // 视频临时路径
  },
  fail: function(err) {
    console.error(err);
  }
});

使用原生插件实现高级功能

如果需要更复杂的录像控制（如实时滤镜、分段录制等），可以考虑以下方案：

安装uni-app官方提供的nativeObj相机组件：

// 在template中使用
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>

结合recorderManager实现录音录像：

const recorderManager = uni.getRecorderManager();
recorderManager.start({
duration: 60000, // 最长录制时间
sampleRate: 44100, // 采样率
numberOfChannels: 2, // 声道数
encodeBitRate: 192000, // 编码码率
format: 'mp4' // 输出格式
});

自定义界面实现

对于需要完全自定义UI的场景：

通过plus.camera获取摄像头流：

const camera = plus.camera.getCamera();
camera.startVideoCapture(function(path) {
// 录制完成回调
}, function(error) {
// 错误处理
});

使用WebRTC方案（H5环境）：


<video id="preview" autoplay muted></video>
<button @click="startRecording">开始录制</button>

const startRecording = () => { navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { const recorder = new MediaRecorder(stream); recorder.start(); }); } ```

注意事项

iOS平台对录像时间有限制，通常不超过10分钟
Android6.0+需要动态申请相机权限
真机调试时务必检查manifest.json中的权限配置
不同平台支持的视频格式可能不同，建议使用mp4格式

文件保存与上传

录制完成后通常需要处理视频文件：

// 保存到本地
uni.saveFile({
  tempFilePath: res.tempFilePath,
  success: function(savedRes) {
    console.log(savedRes.savedFilePath);
  }
});

// 上传到服务器
uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.tempFilePath,
  name: 'video',
  success: function(uploadRes) {
    console.log(uploadRes.data);
  }
});

以上方法覆盖了uniapp实现录像功能的主要方案，开发者可根据具体需求选择合适的方式。

uniapp如何录像