Using the camera HTML API

Question

I have a codepen where I am trying to do something like Revoluts KYC doc upload verification interface.

I struggle with 2 issues.

First, I want the the application to require the image being taken within a certain area in the center of the canvas. The remainder of the canvas should have something like an rbga(0,0,0,0.3) or blurred background. I have no idea how to do this, never looked deep into canvas. SO, I want a slight overlay over the canvas, with a required targed area in the center of it where the use can take a picture of a doc.

The next thing is , I have the button on the canvas.

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

I have a counter updating the count of how many images have been provided. I want the state to be incremented by 1 on every click and the innerHTML value of the CTA button to be updated accordingly. IF 3 docs have been provided, the data is being sent off to the back end etc.

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

This does not happen, though.

Here is the part of the function:

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

Sorry for the 2 questions in one, I appreciate help on either, especially the canvas part.

Here is the codepen:

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

try `innerText`. `HTML` inside button not allowed. "Permitted content Phrasing content but there must be no Interactive content" — Bibberty, Feb 06 '19 at 01:05

score 1 · Accepted Answer · answered Feb 06 '19 at 01:10

Here it is working using innerText

I also looked at your codepen and tested there, also works.

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>

Using the camera HTML API

1 Answers1