Live Webcam Feed Capture and Upload

  • Resolved abidefiler

    (@abidefiler)


    1 year, 1 month ago

    My Goal: A live webcam feed on my Formidable Form Page, with a button to capture a picture from the webcam feed, then to be able to submit the picture along with other fields in the form. Currently: the live feed is working, the capture button is functioning, but the file image is not uploading with the submit button.

    I’m using this code html code in my html field on my Form Page:

    <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Display Webcam Stream</title> <style> #container { margin: 0px auto; width: 520px; height: 395px; border: 10px #333 solid; } #videoElement { width: 500px; height: 375px; background-color: #667; } </style> </head> <body> <div id=”container”> <video autoplay=”true” id=”videoElement”></video> </div> <button id=”captureButton” type=”button”>Capture Picture</button> <!– Formidable Forms Upload field with field ID 603 –> <input type=”file” id=”uploadField603″ accept=”image/*”> </body> </html>

    I’m using this javascript in the Scripts in Footer section of the Insert Headers and Footers Plugin

    <script>
// Declare the video variable in a higher scope
var video;

document.addEventListener("DOMContentLoaded", function() {
    video = document.querySelector("#videoElement");

    if (video && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.log("Something went wrong: " + error);
            });
    }

    var captureButton = document.querySelector("#captureButton");
    if (captureButton) {
        captureButton.addEventListener("click", function () {
            capturePicture();
        });
    }
});

function capturePicture() {
    if (!video) {
        console.log("Video element is not defined.");
        return;
    }

    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert the canvas data to a Blob
    canvas.toBlob(function(blob) {
        // Create a File object
        var capturedFile = new File([blob], 'captured.jpg', { type: 'image/jpeg' });

        // Set the value of the Formidable Forms Upload field with field ID 603
        var uploadField = document.querySelector("#uploadField603");
        if (uploadField) {
            // Create a new DataTransfer object
            var dataTransfer = new DataTransfer();

            // Add the File object to the DataTransfer
            dataTransfer.items.add(capturedFile);

            // Assign the DataTransfer to the input field
            uploadField.files = dataTransfer.files;
        }

        console.log("Image captured and set in the Formidable Forms Upload field.");
    }, 'image/jpeg'); // You can choose a different format
}
</script>

    The capture picture button captures a file next to the choose file button called captured.jpg But, I can also select a separate picture file using the native upload file button in the upload field 603.

    After I click on the Submit button at the bottom of the form, the picture file using the native upload file button uploads the selected picture, but the picture through the capture picture button does not upload. Instead, when I view the record, that area says “no file selected”.

    But the record does capture the the container and the video element. Basically, the picture frame, with no picture.

    It is a WordPress website using the Formidable Forms plugin for forms, fields, and uploads.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Live Webcam Feed Capture and Upload’ is closed to new replies.