【uniapp】h5端解决视频最长只能录制60秒的限制

 uni.chooseVideo最长只能录制60s,仅仅用uni-app是做不到录制长视频的,需要借助原生扩展对象plus来编写插件解决这一问题

一、新建.js文件util.js

function android(options) {
	const VIDEOZOOM = 200;
	let MediaStore = plus.android.importClass('android.provider.MediaStore');
	let Intent = plus.android.importClass('android.content.Intent');
	// 导入后可以使用new方法创建类的示例对象
	let intent = new Intent('android.media.action.VIDEO_CAPTURE');
	intent.putExtra('android.intent.extra.videoQuality', 1); //0 means low quality, 1 means high quality
	//intent.putExtra("android.provider.MediaStore.EXTRA_OUTPUT", url);
	intent.putExtra('android.intent.extra.durationLimit', options.time || 60000); //设置录像时间
	let main = plus.android.runtimeMainActivity();
	main.startActivityForResult(intent, VIDEOZOOM);
	//获取返回参数
	main.onActivityResult = function(requestCode, resultCode, data) {
		let context = main;
		plus.android.importClass(data);
		let uri = data.getData();
		let resolver = context.getContentResolver();
		plus.android.importClass(resolver);
		let cursor = resolver.query(uri, null, null, null, null);
		plus.android.importClass(cursor);
		cursor.moveToFirst();
		let column = cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DATA);
		// 获取录制的视频路径
		let filePath = cursor.getString(column);
		// 解析视频文件的属性
		plus.io.resolveLocalFileSystemURL(
			filePath,
			(entry) => {
				entry.file(function(file) {
					typeof(options.success) === 'function' && options.success({
						fullPath: entry.fullPath,
						file
					})
				});
			},
			(e) => {
				typeof(options.fail) === 'function' && options.fail(e)
			}
		);
	};
}
 
function ios(options) {
	let cmr = plus.camera.getCamera();
	let res = cmr.supportedVideoResolutions[0];
	let fmt = cmr.supportedVideoFormats[0];
	cmr.startVideoCapture(
		function(path) {
			plus.io.resolveLocalFileSystemURL(
				path,
				(entry) => {
					console.log(entry)
					entry.file(function(file) {
						console.log(entry.fullPath)
						typeof(options.success) === 'function' && options.success({
							fullPath: entry.fullPath,
							file
						}) 
					});
				},
				(e) => {}
			);
		},
		function(error) {
			typeof(options.fail) === 'function' && options.fail(error)
		}, {
			resolution: res,
			format: fmt,
			videoMaximumDuration: options.time || 10
		}
	);
}
 
export default {
	/**
	 *  options.time [number] 视频最大长度 单位s
	 *  options.success [function] 成功回调函数
	 *  options.fail [function] 失败回调函数
	 */
	camera(options) {
		if (uni.getSystemInfoSync().platform === 'android') {
			console.log('安卓')
			android(options)
		} else {
			ios(options)
			console.log('ios')
 
		}
 
	}
}

二、使用 

import video from '../../untils/util.js';
 
 
video.camera({
time: 200,
 
success: e => {
console.log("path=="+e.fullPath);
 
console.log("size=="+e.file.size);
 
console.log("name=="+e.file.name);
 
console.log(e);
 
}
 
});

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
要在uniapp h5中使用ucharts,你需要按照以下步骤进行操作: 1. 首先,你需要在你的uniapp项目中安装ucharts。可以使用npm或yarn进行安装,命令如下: ``` npm install ucharts --save ``` 或 ``` yarn add ucharts ``` 2. 安装完成后,你需要在你的vue组件中引入ucharts,代码如下: ```js import uCharts from 'ucharts'; ``` 3. 接下来,你需要在你的vue组件中定义一个canvas元素,并且给它一个唯一的ID。例如: ```html <canvas id="myChart" style="width:100%;height:300px;"></canvas> ``` 4. 在vue组件的mounted生命周期函数中,你需要初始化ucharts,并且传入你的canvas元素ID以及数据。例如: ```js mounted() { const canvas = document.getElementById('myChart'); const ctx = uni.createCanvasContext(canvas); const data = { categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], series: [{ name: '成交量1', data: [20, 40, 60, 80, 100, 120, 140] }, { name: '成交量2', data: [10, 20, 30, 40, 50, 60, 70] }] }; new uCharts({ $this: this, canvas, type: 'column', legend: { show: true, position: 'bottom', fontSize: 12, data: ['成交量1', '成交量2'] }, dataLabel: true, dataPointShape: true, background: '#FFFFFF', pixelRatio: uni.getSystemInfoSync().pixelRatio, categories: data.categories, series: data.series, animation: true, width: uni.upx2px(375), height: uni.upx2px(200), extra: { column: { width: uni.upx2px(40) } } }); } ``` 5. 最后,你需要在你的vue组件中引入ucharts的css文件。例如: ```html <style> @import "node_modules/ucharts/uCharts.css"; </style> ``` 这样,你就可以在uniapp h5中成功引入ucharts并且使用它了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值