语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>常用API接入 >>微信小程序 >>微信小程序 录像 录视频

微信小程序 录像 录视频

2019/5/11 7:02:51 0人评论 162次 作者:不善主动的新吖

搜集到一份资料,给大家分享一下,原作者:不善主动的新吖 

WXML页面放置一个camera组件。


<cover-view class="container">

<cover-view class="takePhoto" bindtap="startTakePhoto">

<cover-image class="img" src="网络或本地都可以">

</cover-image></cover-view>

<cover-view class="time">00:00</cover-view>

</cover-view>

</camera>

并且在组件内放置cover-view cover-image组件,用来控制前后摄像头切换、开始和暂停录制、录制进度。


接下来是js页面:


/**

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

*/

onReady: function (res) {

if (wx.createCameraContext()) {

this.cameraContext = wx.createCameraContext('myCamera')

} else {

// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示

wx.showModal({

title: '提示',

content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'

})

}

},

startTakePhoto: function () {

this.cameraContext.startRecord({

success: function (res) {

console.log('成功!')

console.log(res)

},

fail: function (res) {

console.log('失败!')

console.log(res)

},

complete: function (res) {

console.log('complete!')

console.log(res)

},

timeoutCallback: function (res) {

console.log('超时')

console.log(res)

}

})

},

在startRecord中调用timeoutCallback或者在stopRecord中调用success都是可以得到录像暂存地址的,类似这样:

0.jpg

wxss文件


.camera{  

  height:1080rpx;  

  width:  750rpx;  

}  

  

.pause,.time {  

  flex: 1;  

  height: 100%;  

}  

.time {  

  text-align: center;  

  background-color: rgba(0, 0, 0, .5);  

  color: white;  

  line-height: 50px;  

}  

.img {  

  width: 40px;  

  height: 40px;  

  margin: 5px auto;  

}  

--------------------- 


作者:不善主动的新吖 

来源:CSDN 

原文:https://blog.csdn.net/mushui0633/article/details/79339841 

版权声明:本文为博主原创文章,转载请附上博文链接!


上一篇:没有了

下一篇:没有了

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