Android webview加载页面获取摄像头（h5页面中含有扫描二维码功能）

场景介绍：
Android app中的webview加载含摄像头相关逻辑的H5页面，进行赋权的操作

H5页面调取摄像头识别二维码逻辑：
vue编写

<template>
<div class="getQrcode" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
<div class="box">
<div class="line"></div>
<div class="angle"></div>
</div>
<div class="box2" v-if="isUseTorch">
<div class="track" @click="openTrack">
{{ trackStatus ? '关闭闪光灯' : '打开闪光灯' }}
</div>
</div>
<canvas ref="canvasRef"></canvas>
</div>
</template>
<script setup lang="ts">
import { nextTick, ref } from 'vue'
import jsQr from 'jsqr'
const emit = defineEmits(['success'])
interface IProps {
/** 使用后置还是前置摄像头 */
exact?: 'environment' | 'user'
/** 获取摄像头视频像素 false 正常， true高清 */
definition?: boolean
/** 是否持续监听 */
continue?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
exact: 'environment',
definition: false,
continue: false
})
if (origin.indexOf('https') === -1) throw '请在 https 环境中调用摄像头。'
const canvasRef = ref<HTMLCanvasElement>()
const windowWidth = document.documentElement.clientWidth || document.body.clientWidth
const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
let video: HTMLVideoElement,
canvas2d: CanvasRenderingContext2D,
stream: MediaStream,
track: MediaStreamTrack,
isUseTorch = ref(false)
const trackStatus = ref(false)
nextTick(() => {
video = document.createElement('video')
video.setAttribute('playsinline', 'true')
video.setAttribute('webkit-playsinline', 'true')
video.width = windowWidth
video.height = windowHeight
canvasRef.value!.width = windowWidth
canvasRef.value!.height = windowHeight
canvas2d = canvasRef.value!.getContext('2d')!
openScan()
})
async function openScan() {
const width = transtion(windowHeight)
const height = transtion(windowWidth)
const videoParam = {
audio: false,
video: {
facingMode: { exact: props.exact },
width,
height
}
}
try {
stream = await navigator.mediaDevices.getUserMedia(videoParam)
video.srcObject = stream
video.play()
tick()
track = stream.getVideoTracks()[0]
setTimeout(() => {
const t: any = track.getCapabilities()
isUseTorch.value = t.torch || null
}, 500)
} catch (error) {
console.log('设备不支持,请检查是否允许摄像头权限', error)
throw error
}
}
function tick() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas2d.drawImage(video, 0, 0, windowWidth, windowHeight)
const imageData = canvas2d.getImageData(0, 0, windowWidth, windowHeight)
const codeRes = jsQr(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert'
})
if (codeRes) {
drawLine(codeRes.location.topLeftCorner, codeRes.location.topRightCorner, '#FF3B58')
drawLine(codeRes.location.topRightCorner, codeRes.location.bottomRightCorner, '#FF3B58')
drawLine(codeRes.location.bottomRightCorner, codeRes.location.bottomLeftCorner, '#FF3B58')
drawLine(codeRes.location.bottomLeftCorner, codeRes.location.topLeftCorner, '#FF3B58')
if (codeRes.data) {
getData(codeRes.data)
}
}
}
requestAnimationFrame(tick)
}
interface Point {
x: number
y: number
}
function drawLine(begin: Point, end: Point, color: string) {
canvas2d.beginPath()
canvas2d.moveTo(begin.x, begin.y)
canvas2d.lineTo(end.x, end.y)
canvas2d.lineWidth = 4
canvas2d.strokeStyle = color
canvas2d.stroke()
}
function getData(data: string) {
emit('success', data)
if (!props.continue) return closeCamera()
}
function closeCamera() {
if (stream) {
stream.getTracks().forEach((track) => {
track.stop()
})
}
}
function transtion(number: number) {
return props.definition ? number * 1.6 : number
}
const openTrack = () => {
trackStatus.value = !trackStatus.value
const ww: any = {
advanced: [{ torch: trackStatus.value }]
}
track.applyConstraints(ww)
}
</script>

问题：在app端访问时，扫描摄像头直接出不来显示无权限。

Android部分：
一：AndroidManifest.xml部分
新增相关权限

    <uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

一：webview部分

1，首先在webview 的 initview 方法中添加如下方法

XXPermissions.with(this)
.permission(Permission.READ_EXTERNAL_STORAGE,
Permission.WRITE_EXTERNAL_STORAGE, Permission.CAMERA)
.request(new PermissionCallback() {
@Override
public void onGranted(List<String> permissions, boolean all) {
}
@Override
public void onDenied(List<String> permissions, boolean never) {
super.onDenied(permissions, never);
}
});

2，需要在 BrowserChromeClient 方法中添加如下方法

   @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onPermissionRequest(android.webkit.PermissionRequest request) {
System.out.println("onPermissionRequest");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
request.grant(request.getResources());
}
}