[python] Envoyez l'image capturée de la caméra Web au serveur et enregistrez-la

Aperçu

Mettez en œuvre les éléments suivants: ・ Lancez la caméra Web dans le navigateur ・ Capturez l'image de l'écran de l'appareil photo -Envoyer l'image capturée au serveur et l'enregistrer

Structure des dossiers

/home/capture_img
|--run.py
|--app
|  |--api.py
|  |--service.py
|  |--static
|  |  |--main.js
|  |--templates
|  |  |--index.html
|--images #Où enregistrer l'image capturée

Code source

run.py

run.py


from app.api import api

if __name__ == '__main__':
    api.run(host='0.0.0.0', port=8000)

app/api.py

app/api.py


from flask import Flask, request, make_response, render_template, url_for

from . import service

api = Flask(__name__)

@api.route('/', methods=['GET'])
def index():
    return render_template('index.html')

@api.route('/capture_img', methods=['POST'])
def capture_img():
    msg = service.save_img(request.form["img"])
    return make_response(msg)

app/service.py

app/service.py


import base64
import numpy as np
import cv2

def save_img(img_base64):
    #binary <- string base64
    img_binary = base64.b64decode(img_base64)
    #jpg <- binary
    img_jpg=np.frombuffer(img_binary, dtype=np.uint8)
    #raw image <- jpg
    img = cv2.imdecode(img_jpg, cv2.IMREAD_COLOR)
    #Chemin pour enregistrer l'image décodée
    image_file="/home/capture_img/images/img0000.jpg "
    #Enregistrer l'image
    cv2.imwrite(image_file, img)
    return "SUCCESS"

templates/index.html

templates/index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get_capture</title>
</head>
<body>
    <h3>Obtenez une capture en appuyant sur la touche espace</h3>
    <video id="video" width="640" height="480" autoplay></video>
    <canvas id="canvas" class="canvas-wrapper"></canvas>
</body>

<script src="{{url_for('static', filename='main.js')}}"></script>

<style>
    /*Masquer la toile*/
    #canvas {
        display: none !important;
    }
</style>
</html>

static/main.js

static/main.js


var video = document.getElementById('video');
// getUserMedia()Obtenez des images de la caméra avec
var media = navigator.mediaDevices.getUserMedia({ video: true });
//Versez dans les tags vidéo pour une lecture en temps réel (streaming)
media.then((stream) => {
    video.srcObject = stream;
});

var canvas = document.getElementById('canvas');
canvas.setAttribute('width', video.width);
canvas.setAttribute('height', video.height);

video.addEventListener(
    'timeupdate',
    function () {
        var context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, video.width, video.height);
    },
    true
);

//Configurez l'auditeur pour qu'il exécute l'acquisition de capture lorsque la touche espace est enfoncée
document.addEventListener('keydown', (event) => {
    var keyName = event.key;
    if (keyName === ' ') {
        console.log(`keydown: SpaceKey`);
        context = canvas.getContext('2d');
        //Retirez la tête des données base64 acquises
        var img_base64 = canvas.toDataURL('image/jpeg').replace(/^.*,/, '')
        captureImg(img_base64);
    }
});

var xhr = new XMLHttpRequest();

//Données d'image capturées(base64)PUBLIER
function captureImg(img_base64) {
    const body = new FormData();
    body.append('img', img_base64);
    xhr.open('POST', 'http://localhost:8000/capture_img', true);
    xhr.onload = () => {
        console.log(xhr.responseText)
    };
    xhr.send(body);
}

Installation des modules requis

root@ed9f7bedad16:/# pip install opencv-python flask

Courir

root@ed9f7bedad16:/# python /home/capture_img/run.py
 * Serving Flask app "app.api" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:8000/ (Press CTRL+C to quit)

Contrôle de fonctionnement

Accédez à http: // localhost: 8000 et appuyez sur la touche espace

スクリーンショット 2020-10-16 23.50.02.png

root@ed9f7bedad16:/# ls /home/capture_img/images/
img0000.jpg

L'image capturée a été enregistrée. img0000.jpg

c'est tout.

Recommended Posts

