Javascript 使用摄像头HTML API

我有一个代码笔，我试图做一些像Revolutions KYC文档上传验证接口

我面临两个问题

首先，我希望应用程序要求在画布中心的特定区域内拍摄图像。画布的其余部分应具有类似rbga0,0,0,0.3或模糊背景的内容。我不知道如何做到这一点，从来没有深入研究过画布。因此，我希望在画布上稍微覆盖一层，在画布中心有一个所需的目标区域，用户可以在该区域拍摄文档

下一件事是，我有画布上的按钮

<button class="cta" onClick="takePhoto()">Take Photo of your ID front please</button>

然而，这并没有发生

以下是函数的一部分：

function takePhoto() {

// played the sound
counter += 1;  //  this happens
cta.innerHMTL = "" // this doesnt
if( counter === 0) {  // nope
cta.innerHMTL = "Take a photo of your ID front please";
}
 if( counter === 1) { //nope
 cta.innerHMTL = "Take a photo of your ID back please";
 }
 if( counter === 2) {
 cta.innerHMTL = "Please take a selfie holding the ID document";
 }

很抱歉在一个问题中出现了两个问题，我感谢您在这两个方面的帮助，尤其是画布部分

这是代码笔：

在这里，它正在使用innerText

我也看过你的代码笔，在那里测试过，也很有效

const cta=document.querySelector'.cta'； 设计数器=0； 功能拍照{ //播放声音 计数器+=1；//发生这种情况 cta.innerText=完成； 如果计数器===0{ cta.innerText=请为您的身份证正面拍照； } 如果计数器===1{ cta.innerText=请为您的身份证拍张照片； } 如果计数器===2{ cta.innerText=请拿着ID文件自拍； } } 我的按钮输入文本。不允许使用HTML内部按钮。允许的内容措辞内容，但不得有交互内容

function takePhoto() {

// played the sound
counter += 1;  //  this happens
cta.innerHMTL = "" // this doesnt
if( counter === 0) {  // nope
cta.innerHMTL = "Take a photo of your ID front please";
}
 if( counter === 1) { //nope
 cta.innerHMTL = "Take a photo of your ID back please";
 }
 if( counter === 2) {
 cta.innerHMTL = "Please take a selfie holding the ID document";
 }