Hi, I am using JavaScript code to access my laptop’s camera, and then I am using HTML code to have the user click a button which takes a picture, and then sends that picture to another HTML template which is then rendered.
In the source code below, the button that needs to accomplish this when clicked is called “Camera”.
Can someone please explain how I can pass the Javascript variable called ‘context’ to another HTML file after clicking the button called “Camera”. I appreciate any help. Thank you.
I am attaching an image that shows how the facial-login.html template looks inside the browser (with the laptop webcam covered).
The following is the source code inside the facial-login.html file:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Webcam</title>
<style>
.video-wrap
{
/*Setting the margin to 'auto' will position the box to be in the exact center
of the web page.*/
margin: auto;
left: 0;
right: 0;
position: absolute;
/*We are setting the dimensions of the box that will contain the camera.*/
width: 450px;
height: 450px;
border: 10px solid greenyellow;
text-align: center;
/*width/height of box = 430px(camera width) + 10px*2 (total border width) = 450px*/
}
.camera-button
{
position: relative;
top: 460px;
text-align: center;
}
h2
{
text-align: center;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'facial-login-style.css' %}" type="text/css"/>
</head>
<body>
<div class="text">
<h2>Image Recognition Login</h2>
</div>
<!-- <div class="facial-login-video-background">
<video autoplay loop muted plays-inline class="facial-video">
<source src="{% static 'video.mp4' %}" type="video/mp4">
</video>
</div> -->
<div class="video-wrap">
<video id="video" playsinline autoplay muted></video>
</div>
<div class="camera-button">
<span id="newline">
<font size="+2" style="color:greenyellow">Click the
<span class="glyphicon glyphicon-camera"></span> button to take a facial
image of yourself (be sure to look straight into the camera).</font>
</span>
<form action="facial-login-result" method="POST" id="systemForm">
{% csrf_token %}
<div id="snap">
<button type="submit" name="system" value="{{ context }}" form="systemForm">
<a href="{% url 'facial-login-result' %}" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span> Camera
</a>
</button>
</div>
</form>
<a href="{% url 'facial-login-result' %}" class="btn btn-info btn-lg"> -->
<button onClick="myFunction()">Click me</button>
</a>
</div>
<span id="newline"></span>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<canvas id="canvas" width="430" height="430"></canvas>
<p id="demo"></p>
<script>
'use strict'; // Use the 'strict' mode of Javascript.
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMsgElement = document.getElementById('span#ErrorMsg');
const constraints =
{
audio: true,
video:
{
width: 430, height: 430
}
};
async function init()
{
try
{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
}
catch(e)
{
errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;
}
}
function handleSuccess(stream)
{
window.stream = stream;
video.srcObject = stream;
}
init();
var context = canvas.getContext('2d');
function myFunction()
{
document.getElementById("demo").innerHTML = context;
}
snap.addEventListener("click", function()
{
// drawImage(image, xCoordinate, yCoordinate, recWidth, recHeight)
context.drawImage(video, 23, video.height, 430, 430);
});
</script>
</body>
</html>