Использование HTML API камеры - PullRequest
Новая
       24

Использование HTML API камеры

0 голосов
/ 06 февраля 2019

У меня есть кодовое окно, где я пытаюсь сделать что-то вроде Revoluts KYC doc для подтверждения загрузки документов.

Я борюсь с двумя проблемами.

Во-первых, я хочу, чтобы приложение требовалоизображение берется в определенной области в центре холста.Оставшаяся часть холста должна иметь что-то вроде rbga (0,0,0,0.3) или размытый фон.Я понятия не имею, как это сделать, никогда не смотрел вглубь холста.Итак, я хочу небольшое наложение поверх холста, с необходимой областью помеченных в центре, где использование может сделать снимок документа.

Следующее, у меня есть кнопка на холсте. 

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

У меня есть счетчик, обновляющий количество предоставленных изображений.Я хочу, чтобы состояние увеличивалось на 1 при каждом нажатии, а значение innerHTML кнопки CTA обновлялось соответствующим образом.Если предоставлено 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 вопроса в одном, я ценю помощь по обоим вопросам, особенно по части холста.

Вот кодекс:

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

1 Ответ

0 голосов
/ 06 февраля 2019

Здесь он работает, используя innerText

Я также посмотрел ваш кодовый блок и протестировал там, также работает. 

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>
...