Я попытался использовать холст, чтобы нарисовать прямоугольник 100 x 100 над центром изображения, полученного с веб-камеры (используя «navigator.mediaDevices.getUserMedia») и HTML 5 тег «video».
Для захвата изображения с веб-камеры я использую:
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
.then( function(stream) {
//Definir o elemento víde a carregar o capturado pela webcam
video.srcObject = stream;
return stream;
})
.catch(function(error) {
alert("Error on open device");
});
}
и для отображения этого изображения в строке, я просто использую:
<video autoplay="true" id="webCamera">
</video>
Как нарисовать прямоугольник над изображение напечатано HTML 5 тегами видео?
Мой код:
камера. html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!--Título-->
<title>Camera Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Apenas um teste"/>
<!--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-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="area">
<video autoplay="true" id="webCamera">
</video>
<form target="POST">
<textarea type="text" id="base_img" name="base_img"></textarea>
<button type="button" onclick="takeSnapShot()">Snapshot</button>
</form>
<img id="imagemConvertida"/>
<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank"></a></p>
<!--Scripts-->
<script src="script.js"></script>
</div>
</body>
</html>
скрипт. js
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: 'user'}})
.then( function(stream) {
//Definir o elemento víde a carregar o capturado pela webcam
video.srcObject = stream;
return stream;
})
.catch(function(error) {
alert("Error on open device");
});
}
}
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', 'save_photos.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( "Error on save. Status:" + request.status );
}
};
request.onerror = function() {
alert("Error on save. Back-End fail.");
}
request.send("base_img="+base64); // Enviar dados
}
loadCamera();
стиль. css
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;
}