菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
451
0

微信小程序实现点击拍照长按录像功能的实现代码

原创
05/13 14:22
阅读数 284911

.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) {
  //调用设置相机大小的方法www.cppcns.com
  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() {
  //获BQPtvBuy取设备信息
  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.stahttp://www.cppcns.comrtRecord({
   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();
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现点击拍照长按录像功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

本文标题: 微信小程序实现点击拍照长按录像功能的实现代码
本文地址: http://www.cppcns.com/wangluo/javascript/266222.html

发表评论

0/200
451 点赞
0 评论
收藏
为你推荐 换一批