微信小程序开发之——仿微信视频录制上传

一仿微信视频录制效果

二业务说明

视频录制前，只显示取消和视频录制按钮
录制开始后，只显示视频录制按钮，并且上方显示时间、录制按钮显示录制进度
录制完成后，显示重拍、取消、上传按钮
录制完成后，点击按钮，可预览录制视频
点击重拍，录制视频消失，显示相机预览画面
点击取消，返回上一个界面
点击上传，将视频上传

三可能遇到的问题(显示录制倒计时和录制进度)

3.1 布局文件(canvas绘制)

 <!--底部布局-中间部分-canvas绘制--><view><text class="delay-time" hidden="{{!isRecord||isFinish}}">{{timeDelay}}</text><view class="container-record" style="width: 200rpx;height: 200rpx;"><view class='video-button-container' bindlongpress="startRecordLong" bindtouchend="bindtouchend" hidden="{{!initState||isFinish}}"><canvas canvas-id="circleOuterLayer" style="position: absolute;margin: auto 0;width: 200rpx;height: 200rpx;"></canvas><canvas canvas-id="circleInnerLayer" style="position: absolute;margin: auto 0;width: 200rpx;height: 200rpx;" hidden="{{isRecord||(!isRecord&&isFinish)}}"> </canvas><canvas canvas-id="circleRectLayer" style="position: absolute;margin: auto 0;width: 200rpx;height: 200rpx;" hidden="{{!isRecord}}"> </canvas><canvas canvas-id="circleProgressLayer" style="position: absolute;margin: auto 0;width: 200rpx;height: 200rpx;"> </canvas></view></view>
</view>

3.2 样式文件

.container-camera {width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;}/**相机布局 */
.container-camera camera {width: 100vh;height: 100vh;}/**视频回放布局 */
.container-camera video {width: 100vh;height: 100vh;
}.container-bottom {position: absolute;bottom: 40rpx;width: 90%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;z-index: 100;
}.retake {position: absolute;bottom: 220rpx;left: 20px;color: white;background: #7E91AD;padding: 20rpx 50rpx;border-radius: 20rpx;}.container-bottom-left {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;
}.container-bottom-left view {background: #7E91AD;padding: 20rpx 50rpx;border-radius: 20rpx;color: white;}.container-bottom-left view:first-child {margin-bottom: 20rpx;/* margin-top: -60rpx; *//* position: absolute;margin-bottom: 140rpx; */
}.container-bottom-right {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;
}.container-bottom-right view {background: #377EF0;padding: 20rpx 50rpx;border-radius: 20rpx;color: white;
}/**最外层布局 */
.container-record {width: 200rpx;height: 200rpx;}.video-button-container {width: 200rpx;height: 200rpx;position: relative;display: flex;justify-content: center;align-items: center;}

