Envoyer imageObject depuis webcam par ajax vers Flask Server

Je veux prendre la webcam de formulaire de capture instantanée et l’envoyer par ajax au serveur Flask

J’ai le fichier upload.html qui prend l’instantané depuis la webcam et l’envoie via ajax, mais je ne connais pas grand chose au sujet du serveur Flask pour obtenir des données depuis Ajax et les sauvegarder à l’emplacement spécifique (/ images)

Voici le fichier upload.html. La webcam fonctionne uniquement sur Firefox (ne fonctionne pas dans Chrome). Ces autres navigateurs que je n’ai pas encore testés

//-------------------- // GET USER MEDIA CODE //-------------------- navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); var video; var webcamStream; function startWebcam() { if (navigator.getUserMedia) { navigator.getUserMedia ( // constraints { video: true, audio: false }, // successCallback function(localMediaStream) { video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); webcamStream = localMediaStream; }, // errorCallback function(err) { console.log("The following error occured: " + err); } ); } else { console.log("getUserMedia not supported"); } } //--------------------- // TAKE A SNAPSHOT CODE //--------------------- var canvas, ctx; function init() { // Get the canvas and obtain a context for // drawing in it canvas = document.getElementById("myCanvas"); context = canvas.getContext('2d'); } function snapshot() { // Draws current image from the video element into the canvas context.drawImage(video, 0,0, canvas.width, canvas.height); webcamStream.stop(); var dataURL = canvas.toDataURL('image/jpeg', 1.0); document.querySelector('#dl-btn').href = dataURL; $.ajax({ type: "POST", contentType: false, cache: false, processData: false, async: false, url: "/upload", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); // If you want the file to be visible in the browser // - please modify the callback in javascript. All you // need is to return the url to the file, you just saved // and than put the image in your browser. }); } 
        

Take a snapshot of the current video stream

Click on the Start WebCam button.

Screenshots :

Voici le code de mon serveur: app_basic.py

 import os from flask import Flask, render_template, request, send_from_directory app = Flask(__name__) APP_ROOT = os.path.dirname(os.path.abspath(__file__)) @app.route("/") def index(): return render_template("upload.html") @app.route("/upload", methods=['POST']) def upload(): return send_from_directory('/images','test.jpeg') if __name__ == "__main__": app.run(port=4555, debug=True) 

Merci

Mis à jour:

Merci pour @ guest271314 aidez-moi à réparer la capture de la caméra en travaillant sur un autre navigateur J’ai réutilisé mon fichier ajax d’origine et l’ai transféré sur le serveur, mais l’erreur 404 s’affiche, mais je ne sais pas comment enregistrer l’image sur l’emplacement du serveur (/ images) erreur 404

Maintenant, je vais utiliser le code php pour gérer les données envoyées depuis un appel ajax, comment écrire le code similaire dans un flask