[LINUX] Un mémo qui détecte le visage de l'image acquise à partir de la caméra Web avec OpenCV de Django et le renvoie.

Contexte

Je souhaite détecter des visages à partir d'images (vidéos) prises avec une caméra Web, avec React et Django

Lorsque vous tenez l'appareil photo, le visage sort de l'endroit où vous le tenez Cela peut être utile pour quelque chose de sécurité

méthodologie

Dernière fois La pièce déposée est remplacée par la caméra Web Pour cette raison, certains paramètres de sécurité sont nécessaires.

la mise en oeuvre

React

Dernière fois n'est pas différent J'ai ajouté le processus pour accéder à la caméra avec le constructeur Obtenir une image de la caméra? GetCameraImage est coupé Légèrement modifié le processus de réception de submitData

create-react-app user

index.js

import React from "react";
import ReactDOM from "react-dom";

const SERVER = "https://192.168.139.140:8000/image/"; //Poste de serveur

class App extends React.Component {
  /**
   * @param {json} props
   */
  constructor(props) {
    super(props);

    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    this.state = {
      video: document.createElement("video"),
      canvas: canvas,
      context: context
    };
    if (navigator.mediaDevices){
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
          this.state.video.srcObject = stream;
          this.state.video.play();
          this.state.video.onloadedmetadata = (e) => {
            this.setState({width: this.state.video.videoWidth, height: this.state.video.videoHeight})
            this.state.canvas.width = this.state.width;
            this.state.canvas.height = this.state.height;
            this.submitData();
          };
        })
        .catch(function (error) {
          console.error(error);
          return;
        });
      }
  }

  /**
   *Obtenir des jetons CSRF à partir des cookies
   */
  getCSRFtoken() {
    for (const c of document.cookie.split(";")) {
      const cArray = c.split("=");
      if (cArray[0] === "csrftoken") return cArray[1];
    }
  }

  /**
   *Obtenez une image de la caméra et convertissez-la en une chaîne de caractères pour l'envoi et la réception
   * @return {str} base64
   */
  getCameraImage() {
    this.state.context.drawImage(
      this.state.video,
      0,
      0,
      this.state.width,
      this.state.height
    );
    return this.state.canvas.toDataURL();
  }

  /**
   *Envoyer des données au serveur
   */
  submitData() {
    this.setState({ image: this.getCameraImage() });
    this.render();
    // console.log("Envoyer", this.state);
    fetch(SERVER + "res/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": this.getCSRFtoken()
      },
      body: JSON.stringify({
        image: this.state.image //← Envoyer l'image
      })
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Recevoir", res);
        this.setState({ image: res.image, message: res.message }); //← Définir l'image
        this.render();
        setTimeout(() => this.submitData(), 1000); //Envoyer après 1 seconde
      });
  }

  /**
   *Bouton et envoyer / recevoir le rendu des données
   */
  render() {
    return (
      <div>
        <div className="image-element">
          {this.state.image ? <img src={this.state.image} alt="image" /> : ""}
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App message={"Image"} />
  </React.StrictMode>,
  document.getElementById("root")
);

Processus pour accéder à la webcam

Copiez et collez du JS que j'ai écrit il y a presque longtemps

index.js

  constructor(props) {
    super(props);

    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    this.state = { //Définir des éléments de canevas (pour le dessin d'image) et vidéo (pour la vidéo)
      video: document.createElement("video"),
      canvas: canvas,
      context: context
    };
    if (navigator.mediaDevices){
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
          this.state.video.srcObject = stream; //Obtenez la vidéo de la caméra et mettez-la dans l'élément vidéo
          this.state.video.play(); //Régénération(?)
          this.state.video.onloadedmetadata = (e) => { //Une fois que les métadonnées peuvent être chargées
            this.setState({width: this.state.video.videoWidth, height: this.state.video.videoHeight}) //Kit d'acquisition de taille
            this.state.canvas.width = this.state.width; //Spécifiez la taille du canevas
            this.state.canvas.height = this.state.height;
            this.submitData(); //Envoyer au serveur
          };
        })
        .catch(function (error) {
          console.error(error);
          return;
        });
      }
  }

Si c'est lié à la vidéo, à la vidéo, aux métadonnées téléchargées ou à quelque chose qui sent la merde Je souffrais à mort en créant une application de visionnage de vidéos Si vous ne confirmez pas le chargement des métadonnées par ce processus, videoWidth etc. ne sera pas défini pour la vidéo Étonnamment, je suis toujours confus quant aux spécifications de taille ici la vidéo est video.videoWidth et canvas est canvas.width

Il semble y avoir attendre ces jours-ci

Fonction pour obtenir une image de la caméra

