uniapp+h5微信浏览器，调用摄像头生成九宫格辅助线

 安卓和ios均适用

<template>
	<view>
		<view class="" style="width: 100vw;height: 100vh;background-color: #000;" v-if="!imageUrl">
			<video style="width: 100vw;height:calc(100vh - 240rpx);" object-fit="fill" id="video" playsinline autoplay
				muted></video>
			<view class=""
				style="width: 100vw;height: 100vh;background-color: transparent;opacity: 1;position: absolute;top: 0; left: 0;z-index: 1;">
				<!-- <view class="flex justify-center align-center"
					style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 2;">
					<image :src="qjkImgSrc" mode="widthFix" style="width: 600rpx;margin-top: -200rpx;"></image>
				</view> -->
				<view class="flex justify-center align-center"
					style="width: 100%;height:calc(100vh - 240rpx);position: absolute;top: 0; left: 0;z-index: 3;">
					<!-- <image :src="qjtxkImgSrc" mode="widthFix" style="width: 500rpx;margin-top: -200rpx;"></image> -->
					<image :src="qjtxkImgSrc" style="width: 100%;height: 100%;"></image>
				</view>

				<view class="flex justify-center"
					style="width: 100vw;height: 100vh;position: absolute;top: 0; left: 0;z-index: 5;">
					<!-- <view class=""
						style="position: absolute;bottom: 88rpx;left: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;">
						<uni-icons type="close" :size="32" @click="handlePhotographCloseClick">
						</uni-icons>
					</view> -->
					<view class="outer-ring" style="position: absolute;bottom: 40rpx;left: 50%;margin-left: -50px;"
						@click="handlePhotographClick">
						<view class="middle-ring">
							<view class="inner-ring"></view>
						</view>
					</view>
					<!-- <view class=""
						style="position: absolute;bottom: 88rpx;right: 68rpx; color: #fff;font-weight: bold;background: #fff;border-radius: 16rpx;">
						<uni-icons type="folder-add" :size="32" @click="handleAddPhotographClick">
						</uni-icons>
					</view> -->
				</view>


			</view>
		</view>

		<view v-else>
			<image style="width: 300px;" :src="imageUrl"></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 背景透明的取景框图片
				// qjkImgSrc: "/static/images/qjk.png",
				// 背景透明的头像框图片
				qjtxkImgSrc: "/static/images/biaochi.png",
				imageUrl: "",
				// 媒体流，用于关闭摄像头
				mediaStreamTrack: null,
			};
		},
		onLoad() {
			this.invokingCamera();
		},
		onUnload() {
			this.handlePhotographCloseClick();
		},
		methods: {
			invokingCamera() {
				const self = this;
				// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。

				// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
				if (navigator.mediaDevices === undefined) {
					navigator.mediaDevices = {};
				}

				// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
				// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
				if (navigator.mediaDevices.getUserMedia === undefined) {
					navigator.mediaDevices.getUserMedia = function(constraints) {
						// 首先，如果有getUserMedia的话，就获得它
						const getUserMedia =
							navigator.getUserMedia ||
							navigator.webkitGetUserMedia ||
							navigator.mozGetUserMedia;

						// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
						if (!getUserMedia) {
							return Promise.reject(
								new Error("getUserMedia is not implemented in this browser")
							);
						}

						// 否则，为老的navigator.getUserMedia方法包裹一个Promise
						return new Promise(function(resolve, reject) {
							getUserMedia.call(navigator, constraints, resolve, re