kramann.info
© Guido Kramann

Login: Passwort:










2.5 Anwendung in Javascript: Animationsprogramm

2.5 Application in Javascript: Animation program (EN google-translate)

2.5 Aplikacja w JavaScript: program animacyjny (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.

Basic idea: There is an easy way to create animated films - the laying technique. In this case, objects such as peas, matches, stones, etc. are placed on a light table and moved. From each situation, a photo is taken and the photos are later assembled into a movie.

Podstawowa idea: Istnieje prosty sposób na tworzenie filmów animowanych - technika układania. W takim przypadku obiekty takie jak groch, zapałki, kamienie itp. Są umieszczane na lekkim stole i przenoszone. Z każdej sytuacji zostaje zrobione zdjęcie, a zdjęcia zostają później połączone w film.

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.

It would be possible to record real situations with a webcam, but also with the mouse movable graphical elements such as colored circles, rectangles, etc. in one Handle canvas element.

Możliwe byłoby nagrywanie rzeczywistych sytuacji za pomocą kamery internetowej, ale także z ruchomymi elementami graficznymi myszy, takimi jak kolorowe kółka, prostokąty itp. w jednym Uchwyt na element canvas.

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.

It is not presented at this point, a sample solution, but certain basic elements that may be useful are presented briefly, which may then enter into the program to be made as an exercise.

W tym momencie nie jest to prezentowane, przykładowe rozwiązanie, ale niektóre podstawowe elementy, które mogą okazać się użyteczne, zostały pokrótce przedstawione, który może następnie wejść do programu, który ma być wykonany jako ćwiczenie.

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.

As a prelude, here's how to use a webcam in HTML5. Of course, this should be treated with caution. Accordingly, the user mu Start the website also agree that he allows this.

Jako wstęp, oto jak korzystać z kamery internetowej w HTML5. Oczywiście należy to traktować z ostrożnością. W związku z tym użytkownik mu Uruchom stronę również zgadzają się, że na to pozwala.

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 2.5-1: Quelltext zum obigen Beispiel.