3.3 逻辑文件

  /*** 页面的初始数据*/data: {position: 'back', //摄像头的位置，有前置和后置timeDelay: "15秒", //视频最大时长countTimer: null, // 设置 定时器 初始为nullintervalNum: 15, //视频最大时长倒计时initState: true, //初始化状态isRecord: false, //是否正在录制isFinish: false, //是否录制完成startRecord: false, //是否开始录像，控制录像的默认状态，videoSrc: '' //录像文件的位置},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//1-内层实体圆-白色-默认状态显示var circleInnerCtx = wx.createCanvasContext('circleInnerLayer')// 绘制图形circleInnerCtx.arc(50, 50, 30, 0, 2 * Math.PI)circleInnerCtx.setFillStyle('#EEEEEE')circleInnerCtx.fill()circleInnerCtx.draw()//2-外层圆圈-白色-默认状态显示var circleOuterCtx = wx.createCanvasContext('circleOuterLayer')// 绘制图形circleOuterCtx.arc(50, 50, 40, 0, 2 * Math.PI)circleOuterCtx.setStrokeStyle('#EEEEEE')circleOuterCtx.setLineWidth(5)circleOuterCtx.stroke()circleOuterCtx.draw()//3-正方形-红色-录制视频时显示-与2不可能共存var context = wx.createCanvasContext('circleRectLayer')// context.fillRect(30, 30, 40, 40)const pi = Math.PI;const left = 30;const top = 30;const r = 10;const width = 40;const height = 40;context.beginPath();context.arc(left + r, top + r, r, -pi, -pi / 2);context.arc(left + width - r, top + r, r, -pi / 2, 0);context.arc(left + width - r, top + height - r, r, 0, pi / 2);context.arc(left + r, top + height - r, r, pi / 2, pi);context.closePath();context.setFillStyle('red')context.fill()context.draw()//4-绘制圆//5-倒计时},/**录制视频时，外圈显示录制进度 */recordingCanvas() {this.setData({isRecord: true,})// debuggervar totalTime = this.data.intervalNum;this.data.countTimer = setInterval(() => {if (totalTime > 0) {//num++totalTime--;this.setData({timeDelay: totalTime + "秒"})//context.moveTo(0,0)//cxtProgress = wx.createCanvasContext('circleProgressLayer')// context.rotate(-1 / 2 * Math.PI / 180);cxtProgress.beginPath();cxtProgress.arc(50, 50, 40, -Math.PI / 2, 2 * Math.PI * ((15 - totalTime) / 15) - Math.PI / 2)//cxtProgress.arc(50, 50, 40, -1 / 2 * Math.PI, 3 / 2 * Math.PI * ((15 - totalTime) / 15))cxtProgress.setStrokeStyle('red')cxtProgress.setLineWidth(5)cxtProgress.stroke()cxtProgress.draw()} else {clearInterval(this.data.countTimer)this.bindtouchend();}}, 1000)},  bindtouchend(options) {console.log("--bindtouchend");if (this.data.isRecord) //已经开始录制视频时{clearInterval(this.data.countTimer) //清除计数器this.clearCanvasRect(); //清除Canvas绘制的内容this.stopRecord(); //停止录像this.setData({isFinish: true,isRecord: false})},//清除Canvas绘制的内容clearCanvasRect() {//清除画布上的所有内容cxtProgress.clearRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight)cxtProgress.draw()},

微信小程序开发之——仿微信视频录制上传相关推荐

基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
微信小程序开发之——录音播放及文件上传下载-理论(1)
一概述小程序录制音频相关的API--recorderManager 小程序播放音频相关的API--InnerAudioContext 文件的上传相关API--wx.uploadFile 文件的下载 ...
微信小程序开发之——录音播放及文件上传下载-示例(2)
一概述开始播放和暂停播放按钮,演示音频的播放和暂停功能开始播放时,先下载服务器上的文件(1.mp3),然后进行播放录音.停止.回放按钮,演示录音API的相关功能上传按钮将录音文件上传到后台h ...
视频教程-微信小程序开发培训教程-微信开发
微信小程序开发培训教程本人计算机专业,毕业工作已经10多年,从事过的行业有,安防,通讯,Gps定位,信息统计分析,互联网电商等,从事过的职位. 代码工程师(使用过的语言C#,PHP,Java),Ap ...
微信小程序之使用vant-3组件Uploader文件上传
效果图: 微信小程序之使用vant-3组件Uploader文件上传 1.把vant的weapp包加进来 2.在app.json文件里面"usingComponents"加载进来才能 ...
微信小程序开发 “婚礼邀请函” 微信小程序入门可看
成品展示: 5个页面我们来讲解哈(上面地图位置随便定的点) 1.首页开发一开始进来显示首页然后默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到 ...
微信小程序开发语言（微信小程序开发教程）详细步骤
微信小程序开发语言开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
uni-app微信小程序开发，引入微信同声传译插件
以下操作我们均以语音合成为例一. 登录微信小程序管理后台添加微信同声传译插件: 正式开始使用微信同声传译小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下 ...

微信小程序开发之——仿微信视频录制上传

一仿微信视频录制效果

二业务说明

三可能遇到的问题(显示录制倒计时和录制进度)

3.1 布局文件(canvas绘制)

3.2 样式文件

3.3 逻辑文件

微信小程序开发之——仿微信视频录制上传相关推荐

最新文章

热门文章

微信小程序开发之——仿微信视频录制上传

一 仿微信视频录制效果

二 业务说明

三 可能遇到的问题(显示录制倒计时和录制进度)

3.1 布局文件(canvas绘制)

3.2 样式文件

3.3 逻辑文件

微信小程序开发之——仿微信视频录制上传相关推荐

最新文章

热门文章

一仿微信视频录制效果

二业务说明

三可能遇到的问题(显示录制倒计时和录制进度)