[python] Envoyez l'image capturée de la caméra Web au serveur et enregistrez-la
Démarrez la webcam, prenez une image fixe et enregistrez-la localement
Envoyer un message de Slack à un serveur Python
Je veux découper uniquement le visage d'une image de personne avec Python et l'enregistrer ~ Détection de visage et rognage avec face_recognition ~
Exportez le rapport au format PDF à partir de DB avec Python et attachez-le automatiquement à un e-mail et envoyez-le
Envoyer les données du journal du serveur vers Splunk Cloud
Créer un environnement Python et transférer des données vers le serveur
POSTEZ l'image sélectionnée sur le site Web avec multipart / form-data et enregistrez-la sur Amazon S3! !!
J'ai créé un serveur avec socket Python et ssl et j'ai essayé d'y accéder depuis le navigateur
Renvoyez les données d'image avec Flask of Python et dessinez-les dans l'élément canvas de HTML
Envoyer l'image avec python et enregistrer avec php
Installez mecab sur le serveur partagé Sakura et appelez-le depuis python
Comment obtenir des abonnés et des abonnés de Python à l'aide de l'API Mastodon
Association de terminal du côté serveur à Amazon SNS (python + boto3)
Convertissez le résultat de python optparse en dict et utilisez-le
Utilisez Firefox avec Selenium depuis python et enregistrez la capture d'écran
Lisez l'ancien fichier Word du formulaire d'application Gakushin DC (.doc) à partir de Python et essayez de le faire fonctionner
Notification push du serveur Python vers Android
Portage et modification du solveur de doublets de python2 vers python3.
Essayez d'utiliser le framework web de Python Django (1) - De l'installation au démarrage du serveur
Envoyer et recevoir des données d'image au format JSON en Python sur le réseau
Python - Obtenez le taux de bitcoin BTC / JPY à partir de bitflyer à intervalles réguliers et enregistrez-le dans un fichier
Passez les éléments sélectionnés dans Tablacus Explorer de JScript à python et renommez-les tous à la fois
J'ai exécuté GhostScript avec python, divisé le PDF en pages et l'ai converti en image JPEG.
L'histoire de la création d'un outil pour charger une image avec Python ⇒ l'enregistrer sous un autre nom
Lisez les données du lecteur NFC connecté à Raspberry Pi 3 avec Python et envoyez-les à openFrameworks avec OSC
Texte de l'image et publication sur slack (python slackbot)
Organisez le flux depuis l'octroi d'autorisations aux utilisateurs python pour effectuer des migrations et migrer
[Python] Comment lire les données de CIFAR-10 et CIFAR-100
Utilisez Pillow pour rendre l'image transparente et en superposer une partie seulement
Envoyer un message à Skype et Chatwork en Python
POST des images depuis ESP32-CAM (MicroPython) vers le serveur
Crop Numpy.ndarray et enregistrez-le en tant qu'image
GAE --Avec Python, faites pivoter l'image en fonction des informations de rotation d'EXIF et importez-la dans Cloud Storage.
[Python] Je vais télécharger FTP sur le serveur FTP.
[Python3] Prenez une capture d'écran d'une page Web sur le serveur et recadrez-la davantage
Extraire des images et des tableaux de pdf avec python pour réduire la charge de reporting
Je veux remplacer les variables dans le fichier de modèle python et le produire en masse dans un autre fichier
Il est facile d'exécuter SQL avec Python et de générer le résultat dans Excel
Passez un tableau de PHP à PYTHON et effectuez un traitement numpy pour obtenir le résultat
[Python] Comment supprimer les valeurs en double de la liste
Le mur lors du passage du service Django de Python 2.7 à la série Python 3
Comment récupérer des données d'image de Flickr avec Python
J'ai essayé de détecter l'iris à partir de l'image de la caméra
Effacez le cron.log régulièrement pour l'empêcher de se développer.
[Python] Spécifiez la plage de l'image en faisant glisser la souris
Convertissez l'image au format .zip en PDF avec Python
Je voulais utiliser la bibliothèque Python de MATLAB
Envoyer des données de Python au traitement via une communication socket
Envoyez et recevez Gmail via l'API Gmail en utilisant Python
La première étape pour obtenir Blender disponible à partir de Python
Recevoir des e-mails de Gmail et étiqueter avec Python3
POSTER l'image avec json et la recevoir avec flask