uniapp实现相册、拍照及视频录制功能

最新推荐文章于 2024-09-25 00:05:08 发布

虎仔_

最新推荐文章于 2024-09-25 00:05:08 发布

阅读量2.9k

点赞数 6

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/qq_40063198/article/details/138188896

版权

本文介绍了如何在Android和iOS应用中通过JavaScriptSDK获取摄像头和相册权限，包括下载插件、请求权限的方法以及处理权限状态的代码示例。还展示了如何利用uni框架实现打开相册、拍照和视频录制功能。

摘要由CSDN通过智能技术生成

一、调用相册、拍照及视频录制功能要先获取相册权限，摄像头权限，要不然，调用不了下面的方法

1.1、到插件市场先下载js_sdk

1.2、引入js_sdk

import permision from "@/js_sdk/wa-permission/permission.js"

1.3 、安卓手机获取权限方法

  <button @click="requestAndroidPermission('android.permission.CAMERA')">摄像头权限</button>
  <button @click="requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')">相册权限</button>


async requestAndroidPermission(permisionID) {
	var result = await permision.requestAndroidPermission(permisionID)
	var strStatus
	if (result == 1) {
		strStatus = "已获得授权"
	} else if (result == 0) {
		strStatus = "未获得授权"
	} else {
		strStatus = "被永久拒绝权限"
	}

},

1.4、 iOS手机获取权限方法

<button  @click="judgeIosPermission('camera')">摄像头权限</button>
<button  @click="judgeIosPermission('photoLibrary')">相册权限</button>

judgeIosPermission: function(permisionID) {
	var result = permision.judgeIosPermission(permisionID)
	console.log(result);
	var strStatus = (result) ? "已" : "未"
},

1.5、注意：如果未获得权限需要跳到应用去打开权限

<button @click="gotoAppPermissionSetting">打开手机系统权限设置</button>

gotoAppPermissionSetting: function() {
	permision.gotoAppPermissionSetting()
}

二、打开相册功能实现

<button @click="OpenAlbum">打开相册</button>

OpenAlbum() {
	      uni.chooseImage({
	        count: 1, // 默认9，设置图片的数量
	        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	        sourceType: ['album'],//['camera'], // 可以指定来源是相册还是相机，默认二者都有
	        success: (res) => {
	          // 成功选择照片后的回调
	          const tempFilePaths = res.tempFilePaths;
	          console.log(tempFilePaths);
	          // 这里可以执行上传图片等后续操作
			  // uni.uploadFile({//将本地资源上传到开发者服务器
			  // 					url:baseURL+'/api/Common/upload', //接口地址
			  // 					filePath: res.tempFilePaths[0],//图片地址
			  // 					name: 'file',
			  // 					formData:{
			  // 						access_token:uni.getStorageSync('access_token'),//加入token
			  // 					},
			  // 					success: (uploadFileRes) => {
			  // 						let data = JSON.parse(uploadFileRes.data)
			  // 						if(data.code ==1){
			  // 							this.my_avatar = data.data.url;//上传成功后返回的图片地址
			  // 						}
			  // 					}
			  // 				});
	        },
	        fail: (err) => {
	          console.log('选择照片失败：', err);
	        }
	      });
	    },

三、拍照功能实现

 <button @click="takePhoto">拍照</button>

takePhoto() {
	      uni.chooseImage({
	        count: 1, // 默认9，设置图片的数量
	        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	        sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
	        success: (res) => {
	          // 成功选择照片后的回调
	          const tempFilePaths = res.tempFilePaths;
	          console.log(tempFilePaths);
	        },
	        fail: (err) => {
	          console.log('选择照片失败：', err);
	        }
	      });
	    },

四、视频录制功能实现

<button  @click="chooseVideo()">相册录制</button>

chooseVideo(){
	uni.chooseVideo({
		count: 1,
		sourceType: ['camera'],
		maxDuration: 60, // 最大视频录制时长（秒）
		success: function (res) {
			    console.log('选择视频成功，返回的参数：', res);
			    // 可以使用 res.tempFilePath 获取视频的本地路径
		},
		fail: function (err) {
			    console.error('选择视频失败：', err);
		}
	});
},