Boa tarde fórum!
Importei todo o projeto de exemplo (https://www.youtube.com/watch?v=zuN4TNLUz6A) e ao executar a aplicação aparece o seguinte erro…
Webcam.js Error: No supported webcam interface found.
Por favor, alguém poderia me ajudar?
Muito obrigado!
Somente para lembrar os plugins flash e alguns outros serão desabilitado totalmente em 2020.
Conforme o projeto, será criar para deixar de funcionar em 2020.
Procure uma solução de captura de webcam com html5
Obrigado Alexandre! Saberia me dizer onde consigo?
google pesquisar: webcam html5
Amigo, além da descontinuação do flash, a captura de foto pela webcam, tanto no Chrome como no Firefox, não funciona na porta 80, só 443 (https).
Estou utilizando um código bem bacana porém só roda em https… se tiver interesse posso postar
manda ai Claudio…Vamos testando de tudo e melhorando no possivel
obrigado
Opa… Utilizo duas blasnks… Uma capturo a imagem e a outra salvo a imagem…
Segue código:
bl_capturar_img.php:
$var_id_pessoa = [glo_id_pessoa_foto];
?>
Câmera <!--OpenType-->
<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<!--CSS-->
<style>
body{
font-family: sans-serif;
margin: 0;
}
.area{
margin: 10px auto;
box-shadow: 0 10px 100px #ccc;
padding: 20px;
box-sizing: border-box;
max-width: 500px;
}
.area video{
width: 100%;
height: auto;
background-color: whitesmoke;
}
.area textarea{
width: 100%;
margin-top: 10px;
height: 80px;
box-sizing: border-box;
}
.area button{
-webkit-appearance: none;
width: 100%;
box-sizing: border-box;
padding: 10px;
text-align: center;
background-color: #068c84;
color: white;
text-transform: uppercase;
border: 1px solid white;
box-shadow: 0 1px 5px #666;
}
.area button:focus{
outline: none;
background-color: #0989b0;
}
.area img{
max-width: 100%;
height: auto;
}
.area .caminho-imagem{
padding: 5px 10px;
border-radius: 3px;
background-color: #068c84;
text-align: center;
}
.area .caminho-imagem a{
color: white;
text-decoration: none;
}
.area .caminho-imagem a:hover{
color: yellow;
}
</style>
</head>
<body>
<div class="area">
<video autoplay="true" id="webCamera">
</video>
<form target="POST">
<textarea type="text" style="display:none;" id="base_img" name="base_img"></textarea>
<button type="button" onclick="takeSnapShot()">Tirar foto e salvar</button>
<input type="text" name="nome_foto" id="input_nome_foto" style="padding: 8px 5px; font-size: 16px; min-width: 300px; width: 100%; margin-top: 10px; box-sizing: border-box;" placeholder="Título da foto" autofocus="true">
</form>
<img id="imagemConvertida"/>
<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank"></a></p>
<!--Scripts-->
<script>
function loadCamera() {
//Captura elemento de vídeo
var video = document.querySelector("#webCamera");
//As opções abaixo são necessárias para o funcionamento correto no iOS
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
//--
//Verifica se o navegador pode capturar mídia
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: false, video: {
//facingMode: { facingMode: 'user' }, // camera frontal (webcam)
facingMode: { exact: "environment" }, // camera traseira
height: { ideal: 720 }
}})
.then( function(stream) {
//Definir o elemento víde a carregar o capturado pela webcam
video.srcObject = stream;
})
.catch(function(error) {
alert("Oooopps... Falhou :'(");
console.log(error);
});
}
}
function takeSnapShot(){
//Captura elemento de vídeo
var video = document.querySelector("#webCamera");
//Criando um canvas que vai guardar a imagem temporariamente
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
//Desnehando e convertendo as minensões
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//Criando o JPG
var dataURI = canvas.toDataURL('image/jpeg'); //O resultado é um BASE64 de uma imagem.
document.querySelector("#base_img").value = dataURI;
sendSnapShot(dataURI); //Gerar Imagem e Salvar Caminho no Banco
}
function sendSnapShot(base64) {
var request = new XMLHttpRequest();
request.open('POST', '../salvar_img/salvar_img.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function() {
console.log(request);
if (request.status >= 200 && request.status < 400) {
//Colocar o caminho da imagem no SRC
var data = JSON.parse(request.responseText);
//verificar se houve erro
if(data.error){
alert(data.error);
return false;
}
//Mostrar informações
document.querySelector("#imagemConvertida").setAttribute("src", data.img);
document.querySelector("#caminhoImagem a").setAttribute("href", data.img);
document.querySelector("#caminhoImagem a").innerHTML = data.img.split("/")[1];
} else {
alert( "Erro ao salvar. Tipo:" + request.status );
}
};
request.onerror = function() {
alert("Erro ao salvar. Back-End inacessível.");
}
var nome_img = document.getElementById('input_nome_foto').value;
request.send("base_img="+base64+"&nome_img="+nome_img); // Enviar dados
document.location.replace( "../Cons_Pessoas/Cons_Pessoas.php" );
}
loadCamera();
</script>
</div>
</body>
me baseei nesse código:
Boa tarde claudiolohse!
Me interessa sim!!! E me desculpe a falta de conhecimento, como faço para utilizar o https?
Amigo, no meu blog tem o código para você executar suas aplicações em https, clique no link https://scriptcaser.com/scriptcase/como-rodar-o-seu-projeto-do-scriptcase-em-https/ e veja
Boa tarde Scriptcaser!
Copiei o código no Evento OnScriptInit e deu o seguinte erro:
192.168.15.190 enviou uma resposta inválida.
ERR_SSL_PROTOCOL_ERROR
Isso aparece por quê você não tem nenhum certificado ssl instalado no seu domínio. Adicione ao domínio uma exceção de segurança e continue o seu teste.