当前位置:首页 > 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);
  }
});

参数说明:

uniapp如何录像

  • 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/'});

使用原生插件

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

uniapp如何录像

  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压缩视频:

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

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

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

相关文章

uniapp部署到服务器

uniapp部署到服务器

部署准备 确保本地开发环境已完成项目构建,生成静态文件(H5端为/dist/build/h5目录)。检查服务器环境是否安装Nginx/Apache等Web服务软件,并配置好域名解析。 上传文件 通过…

uniapp多环境配置

uniapp多环境配置

多环境配置的必要性 在UniApp开发中,多环境配置能有效区分开发、测试、生产等不同环境的API地址、密钥等参数,避免手动修改代码导致的错误。 创建环境配置文件 在项目根目录下创建env.js或co…

uniapp切片

uniapp切片

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

uniapp特性

uniapp特性

uniapp的核心特性 跨平台开发 uniapp支持一套代码编译到多个平台,包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等。开发者无需为不同平台单独编写代码。…

uniapp擎

uniapp擎

uniapp 引擎简介 uniapp 是一个基于 Vue.js 的开发框架,允许开发者使用一套代码同时构建跨平台应用(如 iOS、Android、H5、小程序等)。其核心引擎负责将 Vue 语法转换为…

引擎uniapp

引擎uniapp

uniapp 引擎概述 uniapp 是一个基于 Vue.js 的跨平台开发框架,允许开发者使用单一代码库构建多端应用(如 iOS、Android、Web、小程序等)。其核心引擎通过条件编译和运行时适…