javascript - Send png file with a form using WebRTC

I try to send a png file with a form. The picture is catched by a webcam using WebRTC.

The png image is created from canvas, as shown here.

A first button 'startbutton' takes the picture and updates the variable photo2 of the form.

As I click on this first button, I see that the variable photo2 is correctly filled in the form.

The second button 'Save this picture' sends the form to test.php.

And when test.php runs, $photo2 is always empty.

If someone as an idea.... Thanks !

capture.js :

(function() {
// The width and height of the captured photo. We will set the width to the value defined here, but the height will be calculated based on the aspect ratio of the input stream.
var width = 320;    // We will scale the photo width to this
var height = 0;     // This will be computed based on the input stream

  // |streaming| indicates whether or not we're currently streaming video from the camera. Obviously, we start at false.
var streaming = false;

  // The various HTML elements we need to configure or control. These will be set by the startup() function.
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;

function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    photo2 = document.getElementById('photo2'); // OG
    startbutton = document.getElementById('startbutton');
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function(stream) {
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.log("An error occurred: " + err);
    });

    video.addEventListener('canplay', function(ev){
        if (!streaming) {
            height = video.videoHeight / (video.videoWidth/width);  // Firefox currently has a bug where the height can't be read from the video, so we will make assumptions if this happens.
            if (isNaN(height)) {
                height = width / (4/3);
            }
            video.setAttribute('width', width);
            video.setAttribute('height', height);
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            streaming = true;
        }
    }, false);

    startbutton.addEventListener('click', function(ev){
        takepicture();
        ev.preventDefault();
    }, false);
    clearphoto();
}

  // Fill the photo with an indication that none has been captured.

function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
photo2.setAttribute('src', data);
}
  
    // Capture a photo by fetching the current contents of the video and drawing it into a canvas, then converting that to a PNG format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply other changes before drawing it.
function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);

        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
        photo2.setAttribute('src', data);
    } else {
        clearphoto();
    }
}

  // Set up our event listener to run the startup process once loading is complete.
window.addEventListener('load', startup, false);
})();
Copy code

HTML :

<script src="js/capture.js"></script>
<div class="container">
<div class="row">
    <div class="col-md-6">
            <video id="video">Video stream not available.</video>
        <button id="startbutton" class="btn btn1">Take a picture</button> 
        <br/>
    </div>
    <div class="col-md-6">
        <canvas id="canvas" style="display:none;">
        </canvas>                       
        <div class="output" style="width: 340px; display: inline-block;">
            <img id="photo" alt="The screen capture will appear in this box."> 
        </div>              
    </div>
</div>              
 
<FORM method="POST" action= "test.php">
<input type="hidden" name="photo2" id="photo2">
<button>Save this picture</button>
</FORM>
Copy code

test.php :

$photo2 = $_POST['photo2'];
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.