背景介绍

本文介绍如何制作人脸打卡等类似功能的实现。
使用nvue+live-pusher来实现。在App端这是成本较低的可以控制样式的方案了
实现了两个版本
基础版本：视频流 => 抓拍照片 => 传给后端
识别版本：视频流 => 抓拍照片 => 检测照片中有无人脸 => 有人脸传给后端

开发前准备

• live-pusher官网
  官方介绍
• 云端打包配置权限
  
• 离线打包权限配置
  安卓离线打包官方教程
  ios离线打包官方教程

基础版获取视频流

• 效果图如下
  
• 创建face.nvue文件

<!-- 人脸识别 -->
<template>
	<view>
		<live-pusher
			id="livePusher"
			ref="livePusher"
			class="livePusher"
			orientation="horizontal"
			url=""
			mode="SD"
			:muted="true"
			:enable-camera="true"
			:auto-focus="true"
			:beauty="0"
			:whiteness="0"
			aspect="3:2"
			@statechange="statechange"
			@netstatus="netstatus"
			@error="error"></live-pusher>

		<button class="btn" @click="start">开始推流</button>
		<button class="btn" @click="pause">暂停推流</button>
		<button class="btn" @click="resume">resume</button>
		<button class="btn" @click="stop">停止推流</button>
		<button class="btn" @click="snapshot">快照</button>
		<button class="btn" @click="startPreview">开启摄像头预览</button>
		<button class="btn" @click="stopPreview">关闭摄像头预览</button>
		<button class="btn" @click="switchCamera">切换摄像头</button>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   };
		},
		onReady() {
   
			this.context = uni.createLivePusherContext("livePusher", this);
			this.startPreview();
		},
		methods: {
   
			statechange(e) {
   
				console.log("statechange:" + JSON.stringify(e));
			},
			netstatus(e) {
   
				console.log("netstatus:" + JSON.stringify(e));
			},
			error(e) {
   
				console.log("error:" + JSON.stringify(e));
			},
			start: function () {
   
				this.context.start({
   
					success: a => {
   
						console.log("livePusher.start:" + JSON.stringify(a));
					}
				});
			},
			close: function () {
   
				this.context.close({
   
					success: a => {
   
						console.log("livePusher.close:" + JSON.stringify(a));
					}
				});
			},
			snapshot: function () {
   
				this.context.snapshot({
   
					success: e => {
   
						console.log(JSON.stringify(e));
					}
				});
			},
			resume: function ()