Trying To Pass A Javascript Variable Named 'context' To An HTML Form In Django

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>

You don’t pass a variable to “an HTML file”. You submit data to a Django view. That Django view returns a response to the browser. That response may or may not include HTML. (e.g. it might just be JSON in the case of an AJAX call.)

I can’t be more specific here because it’s not clear what you’re really trying to accomplish at this point.

Is the end result of clicking this button going to cause a whole page refresh? If so, then you may want to submit the data as POST data to the view. Otherwise, this might be better suited as an AJAX call to submit the data as a JSON object.

Also, a JavaScript context may not be directly usable by Django without some work - you might want to convert it to an image, and send the image data only.

You might also want to send the image data as if it were a file being uploaded and not just a form field.

You’ll also want to fully understand what you’re going to do with this data after it has been submitted. (For example, if your JavaScript is sending this as a JPG, but your Django view needs it as a PNG, you’re creating more work for yourself than if you just had JavaScript submit it as a PNG.)

So you have a few options to be considered before deciding on a final approach.