使用相机 HTML API

Question

我有一个代码笔，我正在尝试做一些类似 Revoluts KYC 文档上传验证界面的事情。

我遇到了 2 个问题。

首先，我希望应用程序要求在 canvas 中心的特定区域内拍摄图像。 canvas 的其余部分应该有类似 rbga(0,0,0,0.3) 或模糊背景的东西。我不知道该怎么做，从来没有深入研究 canvas。所以，我想要在 canvas 上略微覆盖，在它的中心有一个所需的目标区域，用户可以在那里拍摄文档的照片。

接下来是，我在 canvas 上有按钮。

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

我有一个计数器更新已提供的图像数量。我希望状态在每次点击时递增 1，并相应地更新 CTA 按钮的 innerHTML 值。如果提供了 3 个文档，数据将被发送到后端等

const cta = document.querySelector('.cta');
 let counter = 0;

不过这并没有发生。

这是函数的一部分：

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";
 }

很抱歉将 2 个问题合二为一，感谢您对任何一个问题的帮助，尤其是 canvas 部分。

这是代码笔：

https://codepen.io/damPop/pen/GwqxvM?editors=0110

Answer 1

这里正在使用 innerText

我也看了你的 codepen 并在那里测试，也有效。

const cta = document.querySelector('.cta');
let counter = 0;



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

<button class="cta" onclick="takePhoto()">My button</button>

使用相机 HTML API

Using the camera HTML API

javascript

video

canvas

camera-api