小程序提供标签和createCameraContext API，使开发人员可以拍摄照片和录像。该功能非常强大。

我们主要使用此录像功能，并解释遇到的问题和需要注意的地方：

（（我是用芋头开发的，因此以下一些代码片段也是芋头格式的，但是芋头的API调用方法与微信native的API调用方法几乎相同，并且标记仅更改为标签的写作，短链接线形更改为驼峰式写作形式）

首先对问题进行总结，然后在下面添加一些代码片段（如果您通过上面的内容解决了问题，则无需查看下面的长代码片段）：

1.如果要自定义Camera上的元素，则只能使用CoverView和CoverImage标签。尽管我们发现使用View可以，但是CoverView仍然有一些限制，因此我只是直接使用官方文档上面的措辞。

2.如果设置了CoverView的宽度，则显示的文本可能会导致ios上的文本不完整。为此，我们使用了一种推测方法并添加了解决方案。在小程序社区中看到了这个问题有些人使用地图来解决它，但是这种方式感觉很奇怪，在速度稍慢微的手机上，您可以看到文本是逐词书写的，所以我放弃哪种方法并选择此解决方案程序。

3.让我们谈谈startRecord的timeoutCallback。有些人可能会错过这个问题（无论如何我还是想念它）。这是一点。还有一点是，当触发timeoutCallback时，不同系统的手机上面的性能是不一样的，需要引起注意。在Android手机上，执行timeoutCallback后，在执行stopRecord之后将报告错误“ operateCamera：fail：未记录”，而在ios手机上，在执行timeoutCallback之后将不会执行stopRecord。 ，因此每个人在编码时都应考虑处理这种情况。

以下是整个过程的相对关键的代码片段：

1.首先，创建摄影机上下文cameraContext对象。 （我是在构造函数中创建的），您必须确保页面上只有一个标签，然后这个cameraContext对象才会与之关联

this.cameraCtx = Taro.createCameraContext();

2.接下来，我们写标签的内容。我们的要求是自定义相机上的某些元素，所以它相对复杂，看起来像这样。

{showSquare && 没思路？去看看别人怎么拍的  }

3.以下是重点内容，用于控制视频记录和结束记录。我们的要求要求在录制时显示录制时间，并给定最大时间值，视频可以自行结束录制，也可以手动停止录制。

接下来，解释代码：

1）录制开始和结束之前的startDelay，stopDelay用于防止频繁的按钮单击，因为无论是开始录制还是结束录制都是相对耗时的操作，因此频繁单击可能会导致其他问题

2）然后，我编写了代码以通过参考文档开始和结束记录。在这里，我将重点介绍startRecord中的timeoutCallback。 小程序文档指出，小程序最多只能录制30秒的视频，因此具有超时回调功能，一旦视频超时，将被触发，但是超时视频和stopRecord在不同手机上的执行方式会有所不同系统，并且在Android手机上将报告错误“ operateCamera：fail：未录制”，因为ios StopRecord不会直接在手机上执行，因此，在此块中我要做的是在此处执行一些stopRecord成功方法超时到期。如果您手动停止记录，请执行下面定义的stopRecord（注意，不是Taro.stopRecord哦）

startRecord = () => { const { startDelay } = this.state; if (startDelay) { return; } this.setState({ startDelay: true }, () => { this.cameraCtx.startRecord({ success: () => { this.setState({ cameraState: RECORDING, recordText: TEXT_RECORDING }, () => { this.recordTimer = setInterval(() => { this.setState({ timer: this.state.timer + 1 }); }, 1000); }); }, fail: (err) => { console.log('开始录制失败', err); }, complete: () => { this.setState({ startDelay: false }); }, timeoutCallback: (res) => { // TODO: 都是30，先不做判断了 this.setState({ cameraState: COMPLETE, currentMedia: { img: res.tempThumbPath, video: res.tempVideoPath, duration: 30 }, stopDelay: false }); } }) }); } stopRecord = () => { const { stopDelay } = this.state; if (stopDelay) { return; } this.setState({ stopDelay: true }, () => { const { timer } = this.state; if (timer < MIN_DURATION) { showToast('录制时长不得小于' + MIN_DURATION + '秒'); return; } clearInterval(this.recordTimer); this.cameraCtx.stopRecord({ success: (res) => { this.setState({ cameraState: COMPLETE, currentMedia: { img: res.tempThumbPath, video: res.tempVideoPath, duration: timer } }) }, fail: (err) => { console.log('结束录制失败', err); }, complete: () => { this.setState({ stopDelay: false }); } }) }); }

整个过程大概是这样~~