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

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

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 strStatusif (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);}});
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/3549.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python内置函数input()详解

Python内置函数input()详解 在Python编程中&#xff0c;input()函数是一个基本的内置函数&#xff0c;它允许程序从用户那里获取输入。这个函数对于创建交互式程序来说非常重要&#xff0c;因为它让程序能够接收用户的文本输入。 函数功能 input()函数的主要功能是从标准输入…

深度学习检测算法YOLOv5的实战应用

在当前的检测项目中&#xff0c;需要一个高效且准确的算法来处理大量的图像数据。经过一番研究和比较&#xff0c;初步选择了YOLOv5作为算法工具。YOLOv5是一个基于深度学习的检测算法&#xff0c;以其快速和准确而闻名。它不仅能够快速处理图像数据&#xff0c;还能提供较高的…

两数、三数以及四数之和

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…

Java基础教程(7)-Java中的面向对象和类

面向对象编程 Java是一种面向对象的编程语言。面向对象编程,英文是Object-Oriented Programming,简称OOP 面向对象和面向过程的区别 面向过程编程是自顶而下的编程模式;把问题分解成一个一个步骤,每个步骤用函数实现,依次调用即可 面向对象编程是将事务高度抽象化的编程…

acwing算法提高之图论--拓扑排序

目录 1 介绍2 训练3 参考 1 介绍 本专题用来记录拓扑排序相关的题目。 求拓扑序列算法的关键步骤&#xff1a; 把入度为0的结点插入队列q。弹出队头t&#xff08;将t记录下来&#xff09;&#xff0c;遍历队头t的下一个结点&#xff0c;将其入度减1。操作之后&#xff0c;如…

【OceanBase诊断调优】——hpet(高精度时钟源)引起的CPU高问题排查

最近总结一些诊断OCeanBase的一些经验&#xff0c;出一个【OceanBase诊断调优】专题出来&#xff0c;也欢迎大家贡献自己的诊断OceanBase的方法。 1. 前言 昨天在问答区帮忙排查一个用户CPU高的问题&#xff0c;帖子链接&#xff1a;《刚刚新安装的OceanBase集群&#xff0c;…

Rime 如何通过 iCloud 实现词库多端同步,Windows、iOS、macOS

Rime 如何通过 iCloud 实现词库多端同步&#xff0c;Windows、iOS、macOS 一、设备环境 最理想的输入环境就是在多端都使用同一个词库&#xff0c;这样能保持多端的输入习惯是一致的。 以我为例&#xff0c;手头每天都要用到的操作平台和对应的输入法&#xff1a; 操作系统设…

39 vue.js

1.1 vue是什么&#xff1f; vue是当下主流的前端框架&#xff0c;用于构建用户界面的 渐进式 自底向上增量开发的MVVM框架。 渐进式&#xff1a;其实每个框架都有自己的特点&#xff0c;在开发的过程中&#xff0c;可以在原有的系统上&#xff0c;把其中一两个功能用VUE…

【热门前端【vue框架】】——vue框架和node.js的下载和安装保姆式教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;程序员-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

如何修复Django中的“ImproperlyConfigured”错误?

在Django中&#xff0c;通常会遇到“ImproperlyConfigured”错误&#xff0c;这表示配置不正确或缺少必要设置。下面是一些常见的修复方法&#xff1a; 检查settings.py文件&#xff1a;确保设置了正确的数据库配置、应用程序、模板路径、静态文件路径等。确保所有必要的设置都…

使用Nginx和内网穿透实现多个本地Web站点的公网访问

在需要将多个本地Web站点暴露到公网的情况下&#xff0c;可以通过Nginx配置文件的修改结合内网穿透技术来实现。下面是具体的步骤和示例&#xff1a; 1. 安装和配置Nginx 首先&#xff0c;确保已经在服务器上安装了Nginx&#xff0c;并且配置了基本的Nginx服务器块&#xff0…

【ARM 裸机】模仿 STM32 驱动开发

1、修改驱动 对于 STM32 来说&#xff0c;使用了一个结构体将一个外设的所有寄存器都放在一起&#xff0c;在上一节的基础上进行修改&#xff1b; 1.1、添加清除 bss 段代码&#xff0c; 1.2、添加寄存器结构体 新建一个文件&#xff0c;命名imx6u.h&#xff0c;注意地址的连…

前端如何优化工程

文章目录 使用CDN1. 请求定位&#xff1a;2.内容缓存&#xff1a;3.负载均衡&#xff1a;4.边缘计算&#xff1a; 优化Webpack1.合理配置Loader&#xff1a;2.优化代码分割&#xff1a;3.压缩和优化输出文件&#xff1a;4.利用Tree Shaking&#xff1a;5.优化解析速度&#xff…

NLP Step by Step -- How to use pipeline

正如我们在摸鱼有一手&#xff1a;NLP step by step -- 了解Transformer中看到的那样&#xff0c;Transformers模型通常非常大。对于数以百万计到数千万计数十亿的参数&#xff0c;训练和部署这些模型是一项复杂的任务。此外&#xff0c;由于几乎每天都在发布新模型&#xff0c…

Linux系统网络---DNS域名解析服务

目录 一、DNS的简介 DNS系统的分布式数据结构&#x1f447; DNS系统类 两种查询方式 二.正向解析实验 1.先关闭防火墙、selinux 2.安装bind 3.查看配置、修改配置 4.修改区域配置文件 正向解析&#x1f447; 反向解析&#x1f447; 5.修改 正向解析&#x1f…

js音频指定扬声器

做音视频开发时候&#xff0c;看到阿里音视频能力&#xff0c;有这个功能&#xff0c;怀着好奇的心去搜索果然发现是有办法做到的&#xff0c;可能比较冷门平时用不到&#xff0c;记录下&#xff1b; const devices await navigator.mediaDevices.enumerateDevices(); const a…

6.Linux常用命令---文件目录管理(3)

6.37 read --读取标准输入命令 read内部命令被用来从标准输入读取单行数据。这个命令可以用来读取键盘输入&#xff0c;当使用重定向时&#xff0c;可以读取文件中的一行数据。 read a < 123.txt #读取文件123.txt中的内容&#xff0c;保存到变量a中参数&#xff1a; -a&a…

python环境安装jupyter

1 前提条件&#xff1a;python环境 系统&#xff1a;win10 python&#xff1a;本地已经有python&#xff0c;可以查看本地的python版本&#xff1a; C:\Users\PC>python --version Python 3.8.10 2 安装jupyter并启动 安装jupyter C:\Users\PC>pip install jupyter …

Qt xml示范

1.数据格式 #ifndef XML_DATA_H #define XML_DATA_H#include<QWidget>struct Student {int s_id;QString s_name;double s_math_score;double s_english_score;}; struct Teacher{int t_id;QString t_name;QVector<Student> t_students_v; };#endif // XML_DATA_H…

笔试题-构建非二叉树,且非递归遍历-利用栈

普通版本 package com.fang.恒天软件;import java.util.*; import java.util.stream.Stream;public class Tree {TreeNode head;public Tree(TreeNode node) {this.head node;}class ForeachNoMethodException extends Exception {public ForeachNoMethodException(String me…