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.
- Comment afficher plusieurs listes de cases à cocher de manière dynamic dans une liste déroulante
- Manipulation de données dans DataTables
- Opérateurs de variables JavaScript
- date du spectacle jQuery en fonction du mois
- passage d’un object javascript de la vue cakephp au contrôleur
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