如何在小程序中实现录像功能

字数统计: 1.2k阅读时长: 4 min
2018/11/09 Share

上一篇文章中,我们介绍了如何在小程序中实现拍照功能,有小伙伴询问,能不能在小程序内实现录像功能呢?原来在相机API中,除了takePhotoAPI,还有其他API可以使用,这篇教程,我们将介绍录像API的使用。

在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。

相机组件的使用

小程序调用相机很简单,只用一行代码即可实现,修改你的index.wxml文件,为如下代码。

1
<camera style="width: 100%; height: 450px;"></camera>

当然这行代码仅仅实现了相机在小程序内显示,无法实现更多功能,我们可以参考官方文档来实现更多功能。

属性名 类型 默认值 说明
mode String normal 有效值为 normal, scanCode
device-position String back 前置或后置,值为front, back
flash String auto 闪光灯,值为auto, on, off
bindstop EventHandle 摄像头在非正常终止时触发,如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发
bindscancode EventHandle 在扫码识别成功时触发,仅在 mode=”scanCode” 时生效

参考上表,我们来实现一个“镜子”的小功能,打开小程序,自动将摄像头转换为前置摄像头,然后默认打开闪光灯,修改代码如下。

1
<camera device-position="front" flash="on" style="width: 100%; height: 450px;"></camera>

通过上面的代码,就可以将小程序变为“镜子”。

录像功能API的使用

我们已经学会了使用相机的基本组件的调用,但是在表中我们并没有看到录像等功能的配置。为了前后端分离,小程序将录像等功能封装成了API,我们需要在camera组件中调用相关函数才能实现录像功能。这里我们需要调用两个函数,分别为开始录像的startRecord和停止录像的stopRecord,最后,我们通过回调函数存储相关数据,关于录像API的参数,我们可以参考下表。

startRecord

属性 类型 默认值 是否必填 说明
timeoutCallback function 超过30s或页面 onHide 时会结束录像
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

stopRecord

属性 类型 默认值 是否必填 说明 支持版本
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

回调函数

属性 类型 说明 支持版本
tempThumbPath string 封面图片文件的临时路径
tempVideoPath string 视频的文件的临时路径

参考上表,我们要用到JavaScript语言对相机API进行封装,首先,我们打开index.js文件,在page()中,写出下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  startRecord() {
this.ctx.startRecord({
success: () => {
console.log('startRecord')
}
})
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
})
}
})
},
onLoad: function (options) {
this.ctx = wx.createCameraContext()
},

这段代码中,我们设定了两个函数startRecord()stopRecord(),在startRecord()函数中,调用startRecordAPI,启动录像功能。在stopRecord()函数中,调用stopRecord停止录像,并将录像暂存在res.tempVideoPath中,同时暂存临时封面tempThumbPath。接下来,我们撰写前端页面,打开index.wxml

1
2
3
4
5
6
7
8
<camera flash="on" style="width: 100%; height: 450px;"></camera>
<view class="btn-area">
<button type="primary" bindtap="startRecord">开始录像</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">结束录像</button>
</view>
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>

index.wxml文件中,我们首先定义camera组件,然后通过button按钮去调用刚才撰写的startRecord()函数和stopRecord()函数。之后函数返回videoSrc链接,让前台video组件去调用。

1541753735626

现在,就可以实现在小程序端进行录像了!

总结

你学会了嘛?赶快去体验下吧!后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原文作者:张诚

原文链接:https://www.techeek.cn/wx-startRecord

发表日期:November 9th 2018, 4:35:48 pm

更新日期:November 9th 2018, 5:39:36 pm

版权声明:本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可,转载请注明出处。

CATALOG
  1. 1. 相机组件的使用
  2. 2. 录像功能API的使用
  3. 3. 总结