Joopi › Wissenswertes › Programmieren v
[HTML] Bilder einer Webcam speichern

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
[HTML] Bilder einer Webcam speichern
Joopi Offline
Administrator
*******
Beiträge: 1.524
Themen: 1.347
Registriert seit: Jul 2022
Bewertung: 0
#1
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>
Suchen
Zitieren Return to top
Joopi Offline
Administrator
*******
Beiträge: 1.524
Themen: 1.347
Registriert seit: Jul 2022
Bewertung: 0
#2
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>
Suchen
Zitieren Return to top
Joopi Offline
Administrator
*******
Beiträge: 1.524
Themen: 1.347
Registriert seit: Jul 2022
Bewertung: 0
#3
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>
Suchen
Zitieren Return to top
Joopi Offline
Administrator
*******
Beiträge: 1.524
Themen: 1.347
Registriert seit: Jul 2022
Bewertung: 0
#4
04-08-2023, 04:38 (Dieser Beitrag wurde zuletzt bearbeitet: 04-08-2023, 04:39 von Joopi.)
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>
Suchen
Zitieren Return to top
Joopi Offline
Administrator
*******
Beiträge: 1.524
Themen: 1.347
Registriert seit: Jul 2022
Bewertung: 0
#5
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>
Suchen
Zitieren Return to top


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste