当前位置:首页 > uni-app

uniapp如何录像

2026-03-05 00:21:43uni-app

使用uniapp实现录像功能

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

使用uni.chooseVideo方法

调用uni.chooseVideo可以打开系统相机进行录像:

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

参数说明:

  • sourceType: 指定来源为相机
  • maxDuration: 最大录制时长(秒)
  • camera: 使用后置摄像头

使用plus.camera实现

需要调用HTML5+ API:

var cmr = plus.camera.getCamera();
cmr.startVideoCapture(function(path){
  console.log(path);
}, function(error){
  console.log(error);
}, {filename:'_doc/video/'});

使用原生插件

如需更高级功能可考虑以下插件:

  1. DCloud的native.js
  2. 第三方录像插件如cordova-plugin-media-capture

注意事项

Android平台需要添加权限:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS平台需要在manifest.json配置:

"ios" : {
  "UIBackgroundModes" : ["audio"]
}

视频压缩处理

录制完成后可使用uni.compressVideo压缩视频:

uniapp如何录像

uni.compressVideo({
  src: tempFilePath,
  quality: 'low',
  success: function(res){
    console.log(res.tempFilePath);
  }
});

以上方法可根据具体需求选择使用,uni.chooseVideo适合简单场景,plus.camera和原生插件适合需要更多控制的场景。

标签: 录像uniapp
分享给朋友:

相关文章

uniapp应用市场

uniapp应用市场

uniapp应用市场概述 Uniapp作为跨平台开发框架,支持将代码编译到iOS、Android、Web及各类小程序平台。其应用市场(插件市场)是开发者获取扩展插件、模板、组件的重要资源库,涵盖UI组…

uniapp使用npm

uniapp使用npm

uniapp中使用npm的方法 uniapp支持通过npm安装和管理第三方依赖包,以下是具体操作步骤: 安装Node.js环境 确保本地已安装Node.js(建议使用LTS版本),安装后会自动包含n…

uniapp前端项目

uniapp前端项目

Uniapp 前端项目开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(如微信小程序、H5、App 等)。以下是关于 Uniapp 前端项目的关键信息: 环…

uniapp面试问啥

uniapp面试问啥

技术基础类问题 UniApp框架特性 跨端实现原理及条件编译的使用场景 如何理解"一次开发,多端运行"的优缺点 rpx与vw/vh单位的适配差异 Vue相关 生命周期在UniA…

uniapp设置背景

uniapp设置背景

设置全局背景样式 在App.vue文件中添加全局样式,使用page选择器设置页面背景。这种方式会影响所有页面背景。 <style> page { background-color:…

uniapp切片

uniapp切片

uniapp 切片实现方法 在 uniapp 中实现切片功能通常指的是对图片或数据进行分割处理。以下是几种常见的切片实现方式: 图片切片展示 通过 CSS 和 JavaScript 实现图片的网格化…