Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Função de tirar foto não funciona

Referente ao curso JavaScript: validando formulários, no capítulo Capturando fotos e atividade Captura

por Estudante
| 105.6k xp | 121 posts

Quando clico no botão de tirar foto, nada acontece :(

Meu código:

const rostinho = document.querySelector('[data-video-botao]')
const textoRostinho = document.querySelector('.formulario__texto')
const camera = document.querySelector('[data-camera]')
const video = document.querySelector('[data-video]')
const botaoTirarFoto = document.querySelector('[data-tirar-foto]')
const canvas = document.querySelector('[data-vide-canvas]')
const mensagem = document.querySelector('[data-mensagem]')

rostinho.addEventListener('click', async function () {
    // requer acesso à câmera do usuário
    const iniciarVideo = await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    rostinho.style.display = 'none'
    textoRostinho.style.display = 'none'
    camera.style.display = 'block'

    video.srcObject = iniciarVideo
})

botaoTirarFoto.addEventListener('click', () => {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    
    imagemURL = canvas.toDataURL('image/jpeg')

    camera.style.display = 'none'
    mensagem.style.display = 'block'
})
2 respostas
por Renan Lima
| 3697.6k xp | 7820 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, estudante.

Tudo bem?

Pelo código que você compartilhou, parece que a função de tirar foto não está funcionando. Vamos analisar o código para encontrar o problema.

Primeiro, verifique se você adicionou corretamente o data-tirar-foto como atributo no botão de tirar foto no seu arquivo HTML. Certifique-se de que o seletor botaoTirarFoto está selecionando corretamente o botão.

Em seguida, verifique se você adicionou corretamente o data-video-canvas como atributo no elemento canvas no seu arquivo HTML. Certifique-se de que o seletor canvas está selecionando corretamente o elemento.

Também verifique se você adicionou corretamente o data-mensagem como atributo no elemento onde você deseja exibir a mensagem de conclusão da captura. Certifique-se de que o seletor mensagem está selecionando corretamente o elemento.

Além disso, verifique se você está chamando a função addEventListener corretamente para o evento de clique no botão de tirar foto. Certifique-se de que o código dentro da função está sendo executado corretamente.

Por fim, verifique se você está exibindo corretamente a imagem capturada no elemento canvas. Certifique-se de que o código canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) está sendo executado corretamente.

Espero ter ajudado, qualquer dúvida manda aqui, bons estudos!

solução!
por Estudante
| 105.6k xp | 121 posts

Descobri o erro: havia um erro na definição da constante "canvas". Estava assim:

const canvas = document.querySelector('[data-vide-canvas]')

Faltava um "o" em "video". O certo seria:

const canvas = document.querySelector('[data-video-canvas]')

Como descobri: peguei o texto já pronto do projeto e comparei com o meu no site https://www.diffchecker.com/text-compare/