1

I'm working on a social media type site, where users take pictures with their webcams. Right now, taking an image converts it to a data url with base64 encoding. The file gets written to the server, but it's always blank. What makes it even more odd, is the files differ in size, ranging from 600kb to 1MB. Am I passing the file correctly? Here's my code for taking a snapshot from the webcam:

<html>
<head>
    <title>Camagru</title>
    <link rel="stylesheet" href="main.css">
    <form id="userbox" class="smoothbox" method="post">
        <div>
            <?php
            if ($_SESSION['name'])
                echo "<fnt_main id='welcome'>Welcome Back " . $_SESSION['name'] . " " . $_SESSION['surname'] . "</fnt_main>";
            else
                echo "<fnt_main id='welcome'>Not Logged In!</fnt_main>";
            ?>
        </div>
        <fnt_main>Email: </fnt_main><input type="email" name="email">
        <fnt_main>Password: </fnt_main><input type="password" name="password">
        <form action="editor.php">
            <input style="margin-left: 10px;" class="button" type="submit" name="submit" value="Login">
            <input style="margin-left: 10px;" class="button" type="submit" name="logout" value="Logout">
        </form>
    </form>
</head>
<body>
    <div id="topbox" class="smoothbox">
        <a href="index.php" style="text-decoration: none;"><div id="title">Camagru</div></a>
        <form id="navigatebox" class="smoothbox">
            <input class="button" type="button" value="Home" onclick="window.location.href='http://localhost:8080/camagru/index.php'">
            <input style="margin-top: 10px;" type="button" class="button" <?php if ($_SESSION['name'] == ""){ ?> disabled value="Login First!" <?php   } ?> value="Editor" onclick="window.location.href='http://localhost:8080/camagru/editor.php'">
            <input style="margin-top: 10px;" class="button" type="button" value="Gallery" onclick="window.location.href='http://localhost:8080/camagru/gallery.php'">
            <input style="margin-top: 10px;" class="button" type="button" value="Register" onclick="window.location.href='http://localhost:8080/camagru/register.php'">
        </form>
    </div>
    <div id="videobox" class="smoothbox">
        <video id="video" autoplay></video>
        <button id="snap" class="button">Snap Photo</button>
    </div>
    <div id="canvasbox" class="smoothbox">
        <canvas id="canvas" width="800px" height="600px"></canvas>
    </div>
    <script>
        function sendimagetourl(image)
        {
            var data = "img=" + image;
            var httpc = new XMLHttpRequest();
            var url = "saveimage.php";
            httpc.open("POST", url, true);

            httpc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            httpc.onreadystatechange = function() {
                if(httpc.readyState == 4 && httpc.status == 200) {
                    //alert(httpc.responseText);
                }
            }
            httpc.send(data);
        }
        //Stream Video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
        {
            navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
            });
        }
        //Snap Photo
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');

        document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});
    </script>
    <hr style="margin-top: 20px;">
    <h4 style="text-align: right">Made By...</h4>
</body>
<footer>
</footer>

NodziGames
  • 395
  • 3
  • 17
  • Your problem probably is in your php handling the file reception. But instead of sending a dataURI, you'd be better using a blob version with a FormData. Check [this answer](http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js/34713226#34713226) for a complete demo js + php – Kaiido Oct 18 '16 at 23:14
  • Thank you so much, just what I was looking for. I'll let you know if I get it sorted. – NodziGames Oct 19 '16 at 07:09

0 Answers0