如何在小程序中實現錄像功能

上一篇文章中，我們介紹了如何在小程序中實現拍照功能，有小夥伴詢問，能不能在小程序內實現錄像功能呢？原來在相機API中，除了takePhotoAPI，還有其他API可以使用，這篇教程，我們將介紹錄像API的使用。

在教程開始之前，需要搭建搭建好小程序的基礎開發環境，關於如何配置，大家可以參考如何入門小程序開發這篇文章的入門教程。

相機組件的使用

小程序調用相機很簡單，只用一行代碼即可實現，修改你的index.wxml文件，爲如下代碼。

<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" 時生效

參考上表，我們來實現一個“鏡子”的小功能，打開小程序，自動將攝像頭轉換爲前置攝像頭，然後默認打開閃光燈，修改代碼如下。

<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組件去調用。

現在，就可以實現在小程序端進行錄像了！