En este artículo, compartiremos un fragmento de código JavaScript muy simple a través del cual puede integrar fácilmente su cámara web en una página web HTML5. Ahora, un día, la mayor parte del sitio web ofrece integración de cámara web en tiempo real para cargar imágenes de perfil o cualquier paso de verificación de cuenta.
Primero, cree una estructura DOM HTML usando el siguiente fragmento de código. Para integrar la cámara web con la página web, usaremos la etiqueta HTML <video>. Usaremos Bootstrap y jQuery para hacer que nuestra página web sea interactiva.
<video id="video" width="100%" height="100%" autoplay></video>
Ejemplo: este ejemplo utiliza HTML5, Bootstrap, JavaScript y jQuery para integrar la cámara web con la página.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Integrate Webcam using
JavaScript on HTML5 ?
</title>
<link rel="stylesheet" href="css/style.css">
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<h5 class="card-header h5 text-center">
HTML 5 & JS live Cam
</h5>
<div class="card-body">
<div class="booth">
<video id="video" width="100%"
height="100%" autoplay>
</video>
</div>
<div class="text-right">
<a href="#!" class="btn btn-danger"
onClick="stop()">
Stop Cam
</a>
<a href="#!" class="btn btn-success"
onClick="start()">
Start Cam
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var stop = function () {
var stream = video.srcObject;
var tracks = stream.getTracks();
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
track.stop();
}
video.srcObject = null;
}
var start = function () {
var video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
}).catch(function (error) {
console.log("Something went wrong!");
});
}
}
$(function () {
start();
});
</script>
</body>
</html>
Producción:
Fuente Git: https://github.com/gauravnewton/html5-js-live-cam
Publicación traducida automáticamente
Artículo escrito por gauravkumar105 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA