CODEWITHSUNDEEP
javascripthtmlweb-applicationshtml5-canvasgetusermedia
Jamie Doe
Jamie Doe

Reputation: 21

how to save a picture taken with window.getusermedia in js

Currently i am working on a open webapp camera, right now i have implemented the camera setup(live stream as viewport, take picture button, capture, display taken picture in corner... etc) but now i am running into the issue of how to save that picture for the user to their device or computer, this app is currently being designed for mobile b2g primarily. I know most people are gonna tell me security issues!!! i dont mean tell the device exactly where to put it. I mean something like 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
    <script type="text/javascript">
        window.onload = function () {
            var img = document.getElementById('embedImage');
            var button = document.getElementById('saveImage');
            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
            'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
            '9TXL0Y4OHwAAAABJRU5ErkJggg==';
            img.onload = function () {
                button.removeAttribute('disabled');
            };
            button.onclick = function () {
                window.location.href = img.src.replace('image/png', 'image/octet-stream');
            };
        };
    </script>
</head>
<body>
    <img id="embedImage" alt="Red dot"/>
    <input id="saveImage" type="button" value="save image" disabled="disabled"/>
</body>
</html>

that specific code executed on mobile triggers the file to automatically be saved on click of the button. now what i want to do is use that to take my picture from its var its in and save it as that file, for example that will be in downloads folder. this is what my code is currently https://github.com/1Jamie/1Jamie.github.io

any help would be appreciated and this is the current running implementation if you want to take a working look http://1Jamie.github.io

Upvotes: 2

Views: 3778

Answers (1)

P. Eastman
P. Eastman

Reputation: 46

This worked for me when I was playing around with getUserMedia - I did notice that you did not have the name of the method in the proper case and it is a method of the navigator.mediaDevices interface - not a method of the window directly...

References:

[Navigator for mozilla]https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Navigator

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

[mediaDevices for chrome and android]https://developers.google.com/web/updates/2015/10/media-devices?hl=en

var video = document.getElementById('monitor');
var canvas1 = document.getElementById('photo1');

var img1 = document.getElementById('canvasImg');


navigator.mediaDevices.getUserMedia({
 video: true
}).then(function (stream) {
 video.srcObject = stream;
 video.onloadedmetadata = function () {
     canvas1.width = video.videoWidth;
     canvas1.height = video.videoHeight;

     document.getElementById('splash').hidden = true;
     document.getElementById('app').hidden = false;
 };
}).catch(function (reason) {
 document.getElementById('errorMessage').textContent = 'No camera available.';
});

function snapshot1() {
 canvas1.getContext('2d').drawImage(video, 0, 0);
}

"save_snap" is the id of a button - Disclaimer I am using jQuery- but you should easily see where this corresponds to your code:

$("#save_snap").click(function (event){

    // save canvas image as data url (png format by default)
  var dataURL = canvas2.toDataURL();
  // set canvasImg image src to dataURL
  // so it can be saved as an image
  $('#canvasImg').attr("src" , dataURL);
  $('#downloader').attr("download" , "download.png");
     $('#downloader').attr("href" , dataURL);

    //* trying to force download - jQuery trigger does not apply


    //Use CustomEvent Vanilla js: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
    // In particular
    var event1 = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
    });

    //NOW we are effectively clicking the element with the href attribute:

    //Could use jQuery selector but then we would have to unwrap it
    // to expose it to the native js function...
    document.getElementById('downloader').dispatchEvent(event1);

});

Upvotes: 2

Related Questions