C'est aussi le même que celui que j'ai fait il y a longtemps

index.js

  getCameraImage() {
    this.state.context.drawImage(this.state.video, 0, 0, this.state.width, this.state.height);
    return this.state.canvas.toDataURL();
  }

Je pense que j'ai pu réduire de moitié la taille horizontale en faisant `` this.state.width / 2 '' (rappelez-vous) Ça n'avait pas de sens de le couper ici

Envoyer et recevoir

Je voulais vérifier l'image de réponse, j'ai donc effectué la transmission suivante 1 seconde après avoir dessiné l'image de détection de visage.

index.js

  submitData() {
    this.setState({ image: this.getCameraImage() });
    this.render();
    // console.log("Envoyer", this.state);
    fetch(SERVER + "res/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": this.getCSRFtoken()
      },
      body: JSON.stringify({
        image: this.state.image //← Envoyer l'image
      })
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Recevoir", res);
        this.setState({ image: res.image, message: res.message }); //← Définir l'image
        this.render();
        setTimeout(() => this.submitData(), 1000); //Envoyer après 1 seconde
      });
  }

J'ai pensé à envoyer en appuyant sur un bouton, mais je viens de rendre le bouton et de poster l'événement.

Construire

Construisez ceci et comme d'habitude

{% csrf_token %}
{% load static %}

Au début de ʻindex.html`` et remplacez " / `` par `` "{% static'image / '%} / Quand j'ai vérifié plus tard, il y avait `` "/ `dans le processus js dans index.html, donc je veux éviter cela

Quand je mets ceci dans le serveur de précédent, `` navigator.mediaDevices.getUserMedia '' se plaint. Pour des raisons de sécurité, les navigateurs actuels ne peuvent pas accéder à la caméra à moins que index.html ne soit fourni avec la communication cryptée. Il est donc nécessaire d'installer SSL côté serveur

Django Introduire le SSL de développement sur le serveur

Préparation

Ajout de pip django-sslserver à précédent

python -m venv test
cd test
source bin/activate
pip install -U pip
pip install django opencv-python django-sslserver

django-admin startproject server
cd server
python manage.py startapp image
python manage.py migrate

openssl genrsa -out foobar.key 2048
openssl req -new -key foobar.key -out foobar.csr
openssl x509 -req -days 365 -in foobar.csr -signkey foobar.key -out foobar.crt

Presque identique à References Changez le chemin car le chemin du dernier foobar.csr '' et foobar.key '' a été généré au même endroit que manage.py. De plus, au stade du développement, toutes les entrées après `ʻopenssl genrsa -out foobar.key 2048`` peuvent être effectuées avec Enter.

server/setting.py

ALLOWED_HOSTS = ["127.0.0.1"]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'image.apps.ImageConfig',
    'sslserver', #Ajouter un serveur SSL
]
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = False
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

D'autres sont les mêmes que la dernière fois Je veux compléter cette page

server/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('image/', include('image.urls')),
]

image/urls.py

from django.urls import path

from . import views

app_name = 'urls'
urlpatterns = [
    path('', views.Index, name='index'),
    path('res/', views.Res, name='res'),
]

Mettez-vous dans `ʻimage / static`` haarcascade_frontalface_default.xml

views.py

from django.shortcuts import render
from django.http.response import JsonResponse
from django.http import HttpResponse

import json, base64
import numpy as np
import cv2

def Index(request):
    return render(request, 'image/index.html')

def Res(request):
    data = request.body.decode('utf-8')
    jsondata = json.loads(data)

    image_base64 = jsondata["image"]
    encoded_data = image_base64.split(',')[1]
    nparr = np.fromstring(base64.b64decode(encoded_data), np.uint8)
    image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

    face_gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    face_cascade = cv2.CascadeClassifier("image/static/haarcascade_frontalface_default.xml")
    faces = face_cascade.detectMultiScale(face_gray)
    for x, y, w, h in faces: #Ecrire un rectangle dans la zone du visage
        cv2.rectangle(image, (x, y), (x + w, y + h), (255, 0, 0), 2)

    result, dst_data = cv2.imencode('.png', image)
    dst_base64 = base64.b64encode(dst_data).decode()
    return JsonResponse({"image": "data:image/png;base64,"+dst_base64, "message": "Django"})

résultat

J'ai pu détecter mon visage maussade

Conclusion

La communication devient immédiatement gênante lorsque l'environnement du serveur entre

Il faudra du temps pour préparer le vrai serveur, alors commencez à jouer avec Heroku Je ne peux pas laisser React le faire, alors la prochaine fois, je veux créer quelque chose comme un babillard

Les références

@Syoitu, «Activez Django https en quelques lignes», 7 novembre 2019