L'idée est simple, connectez-vous avec votre webcam utilisateurs, nous faisons une photo et l'envoyer à une galerie où vous pouvez voir les masques de vos visiteurs. La mise en œuvre est presque aussi simple que la théorie et le résultat est incroyable et original.
Le système est le même que celui utilisé BloggerSnap , un service qui a connu un succès incroyable dans son lancement et il semble fermé depuis avril. Il ya un an, l'emploi était supérieur à 40.000 en Alexa , a probablement été encore plus élevé. Je suppose qu'il serait très difficile de maintenir le coût de la bande passante si populaire. Un couple d'années nous étions sur le point de lancer un service semblable et de le rejeter parce que nous n'avons pas vu un moyen de rentabiliser un peu tout pour réussir, les coûts montent en flèche.
Dans un scénario normal dépend du logiciel utilisateur devrait être installé à la photo qui a été fait et puis je l'ai envoyée, qui ne serait pas obtenir le but de l'instantané, mais il ya une solution qui peut tout faire par le biais d'une demande en ligne: Flash Dans notre cas, Flex 
.
La puissance de la plate-forme Flash dans le traitement de l'audio et la vidéo va bien au-delà de ce qui peut sembler pour créer des applications multimédias et la participation des utilisateurs avancés assez rapidement. Si vous avez suffisamment d'argent peut également être combiné avec Flash Media Server et n'est limitée que par votre imagination. Un autre jour, nous allons créer un videochat 
.
La clé est l'accès à la caméra et le microphone de la plate-forme Flash qui permet à l'utilisateur l'autorisation, évidemment. S'il y est autorisé, le joueur se connecte à votre webcam et commencer à diffuser la vidéo de celui-ci et, si la demande l'exige, l'envoyer à d'autres utilisateurs. La même chose peut être fait avec l'audio.
Dans l'atelier d'aujourd'hui fera une petite application pour créer une galerie web instantanée / blog. Les utilisateurs qui le souhaitent peuvent prendre la photo avec votre propre webcam et il sera installé dans la galerie. Simple, mais la suppression.
L'application se composera de deux parties:
- Zone de capture: une application développée en Flex qui permettra aux utilisateurs de prendre des photos sans le besoin d'avoir une webcam.
- Galerie: une page HTML simple qui répertorie toutes les photos qui sont devenus des utilisateurs.
Capture d'images
Bien qu'il puisse sembler très difficile de voir alors que la facilité de se connecter à la webcam en Flex est très impressionnant.
Notre application se compose de seulement deux composants, une image et un bouton. L'image vient de nous donner un peu de style et d'utiliser le bouton de déclenchement de notre caméra en ligne.
Il ya trois tâches distinctes:
- Contacts avec la webcam.
- Capture de la photo.
- Envoyez-le à votre serveur.
Connectez-vous à la webcam
Avec ce code simple visionner la webcam dans notre application que l'utilisateur s'est connecté à votre ordinateur.
- insertWebcamVideo ( ) : void { insertWebcamVideo private function (): void (
- UIComponent ( ) ; videoHolder var: UIComponent = UIComponent new ();
- Camera . names . length > 0 ) { if (noms Camera.. longueur> 0) (
- . getCamera ( ) ; appareil photo =. getCamera ();
- camera == null || camera . width == -1 || camera . height == -1 || camera . fps == -1 ) { if (photo == null | | caméra. largeur == -1 | | caméra. hauteur == -1 | | caméra. fps == -1) (
- "Lo sentimos, no tienes cámara" , "Error" , 4 , null , null , iconoAlerta ) ; Alerte. Show ("Désolé, vous n'avez pas de caméra," Erreur ", 4, NULL, NULL, iconoAlerta)
- ; capture. enabled = false;
- ; caméra = null;
- { Autres ()
- ( StatusEvent. STATUS , cerrar ) ; appareil photo. addEventListener (StatusEvent. ETAT, à proximité)
- Video ( camera . width , camera . height ) ; video = nouvelle vidéo (largeur camera., un appareil photo. hauteur);
- ( camera ) ; vidéo. attachCamera (huis clos);
- video ) ; videoHolder. addChild (vidéo)
- . width ; videoHolder. largeur de la vidéo =. largeur;
- . height ; videoHolder. hauteur de la vidéo =. hauteur;
- ; videoHolder. Visible = true;
- ; videoHolder. y = 0;
- videoHolder, 0 ) ; boîte. addChildAt (videoHolder, 0);
- fotillo ) ; boîte. removeChild (fotillo)
- )
- { Autres ()
- "Lo sentimos, no tienes cámara" , "Error" , 4 , null , null , iconoAlerta ) ; Alerte. Show ("Désolé, vous n'avez pas de caméra," Erreur ", 4, NULL, NULL, iconoAlerta)
- ; capture. enabled = false;
- )
- / / Security.showSettings (SecurityPanel.CAMERA)
- )
Aussi facile que d'abord vérifier si vous avez webcam (mais ne peut évidemment pas prendre des photos ), Puis l'ajouter à un composant vidéo que nous avons ajouté à un UIComponent à afficher sur la demande. En ce moment nous avons la caméra de l'utilisateur en direct sur la demande.
Capture l'image
Ayant le flux vidéo dans l'application, nous voulons que lorsque l'utilisateur appuie sur le bouton "Capture" va prendre la photo.
- getSnapshot ( ) : void { privé getSnapshot function (): void (
- BitmapData ( video . width , video . height , true ) ; Snapshot: BitmapData = new (BitmapData video. var largeur, de la vidéo. Hauteur, true);
- Matrix ( ) ; var m: matrice = new Matrix ();
- video , m ) ; instantané. draw (vidéo, m);
- JPGEncoder ( 75 ) ; var jpegEnc: JPGEncoder = new JPGEncoder (75);
- ( snapshot ) ; jpegDat var: ByteArray = jpegEnc. encode (snapshot);
- = base64Encode ( jpegDat ) ; var img_src: String = base64Encode (jpegDat)
- img_src. length > 1600 ) { if (img_src longueur.> 1600) (
- / / L'image capturée correctement
- { Autres ()
- "La imagen capturada parece estar vacía" , "Error" , 4 , null , null , iconoAlerta ) ; Alerte. Show ("L'image capturée semble être vide", "Erreur", 4, null, null, iconoAlerta)
- )
- )
Avec ce code, mais j'ai d'autres cet effet. Vous obtenez une capture au niveau du bit et l'objet vidéo compressé au format JPEG pour envoyer au serveur. Nous avons le prendre en photo!
Envoyez la photo
Nous allons utiliser un HTTPService pour envoyer la photo par poste, nous avons fait et nous continuerons dans une base de données. Nous ajoutons au code fonction précédente pour envoyer la photo.
- getSnapshot ( ) : void { privé getSnapshot function (): void (
- BitmapData ( video . width , video . height , true ) ; Snapshot: BitmapData = new (BitmapData video. var largeur, de la vidéo. Hauteur, true);
- Matrix ( ) ; var m: matrice = new Matrix ();
- video , m ) ; instantané. draw (vidéo, m);
- JPGEncoder ( 75 ) ; var jpegEnc: JPGEncoder = new JPGEncoder (75);
- ( snapshot ) ; jpegDat var: ByteArray = jpegEnc. encode (snapshot);
- = base64Encode ( jpegDat ) ; var img_src: String = base64Encode (jpegDat)
- img_src. length > 1600 ) { if (img_src longueur.> 1600) (
- = new Object ( ) ; var temp new Object Object = ();
- . Img_src = image temp;
- temp ) ; HTTPService. Envoyer (temp);
- ( this as DisplayObject, ventanaEspera, true ) ) ; cargandoWindow = ventanaEspera (createPopup PopUpManager. (ce que DisplayObject, ventanaEspera, true));
- { Autres ()
- "La imagen capturada parece estar vacía" , "Error" , 4 , null , null , iconoAlerta ) ; Alerte. Show ("L'image capturée semble être vide", "Erreur", 4, null, null, iconoAlerta)
- )
- )
- useproxy= "false" method= "POST" resultformat= "text" url = "upload.php" result= "onResult()" <Mx: HTTPService id = "HTTPService" showbusycursor = "false" useProxy = "false" method = "POST" resultformat = "text" url = "upload.php" résultat = "onResult ()"
- faute = "onHTTPFault (event)" />
Il. Le script upload.php sur votre serveur par POST recevoir la variable "image" avec le contenu de votre photo. Il doit être stocké dans un fichier et vous êtes fait le plus "compliqué? le projet.
- )
Avant de ranger l'image disque peut ajouter un enregistrement à une base de données vous permet de générer, après la galerie. Cette partie est votre choix.
Génération Galerie
C'est la partie la plus facile, il suffit de créer un script PHP (ou dans la langue que vous préférez) qui répertorie les photos que vous avez été sauvé de la base de données paging comme bon vous semble. Plus de commentaires, je reste pour quelque chose si facile.
Conclusions
Aujourd'hui, nous avons assisté à une rapide et facile de façon extrêmement de se connecter à la webcam (et microphone) des utilisateurs. Nous avons seulement considéré comme faisant un aperçu de ce qui est vu à travers la caméra, mais le système ouvre un vaste monde de possibilités.
Télécharger ici le projet de code.
42 utilisateurs ont commenté sur "Photo Booth ou de faire des photos en ligne"
RSS des commentaires pour ce billet TrackbackC'est le même système utilisé dans yograbo.com mais ici, il travaille sur la vidéo et comme vous le dites, vous portez-vous des limites à votre imagination.
Salu2!
Salut Ignasi,
La théorie est presque la même, la différence est que pour faire des photos n'ont pas besoin de rien de plus à Flash Player, il fait la photo, il se convertit au format JPEG et il a envoyé au serveur. Pour la vidéo, vous avez besoin de derrière un FMS ou Red5.
Une salutation
Ouais, ben je voulais dire le thème de la capture de l'image, puis comme vous le dites si vous utilisez FMS ou RED5 vidéo, vous devez, dans mon cas, en utilisant la licence de porc RED5 FMS ne vois pas!
Salu2
ce code ne fonctionne pas!
Comme l'exécution du projet??
Bonjour André,
Pourquoi ne pas commencer à dire ce que vous avez fait et ce que vous avez fait?
Elle vous donne une erreur lors de la compilation?
Avez-vous créé le script à distance pour enregistrer l'image?
Cordialement
la vérité ne peut pas trouver comment faire pour exécuter ce code
et télécharger le fotomaton.zip et ne savent pas quoi faire avec, et de construire le projet en flex et tout copier dans le projet et je n'ai pas s'il vous plaît Guiem que la peine soit si grave
Ici, dans http://neoslink.iespana.es/ laisser le fichier de votre avis et si ils me disent que j'ai mauvais Merci
Bonjour André,
Je ne peux pas aider à moins que vous me dire dans quelle mesure êtes-vous arrivé.
Avez-vous réussi à compiler le projet?
Elle vous donne une erreur?
lorsque le projet compile montre juste un fond bleu
et montre rien de plus
bonjour pour le moment ce sont les trois erreurs que je vous serions reconnaissants de générer et où je pourrais dire à
Gravité et chemin de la ressource Description Création de localisation en temps Id
1046: Type est introuvable ou n'est pas une constante de compilation: JPGEncoder.
1172: pas trouvé de définition com.xplota.images.
1180: appel à une méthode peut-être pas défini JPGEncoder.
J'ai été en mesure de corriger deux erreurs de l'JPEGEncoder
mais il est l'erreur: com.xplota.images importation .*;
Andrew Salut,
Je n'ai pas eu l'un des problèmes que vous avez rencontrés.
J'ai pris votre code et de la SRC dossier, j'ai créé un nouveau projet avec lui et il a fonctionné parfaitement, oui, une fois corrigé une erreur qui a été dans l'état MXML application principale, mais je pense que l'erreur déjà vous avez résolu, parce que si vous n'avez pas à compiler.
osus Bonjour,
Je vous dis que j'ai compilé l'application et presque complètement, mais je image stockée dans le répertoire, que dois-je faire?
Bonjour, vous pouvez télécharger votre fichier upload.php parce que je ne peux pas me faire enregistrer les fichiers sur le serveur, et n'est pas un problème d'autorisations parce que j'ai donné toutes les autorisations ont ou peuvent avoir.
Bonjour,
Il est celui dans le code, il n'y a pas de truc ...
1600)
(
$ = Bmd base64_decode ($ image _POST [']);
$ Im = fopen ("photos foto.jpg", 'w');
fwrite ($ im, bmd $);
fclose ($ im);
)
?>
Vous devrez avoir le répertoire "images" avec permission d'écriture et c'est tout. De toute évidence l'URL qui pointe vers le MXML upload.php doivent être pertinentes à votre fichier php. Vous pouvez vérifier que le upload.php fonctionne en créant une forme qui l'appelle. Si cela fonctionne, vous devez créer la archigo "foto.jpg photos."
Osus
Merci de répondre à la question, c'est que si je crée le fichier mais je ne peux m'écrire à.
Bonjour mercure,
Commencez par le débogage du fichier que vous téléchargez des essais. Comme je l'ai dit, obtenir un formulaire de simuler ce qu'il appelle votre application pour voir si vous enregistrez quelque chose.
Je comprends ce que vous dites, que le dossier est vide. Vous pouvez également consulter ce que vous recevez dans la variable $ image] _POST ['
osus hoa J'espère que vous allez bien et vous êtes sur la bonne entrée agradesco parce que je pouvais courir à la perfection, et seulement dû enlever quelques lignes, mais pas de problème.
les lignes étaient claires de upload.php archivp
qui est comme suit:
1.
Bonjour
J'ai essayé l'exemple, que fotomaton.swf nez qui coule, où je travaille, mais je enregistrer le fichier .. car j'ai le dossier / photos / mais non enregistrées dans le projet lui-même ne fonctionne pas, ne compile pas .. Je l'ai dit ce n'est pas fotomaton.html et je m'en aperçois n'a vraiment pas de créer le code HTML dans le dossier bin .. s'il vous plaît si vous pouvez me montrer comment résoudre les
Bonjour,
Le swf sur son propre ne sera pas enregistrer l'image n'importe où, vous devez mettre sur un serveur web, que ce soit local ou distant suivante dans le répertoire php et photos, puis vous verrez comment il le fait dans la "Galerie" images apparaîtront .
D'autre part, si vous ne créez pas le html, essayer de refaire le projet. Dans Flex Builder -> Projet - Propreté>. Sélectionnez votre projet et vous permettra de reconstituer si tout va bien. Ne vous laissez le dossier html-template dans le navigateur?
osus bonjour moi encore, maintenant j'ai un doute parce que quand je lance cette application d'un moment à un autre plugin Shockwave apporte des conflits et de fermer la fenêtre de navigation ?????
Merci d'avance
Bonjour André,
Je ne sais pas ce que l'erreur que vous mentionnez.
J'ai essayé votre lien, http://neoslink.tk/ , et il a bien fonctionné.
Avez-vous plus de données sur l'erreur?
Osus HOLA, l'erreur était due à un virus dans le RED courait LA PLACE DE LA Photomaton AAPLICACION déjà, mais ALL GOOD désormais référence MA IS LIKE A streaming peut captage et le stockage de FLEX, MERCI ENCORE ET dire quel est le Photomaton Une grande application
Bonjour, très bonne est le code que j'ai essayé de montrer la photo en une image juste là dans le Flex, il fonctionne correctement la première fois, vous ne voyez que la deuxième manche, j'ai capture d'image et l'image des mises à jour, j'ai remarqué que si vous enregistrez, mais pas mettre à jour l'affichage du temps. quelqu'un peut-il aider s'il vous plaît ...??
Bonsoir, je fais une application PHP, mais la capture d'image à partir d'un reuqiero web cam, je pourrais fournir le code s'il vous plaît. Merci
Bonjour, je vous remercie beaucoup pour l'affichage de ce code est très utile et vous apporte certaines des merveilles du flex. Dans le HTTPService ne vois nulle part de passer en paramètre le code php photo, prendre la photo, mais pas la garde. Est-ce que cette erreur?
J'ai trouvé ce qui se passait, si vous demandez, vous l'envoyer comme un paramètre de httpservise.send (dddd) .... vous venez de supprimer la condition sur le code PHP et cela a fonctionné parfaitement. MERCI
Bonjour à tous,
J'ai compilé le flex parfait et tout ce que j'ai les autorisations et le dossier d'images tout en gardant mon dossier.
J'ai suivi toutes les étapes que vous avez défini et aucune donnée n'est transférée est localhost.
Et j'ai testé le upload.php et je ne reçois pas la variable $ image _POST ['] est vide, mais séparés par un formulaire que vous a dit que si je vous écris afin que vous ne pouvez pas échouer et je ne pense pas que l'on peut .
Un salut et Merci à l'avance.
Laura Salut,
Avez-vous quelque part, nous pouvons faire votre demande en ligne pour voir ce qui se passe?
Cordialement
Bonjour je mets en osus http://www.d724.es/fotomaton/fotomaton.html l'application fonctionne bien vous diront qu'il sauvé mais pas sur le serveur.
Et l'échec n'est pas que je n'ai aucune idée de ce qui se passe.
Un salut et Merci pour votre réponse rapide osus.
Laura Salut,
J'ai essayé votre demande et cela a fonctionné parfaitement:
http://www.d724.es/fotomaton/fotos/foto.jpg
bonjour comme ils sont, maintenant, je travaille sur mon proyrcto du diplôme d'études collégiales et je ne peux que prendre des photos en millisecondes mais je tiens à faire est de créer une vidéo qui streamming et stockés sur le serveur, l'idée est que n'importe qui peut enregistrer une vidéo capture youtube style rapide
Andrew Salut,
Besoin d'un produit du type de Flash Media Server.
Je laisse quelques tutoriels de base pour vous lancer sur la scène:
http://blog.osusnet.com/tag/fms/
Salut @ osus la sonde et le fichier upload.php ne fonctionne pas ne sais pas si les guillemets "est bien mis afin que vous pourriez publier les upload.php fichier correctement? S'il vous plaît, c'est que a fallu plus de sept heures et je n'ai rien upload.php d'autres sur Internet, mais aucune réalisation ajusté
J'ai dit que l'image correctement, mais je ne vois pas le dossier et le nez si vous avez d'avoir des fonctions actives en php ou quelque chose, il libère le fichier flex avec le upload.php emplacement correct
J'ai une autre question fait dans Flash CS3 code et il fonctionne parfaitement le seul problème est que j'ai vu d'autres pages IMEG et une image photo est beaucoup mieux mais j'ai l'flashq chapeau comme vous le voyez pizalado et ma webcam est iagen bon d'être seul que le flash se passe comme pixélisé que résoudre ce problème en flash?
Fernando Juan Salut
Le script est extrêmement simple, toute personne ayant une connaissance de base de PHP peuvent répondre à vos besoins. Le travail que j'ai mis au moins mon.
La seule chose étrange, il ne fait que vérifier la taille de l'image reçue, et si moins de 1600 octets ne se soucient pas, je le fais pour ne pas enregistrer les photos blanc, la preuve que les gens se concentrent sur un mur, etc
De plus, assurez-vous d'avoir les permissions d'écriture sur le répertoire où vous avez laissé les photos.
@ Osus ont le droit et la fixer Merci! une dernière chose que vous savez comment faire pour agrandir la capture d'image? modifier et pas juste me dire comment faire ce code a été ajoutée? c'est tout
s'attendre à une réponse Merci
@ Osus travaillé je vous remercie beaucoup et je sais comment faire pour agrandir votre capture d'image? de 160 x 120, si pas plus grand
Fernando Juan Genial.
Pour agrandir l'image sera fait dans le Flex, l'idée vient ici
vidéo = new Video (Camera.width, Camera.height)
Évidemment, la limite est de la résolution de la caméra.
Osus Bonjour,
tout d'abord vous féliciter de l'application est exactement ce que je cherchais
Rejet du compliments viennent les questions: p
J'ai Flex Builder 3, j'ai importé le projet, j'ai fait un nettoyage et une construction mais génère le fotomaton.html moi, donc je ne peux pas exécuter l'application. Avez-vous une idée d'où peut mon erreur?
Une salutation.
Bonne Alexander
Assurez-vous que les propriétés du projet, sous la rubrique «Flex Compiler", vous cochez l'option «Générer le fichier HTML wrapper.
C'est tout ce que je peux penser. Quoi qu'il en soit vous pouvez toujours intégrer un phénomène SWF sur votre propre en html.
Laissez une réponse