小程序模板下载与定制平台
客服QQ客服QQ 客服微信客服微信 公众号公众号

微信小程序实现点击拍照长按录像的开发教程

微信小程序实现点击拍照长按录像的方法。

.wxml代码:

<!-- 相机 pages/camera/camera.wxml-->

<!-- 相机 -->

<camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" style="width: {{cameraWidth}}px; height: {{cameraHeight}}px;">

<!-- 拍完显示照片 -->

<cover-image wx:if="{{image1Src}}" src='{{image1Src}}'></cover-image>

<cover-view>

<!-- 拍照按钮 -->

<button id='btn-photo-video' bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLongPress" bindtap="handleClick">

点击/长按</button>

</cover-view>

</camera>

<video wx:if="{{videoSrc}}" src="{{videoSrc}}" controls></video>

.wxss代码:

/* pages/camera/camera.wxss */

cover-image,video {

margin-top:100%;

position: absolute;

width: 200rpx;

height: 200rpx;

}

#btn-photo-video{

/* position: absolute; */

margin-top:100%;

width: 242rpx;

left: 2%;

}

.js代码:

// pages/camera/camera.js

Page({

/**

* 页面的初始数据

*/

data: {

cameraHeight: '',

cameraWidth: '',

image1Src: '',

videoSrc: '',

num: 0,

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

//调用设置相机大小的方法

this.setCameraSize();

this.ctx = wx.createCameraContext();

console.log(this.lijiajun)

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

},

/**

* 获取系统信息 设置相机的大小适应屏幕

*/

setCameraSize() {

//获取设备信息

const res = wx.getSystemInfoSync();

//获取屏幕的可使用宽高,设置给相机

this.setData({

cameraHeight: res.windowHeight,

cameraWidth: res.windowWidth

})

console.log(res)

},

/**

*拍照的方法 

*/

takePhoto() {

this.ctx.takePhoto({

quality: 'high',

success: (res) => {

this.setData({

image1Src: res.tempImagePath

})

},

fail() {

//拍照失败

console.log("拍照失败");

}

})

},

/**

* 开始录像的方法

*/

startShootVideo() {

console.log("========= 调用开始录像 ===========")

this.ctx.startRecord({

success: (res) => {

wx.showLoading({

title: '正在录像',

})

},

fail() {

console.log("========= 调用开始录像失败 ===========")

}

})

},

/**

* 结束录像

*/

stopShootVideo() {

console.log("========= 调用结束录像 ===========")

this.ctx.stopRecord({

success: (res) => {

wx.hideLoading();

this.setData({

videoSrc: res.tempVideoPath,

})

},

fail() {

wx.hideLoading();

console.log("========= 调用结束录像失败 ===========")

}

})

},

//touch start 手指触摸开始

handleTouchStart:   function(e)  {    

this.startTime  =  e.timeStamp;    

console.log(" startTime = "  +  e.timeStamp);  

console.log(" 手指触摸开始 " ,  e);  

console.log(" this " , this);  

},

//touch end 手指触摸结束

handleTouchEnd:   function(e)  {    

this.endTime  =  e.timeStamp;    

console.log(" endTime = "  +  e.timeStamp);  

console.log(" 手指触摸结束 ", e);

//判断是点击还是长按 点击不做任何事件,长按 触发结束录像

if (this.endTime - this.startTime > 350) {

//长按操作 调用结束录像方法

this.stopShootVideo();

}

},

/**

* 点击按钮 - 拍照

*/

handleClick:   function(e)  {    

console.log("endTime - startTime = "  +  (this.endTime  -  this.startTime));        

if  (this.endTime  -  this.startTime  <  350)  {    

console.log("点击");

//调用拍照方法

this.takePhoto();    

}

},

/**

* 长按按钮 - 录像

*/

handleLongPress:   function(e)  {

console.log("endTime - startTime = "  +  (this.endTime  -  this.startTime));

console.log("长按");

// 长按方法触发,调用开始录像方法

this.startShootVideo();

},

})

这样就可以了,直接放到模板里面使用吧。

TAG标签:小程序拍照 小程序录像

上一个:微信小程序使用button实现分享的开发教程
下一个:微信小程序想要实现下拉刷新怎么开发

小程序模板

免责声明:本站资源均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑模板 版权所有 鲁ICP备20017802号

展开