微信小程序 长按录音+录制视频

<view class="bigCircle" bindtouchstart="start" bindtouchend="stop"><view class="smallCircle {{startVedio?'onVedio':''}}"><text>{{startVedio?'正在录音':'长按录音'}}</text></view>
</view>
<view><view class="vedio-player"><view class="vedio-file" bindtap="play"><view class="item-list"><view wx:for="{{20}}" wx:for-item="item" class="item {{vedioProcess>item*5?'active':''}}" wx:key="index"></view></view><view class="time">{{vedioTime}}</view></view></view>
</view><view class="page-body" style="margin-top: 100rpx;"><view class="page-body-wrapper"><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera><view class="btn-area"><button type="primary" bindtap="startRecord">开始录像</button></view><view class="btn-area"><button type="primary" bindtap="stopRecord">结束录像</button></view><view class="preview-tips">预览</view><video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video></view>
</view>
.bigCircle{height:140rpx;width:140rpx;border-radius:100%;background-color:#3370FF2E;display:flex;align-items:center;justify-content:center;color:#fff}
.smallCircle{width:100rpx;height:100rpx;background-color:#3370ff;border-radius:100%;display:flex;align-items:center;justify-content:center; font-size: 20rpx;}
.onVedio{background-color:#04d7b9!important}
.vedio-player{margin-top:20px;display:flex;justify-content:center;align-items:center}
.vedio-file{width:250px;height:44px;background:#f5f5f5;border-radius:34.5px;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;justify-content:space-evenly}
.vedio-file image{height:33px;width:33px}
.item-list{width:150px;height:15px;display:flex;align-items:center}
.time{color:#0d296e;font-size:12px}
.item{height:12px;width:2px;background-color:#3370FF33;margin-left:5px}
.active{background-color:#3370ff}
.item:nth-child(6n-1),.item:nth-child(6n-5){height:4px}
.item:nth-child(6n-2),.item:nth-child(6n-4){height:8px}
.item:nth-child(6n-3){height:14px}
.del-vedio{margin-left:15px}
.del-vedio image{height:25px;width:25px}

//获取应用实例
const app = getApp()
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
var tempFilePath;
Page({data: {startVedio: false,vedioTime: '0:00',},//开始录音的时候start: function () {const options = {duration: 20000, //指定录音的时长,单位 mssampleRate: 16000, //采样率numberOfChannels: 1, //录音通道数encodeBitRate: 96000, //编码码率format: 'mp3', //音频格式,有效值 aac/mp3frameSize: 50, //指定帧大小,单位 KB}//开始录音recorderManager.start(options);this.setData({startVedio: true})recorderManager.onStart((res) => {this.setData({startVedio: false})console.log('recorder start')});//错误回调recorderManager.onError((res) => {console.log(res);})},//停止录音stop: function () {recorderManager.stop();recorderManager.onStop((res) => {this.tempFilePath = res.tempFilePath;const ss = Math.floor(res.duration / 1000 % 60)const mm = Math.floor(res.duration / 1000 / 60)this.setData({vedioTime: `${mm}:${ss>10?ss:'0'+ss}`})console.log('停止录音', res.tempFilePath)const {tempFilePath} = res})},//播放声音play: function () {innerAudioContext.autoplay = trueinnerAudioContext.src = this.tempFilePath,innerAudioContext.onPlay(() => {console.log('开始播放')})innerAudioContext.onError((res) => {console.log(res.errMsg)console.log(res.errCode)})},onLoad() {this.ctx = wx.createCameraContext()},startRecord() {this.ctx.startRecord({success: (res) => {console.log('startRecord')}})},stopRecord() {this.ctx.stopRecord({success: (res) => {console.log(res.tempVideoPath)this.setData({src: res.tempThumbPath,videoSrc: res.tempVideoPath})}})},error(e) {console.log(e.detail)}
})

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

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

相关文章

排序算法:【选择排序]

一、选择排序——时间复杂度 定义&#xff1a;第一趟排序&#xff0c;从整个序列中找到最小的数&#xff0c;把它放到序列的第一个位置上&#xff0c;第二趟排序&#xff0c;再从无序区找到最小的数&#xff0c;把它放到序列的第二个位置上&#xff0c;以此类推。 也就是说&am…

微服务测试是什么?

微服务测试是一种特殊的测试类型&#xff0c;因为它涉及到多个独立的服务。以下是进行微服务测试的一般性步骤&#xff1a; 1. 确定系统架构 了解微服务架构对成功测试至关重要。确定每个微服务的职责、接口、依赖项和通信方式。了解这些信息可以帮助您更好地规划测试用例和测…

ip ssl证书怎么更换ip地址

ip ssl证书是一种数字证书&#xff0c;为只有公网ip地址的站点建立安全、加密的通信通道。它通常由权威的证书颁发机构&#xff08;CA&#xff09;颁发&#xff0c;并用于验证网站的身份和安全性。ip ssl证书的主要目的是保护敏感信息&#xff0c;如信用卡号、用户名和密码等&a…

IO部分笔记

IO 概述 IO: 存储和读取数据的解决方案 作用: 用于读写文件中的数据(可以读写文件, 或网络中的数据) IO流的分类 按流的方向: 输入流, 输出流 按操作文件类型: 字节流: 可以操作所有类型的文件 字符流: 只能操作纯文本文件 纯文本文件: windows自带的记事本打开能读懂…

react Hooks(useRef、useMemo、useCallback)实现原理

Fiber 上篇文章fiber简单理解记录了react fiber架构&#xff0c;Hooks是基于fiber链表来实现的。阅读以下内容时建议先了解react fiber。 jsx -> render function -> vdom -> fiber树 -> dom vdom 转 fiber 的过程称为 recocile。diff算法就是在recocile这个过程…

认识lambda架构(架构师考试复习)

Lambda架构主要分为三层&#xff0c;批处理层、加速层和服务层。 如下图所示&#xff1a; &#xff08;1&#xff09;批处理层&#xff08;Batch Layer&#xff09;&#xff1a;存储数据集&#xff0c;在数据集上预先计算查询函数&#xff0c;并构建查询对应的view。Batch Lay…

mysql 5.7 Unknown column ‘password‘ in ‘field list‘

问题现象&#xff1a; 执行sql : select user&#xff0c;host,password from user&#xff1b;时提示 ERROR 1054(42S22):Unknown column password in field list 现象如下图所示&#xff1a; mysql 5.7开始 密码字段用&#xff1a;authentication_string

Redis哨兵模式:什么是哨兵模式、哨兵模式的优缺点、哨兵模式的主观下线和客观下线、投票选举、Redis 哨兵模式搭建

文章目录 什么是哨兵模式哨兵模式的优缺点主观下线和客观下线投票选举哨兵模式场景应用Redis version 6.0.5 集群搭建下载文件环境安装解压编译配置文件启动关闭密码设置 什么是哨兵模式 哨兵模式是Redis的高可用解决方案之一&#xff0c;它旨在提供自动故障转移和故障检测的功…

2023年四川网信人才技能大赛 实操赛Writeup

文章目录 Crypto比base64少的baseaffine简单的RSA Misc不要动我的flagSimpleUSB猜猜我是谁不聪明的AI Pwngetitezbbstack Reverse谁的DNA动了Dont Touch Me Weblittle_gamejustppbezbbssmart 题目附件&#xff0c;文章末尾微信公众号点点关注亲&#xff0c;谢谢亲~ 题目附件链接…

C++ Qt开发:PushButton按钮组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍QPushButton按钮组件的常用方法及灵活运用。 …

电子眼+无人机构建平安城市视频防控监控方案

电子眼&#xff08;也称为监控摄像机&#xff09;可以通过安装在城市的不同角落&#xff0c;实时监控城市的各个地方。它们可以用于监测交通违法行为、监控公共场所的安全以及实时监测特定区域的活动情况。通过电子眼的应用&#xff0c;可以帮助警方及时发现并响应各类安全事件…

Ubuntu安装TensorRT

文章目录 1. 安装CUDAa. 下载CUDAb. 安装CUDAc. 验证CUDA 2. 安装CUDNNa. 下载CUDNNb. 安装CUDNNc. 验证CUDNN 3. 安装TensorRTa. 下载TensorRTb. 解压TensorRTc. 安装TensorRTd. 安装uff和graphsurgeone. 验证是否安装成功f. 备注 关注公众号&#xff1a;『AI学习星球』 回复&…

spring boot学习第五篇:spring boot与JPA结合

1、准备表&#xff0c;创建表语句如下 CREATE TABLE girl (id int(11) NOT NULL AUTO_INCREMENT,cup_Size varchar(100) COLLATE utf8mb4_bin DEFAULT NULL,age int(11) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT4 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4…

Vmware突然无法获取IP(二)

一 测试环境 宿主机&#xff1a; window10Vmware 17 proUbuntu 18.04虚拟机中 二 问题 之前虚拟机可以正常使用。过程中&#xff0c;安装了docker&#xff08;不确定是否和这个有关系&#xff09;第二天开启虚拟机时&#xff0c;发现网口为down的状态。将网口up后&#xff0…

使用Java实现汉诺塔问题

文章目录 汉诺塔问题 今天和大家来看看汉诺塔问题&#xff0c;这也是一个经典的算法 汉诺塔问题 分治算法经典问题&#xff1a;汉诺塔问题 汉诺塔的传说 汉诺塔&#xff1a;汉诺塔&#xff08;又称河内塔&#xff09;问题是源于印度一个古老传说的益智玩具。大梵天创造世界的…

Java项目-瑞吉外卖Day5

视线新增套餐功能&#xff1a; 创建SetmealDish&#xff0c;SetmealDto类&#xff0c;与相关的mapper&#xff0c;service&#xff0c;serviceImpl&#xff0c;controller类。 Setmeal表示套餐&#xff0c;SetmealDish表示套餐对应的菜品。 交互过程&#xff1a; 前端请求&a…

RE2文本匹配调优实战

引言 在RE2文本匹配实战的最后&#xff0c;博主说过会结合词向量以及其他技巧来对效果进行调优&#xff0c;本篇文章对整个过程进行详细记录。其他文本匹配系列实战后续也会进行类似的调优&#xff0c;方法是一样的&#xff0c;不再赘述。 本文所用到的词向量可以在Gensim训练…

2023年度盘点:智能汽车、自动驾驶、车联网必读书单

【文末送书】今天推荐几本自动驾驶领域优质书籍 前言 2023年&#xff0c;智能驾驶和新能源汽车行业仍然有着肉眼可见的新进展。自动驾驶技术继续尝试从辅助驾驶向自动驾驶的过渡&#xff0c;更重要的是相关技术成本的下降。根据《全球电动汽车展望2023》等行业报告&#xff0c…

进程、容器与虚拟机的区别

进程、容器与虚拟机 参考&#xff1a;关于进程、容器与虚拟机的区别&#xff0c;你想知道的都在这&#xff01; 进程、容器与虚拟机的结构图 进程 介绍 进程是一个正在运行的程序&#xff0c;它是一个个可执行文件的实例。当一个可执行文件从硬盘加载到内存中的时候&#xf…

如何用CHAT写方案?

问CHAT&#xff1a;帮我写一份航空无动力乐园的可执行方案 CHAT回复&#xff1a; 方案一&#xff1a;概念及地点筛选 航空无动力乐园是指以航空运动为主题&#xff0c;利用自然地形与风力进行滑翔、跳伞等无动力航空运动的户外休闲娱乐乐园。鉴于此&#xff0c;首需要确定乐园…