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

上一篇文章中,我们介绍了如何在小程序中实现拍照功能,有小伙伴询问,能不能在小程序内实现录像功能呢?原来在相机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组件去调用。

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

总结

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数说工作室

【SAS Says】基础篇:1. SAS软件入门

本系列【基础篇】已经完全完结了,方便大家阅读学习,我们合并在成一个专辑,目录如下: 1. SAS软件入门 2. 读取数据 3. 描述数据 4. ODS的使用 5...

5218
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

2583
来自专栏码洞

不安分的 Go 语言开始入侵 Web 前端领域了

从 Go 语言诞生以来,它就开始不断侵蚀 Java 、C、C++ 语言的领地。今年下半年 Go 语言发布了 1.11 版本,引入了 WebAssembly 技术...

921
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

2816
来自专栏即时通讯技术

金蝶随手记团队分享:还在用JSON? Protobuf让数据传输更省更快(实战篇)

本文接上篇《金蝶随手记团队分享:还在用JSON? Protobuf让数据传输更省更快(原理篇)》,以iOS端的Objective-C代码为例,向您演示如何使用P...

832
来自专栏用户2442861的专栏

工欲善其事,可能会有用的Clion技巧

半年前我开始用 Clion,顺带着写了一篇心得记录使用 CLion 的技巧,没想到发布在简书后浏览量还是挺高的,居然还获得了人生中第一笔真正的打赏,感动之余也...

5002
来自专栏ml

CEF使用的几个注意点

    CEF为chrome浏览器的切入其他浏览器中的轻量级框架。 开发的客户端的时候,这是作为界面显示的首先,可以增强客户的易变性,可塑性。 在开发的过程中(...

60410
来自专栏ShaoYL

iOS逆向实战与工具使用(微信添加好友自动确认)

3248
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

3657
来自专栏ShaoYL

iOS逆向实战与工具使用(微信添加好友自动确认)

5416

扫码关注云+社区