微信小程序录像录视频

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都是可以得到录像暂存地址的，类似这样：

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;
}

微信小程序录像录视频相关推荐

教你如何用手机下载视频号[微信小程序]中的视频
** 如何下载微信视频号**[微信小程序]**中的视频 ** 事情是这样的,因为近期所在工作单位要迎接检查,老板发了几个小程序视频给我,需要我把他下下来,我最初找了一下,并不能够找到下载按钮,就打算改 ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境系统: ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
微信小程序如何接入视频激励广告
微信小程序如何接入视频激励广告这篇文章是以为自己发现流量主并没有什么流量,看广告极大的影响了使用体验,故而完全去掉了视频激励广告的代码,代码就放到博客里面吃灰吧哈哈哈文章目录微信小程序如何接入视 ...
基于微信小程序的短视频管理系统
末尾获取源码开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端框架:VUE 数据库:MySQL5.7 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否 ...
微信小程序填坑视频篇
写了一年小程序,每天接受数万付费用户的考验,踩过小程序的坑数不胜数.先写一下视频篇,写一些会影响到用户正常看视频功能和影响业务主体流程的坑. 1.一些低端设备无法播放高清视频 1080p 需要接入转码 ...
微信小程序 RTMP 音视频通话 ffmpeg_WebRTC与微信小程序音视频互通方案设计与实现...
背景在之前的WebRTC实时音视频通话之语音通话设计与实践中介绍了58 TEG部门基于 WebRTC 的实时音视频通话解决方案. 考虑到腾讯微信的小程序平台提供了音视频通话与直播的支持,如果能打通基 ...

微信小程序录像录视频

微信小程序录像录视频相关推荐

最新文章

热门文章

微信小程序 录像 录视频

微信小程序 录像 录视频相关推荐

最新文章

热门文章

微信小程序录像录视频

微信小程序录像录视频相关推荐