当前位置:首页 > 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关闭侧滑

禁用全局侧滑返回功能 在pages.json中配置全局禁止侧滑返回: { "globalStyle": { "popGesture": "none" } } 禁用单个页面侧滑返回 在…

uniapp悬浮

uniapp悬浮

实现悬浮效果的方法 在UniApp中实现悬浮效果可以通过CSS的position: fixed或position: sticky属性结合动态样式控制来实现。以下是具体实现方式: 使用CSS固定定位…

uniapp有用

uniapp有用

Uniapp 的优势 Uniapp 是一款基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布,适用于 iOS、Android、Web、小程序等多个平台。其核心优势包括: 跨平台兼容…

uniapp招聘信息

uniapp招聘信息

uniapp招聘现状 目前市场上对uniapp开发者的需求主要集中在移动端跨平台开发领域,许多企业希望招聘能够同时开发iOS和Android应用的全栈人才。招聘岗位通常要求掌握Vue.js框架、熟悉小…

elementui uniapp

elementui uniapp

使用 Element UI 与 UniApp 结合的方法 Element UI 是一个基于 Vue.js 的桌面端组件库,而 UniApp 是一个跨平台开发框架。两者结合需要特殊处理,因为 Eleme…

uniapp混合oc

uniapp混合oc

uniapp 与 Objective-C 混合开发指南 实现原理 uniapp 通过原生插件机制与 Objective-C 交互,需通过原生模块桥接。核心步骤包括编写原生模块、注册插件、在 uniap…