kramann.info
© Guido Kramann

Login: Passwort:










kramann.info
© Guido Kramann

Login: Passwort:




Anwendung in Javascript: Animationsprogramm

(EN google-translate)

(PL google-translate)

Grundidee: Es gibt eine einfache Methode Animationsfilme zu erstellen - die Legetechnik. Dabei werden auf einen Leuchttisch Gegenstände wie Erbsen, Streichhölzer, Steine usw. gelegt und verschoben. Von jeder Situation wird ein Foto gemacht und die Fotos werden später zu einem Film zusammengesetzt.

Es wäre sowohl denkbar, mit einer Webcam reale Situationen aufzunehmen, aber ebenso mit der Maus verschiebliche grafische Elemente wie farbige Kreise, Rechtecke usw. in einem Canvas-Element zu handhaben.

Es wird an dieser Stelle keine Beispiellösung präsentiert, sondern bestimmte womöglich nützliche Grundelemente werden kurz vorgestellt, die dann eventuell Eingang in das als Übung zu verfertigende Programm eingehen.

Als Auftakt sei hier präsentiert, wie man eine Webcam in HTML5 benutzen kann. Dies ist natürlich mit Vorsicht zu genießen. Entsprechend muß der Nutzer beim Start der Webseite auch einwilligen, dass er dies erlaubt.

Die Quelle des (hier modifizierten) Beispiels: https://davidwalsh.name/browser-camera



<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script language:javascript>

            //QUELLE:  https://davidwalsh.name/browser-camera

            // Grab elements, create settings, etc.
            var video;
            var malkontext;

            function   verarbeiteVideostream(stream) 
            {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }       

            function schnappschuss()
            {
                malkontext.drawImage(video, 0, 0, 640, 480);
            }

            function initialisieren()
            {
                video = document.getElementById('video');

                malkontext = document.getElementById("grafik").getContext("2d"); 

                //Zugriff auf die Kamera bekommen:
                if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) 
                {
                    // Bei Wunsch auch: { audio: true }
                    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream){verarbeiteVideostream(stream)});
                }


            }
        </script>
    </head>
    <body>
        <input style="width:200px" type="button" id="snap" value="Video starten" onclick="javascript:initialisieren()"/>
        <br/>
        <video id="video" width="640" height="480" autoplay></video>
        <br/>
        <input style="width:200px" type="button" id="snap" value="Foto" onclick="javascript:schnappschuss()"/>
        <br/>
        <canvas id="grafik" width="640" height="480"></canvas>
    </body>
</html>

Code 0-1: Quelltext zum obigen Beispiel.