Vor kurzem habe ich versucht, mithilfe von Webrtc eine Fotokabine zu erstellen, und fast den gesamten Code vervollständigt, mit der Ausnahme, dass ich keine Möglichkeit gefunden habe, das Bild nach der Aufnahme zu speichern.

Dies ist der Punkt, an dem ich meinem Ziel am nächsten gekommen bin:

 <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>fotogoof</title>
    <link rel="Stylesheet" href="css/bootstrap.css"/>
    <link rel="Stylesheet" href="css/style.css"/>
    <script type="text/javascript">
            window.onload = function () {
                var img = document.getElementById('screenshot');
                var button = document.getElementById('saveImage');
                img.src = '';
                img.onload = function () {
                    button.removeAttribute('disabled');
                };
                button.onclick = function () {
                    window.location.href = img.src.replace('image/png', 'image/octet-stream');
                };
            };
    </script>
    </head>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <h2 class="brand">Html5 Photobooth</h1>
      </div>
    </div>
    </div>
    <div class="container" id="body-wrap">
    <div class="container" id="main">
      <div class="span10">
        <div id="video-container">
        <canvas width="400" height="320" class="mask"></canvas>
          <div id="counter">
          </div>
        </div>  
        <br><div id="pic-holder" class="pull-left"><img id="screenshot"></div></br>
        <input id="saveImage" type="button" value="save image" disabled="disabled"/>
      </div>
    </div>
   </div>   
    </div>

Der Code nimmt im Wesentlichen den Webcam-Stream und speist ihn in ein Canvas-Element ein. Durch Drücken der Leertaste wird ein Screenshot erstellt, der dann als Bild angezeigt wird. Da ich die genaue Quelle der heruntergeladenen Datei nicht angeben kann, öffnet die Schaltfläche das Bild nur auf einer anderen Registerkarte im Browser, anstatt ordnungsgemäß zu funktionieren. Ich würde mich sehr über Anregungen freuen, wie ich das beheben kann. Danke im Voraus.

Ich habe es bereits geschafft, den Stream von der Leinwand in einem Bild mit folgendem Code festzuhalten:

document.addEventListener ('keydown', function (event) {
        if(event.keyCode == 32) {
         document.querySelector('#screenshot').src = canvas.toDataURL('image/webp')
        }
})

Ich möchte wissen, wie der Benutzer das Bild von dort auf seinem Computer speichern kann.