Joopi

Joopi > Wissenswertes > Programmieren > Bilder einer Webcam speichern
Normale Version: Bilder einer Webcam speichern
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.

Joopi

04-08-2023, 04:24
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Webcam Capture</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="capture">Capture and Save</button>
    <script>
        const video = document.getElementById('video');
        const captureButton = document.getElementById('capture');

        // Zugriff auf die Webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing webcam: ', error);
            });

        // Funktion zum Aufnehmen und Speichern des Bildes
        captureButton.addEventListener('click', function () {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const context = canvas.getContext('2d');

            // Nehme ein Bild vom Video auf und speichere es im Canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Lade das Bild herunter
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg'); // Das Bild als Data-URL im JPEG-Format
            a.download = 'snapshot_' + Date.now() + '.jpeg'; // Benenne das Bild
            a.click(); // Löst den Download des Bildes aus
        });
    </script>
</body>
</html>

Joopi

04-08-2023, 04:30
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Webcam Capture</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <script>
        const video = document.getElementById('video');

        // Zugriff auf die Webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing webcam: ', error);
            });

        // Funktion zum Aufnehmen und automatischen Herunterladen des Bildes
        function takeSnapshotAndDownload() {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const context = canvas.getContext('2d');

            // Nehme ein Bild vom Video auf und speichere es im Canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Lade das Bild herunter
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg'); // Das Bild als Data-URL im JPEG-Format
            a.download = 'snapshot_' + Date.now() + '.jpeg'; // Benenne das Bild
            a.click(); // Löst den automatischen Download des Bildes aus
        }

        // Starte den automatischen Download alle Sekunde
        setInterval(takeSnapshotAndDownload, 1000); // 1000 Millisekunden = 1 Sekunde
    </script>
</body>
</html>

Joopi

04-08-2023, 04:34
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Webcam Capture</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="capture">Capture and Save</button>
    <input type="text" id="folderName" placeholder="Enter folder name">
    <script>
        const video = document.getElementById('video');
        const captureButton = document.getElementById('capture');
        const folderNameInput = document.getElementById('folderName');

        // Zugriff auf die Webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing webcam: ', error);
            });

        // Funktion zum Aufnehmen und Speichern des Bildes
        captureButton.addEventListener('click', function () {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const context = canvas.getContext('2d');

            // Nehme ein Bild vom Video auf und speichere es im Canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Lade das Bild herunter
            const folderName = folderNameInput.value || 'default-folder';
            const fileName = 'snapshot_' + Date.now() + '.jpeg';
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg'); // Das Bild als Data-URL im JPEG-Format
            a.download = `${folderName}/${fileName}`; // Pfad und Dateiname
            a.click(); // Löst den Download des Bildes aus
        });
    </script>
</body>
</html>

Joopi

04-08-2023, 04:38
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Webcam Capture</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <input type="text" id="folderName" placeholder="Enter folder name">
    <script>
        const video = document.getElementById('video');
        const folderNameInput = document.getElementById('folderName');

        // Zugriff auf die Webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing webcam: ', error);
            });

        // Funktion zum Aufnehmen und automatischen Speichern des Bildes
        function takeSnapshotAndSave() {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const context = canvas.getContext('2d');

            // Nehme ein Bild vom Video auf und speichere es im Canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Lade das Bild herunter
            const folderName = folderNameInput.value || 'default-folder';
            const fileName = 'snapshot_' + Date.now() + '.jpeg';
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg'); // Das Bild als Data-URL im JPEG-Format
            a.download = `${folderName}/${fileName}`; // Pfad und Dateiname
            a.click(); // Löst den automatischen Download des Bildes aus
        }

        // Starte den automatischen Speichern alle Sekunde
        setInterval(takeSnapshotAndSave, 1000); // 1000 Millisekunden = 1 Sekunde
    </script>
</body>
</html>

Joopi

04-08-2023, 04:51
<!DOCTYPE html>
<html>
<head>
    <title>Webcam Capture</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <script>
        const video = document.getElementById('video');
        const downloadFolder = 'download-folder'; // Fest hinterlegter Downloadordner

        // Zugriff auf die Webcam
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error('Error accessing webcam: ', error);
            });

        // Funktion zum Aufnehmen und automatischen Speichern des Bildes
        function takeSnapshotAndSave() {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const context = canvas.getContext('2d');

            // Nehme ein Bild vom Video auf und speichere es im Canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Lade das Bild herunter
            const fileName = 'snapshot_' + Date.now() + '.jpeg';
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg'); // Das Bild als Data-URL im JPEG-Format
            a.download = `${downloadFolder}/${fileName}`; // Pfad und Dateiname
            a.click(); // Löst den automatischen Download des Bildes aus
        }

        // Starte den automatischen Speichern alle Sekunde
        setInterval(takeSnapshotAndSave, 1000); // 1000 Millisekunden = 1 Sekunde
    </script>
</body>
</html>
Joopi > Wissenswertes > Programmieren > Bilder einer Webcam speichern