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

字数统计: 1.2k阅读时长: 4 min

 2018/11/09 

上一篇文章中，我们介绍了如何在小程序中实现拍照功能，有小伙伴询问，能不能在小程序内实现录像功能呢？原来在相机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()中，写出下面的代码。

  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。

<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