Die Idee ist einfach, Sie mit der Webcam von Ihren Benutzern zu verbinden, nehmen sie ein Bild und schicken Sie es an einer Galerie, wo Sie die Smileys Ihrer Besucher sehen können. Die Umsetzung ist fast so einfach wie die Theorie und das Ergebnis ist erstaunlich und originell.
Das System ist das gleiche wie benutzt BloggerSnap , ein Dienst, der eine unglaubliche Erfolg beim Start hatte und es scheint seit April geschlossen. Vor einem Jahr war vor 40.000 seit Alexa , wurde vermutlich sogar noch höher. Ich kann mir vorstellen, es wäre sehr schwer zu halten die Kosten für Bandbreite, so beliebt. Ein paar Jahren waren wir über einen ähnlichen Dienst starten und zu entlassen, weil wir nicht sehen, wie man Geld verdienen, während nur erfolgreich sein würde die Kosten explodieren.
In einem normalen Szenario dependerías von Software, die Sie installieren müssen, würde, so dass es das Foto und dann schicken Sie sie, die nicht bekommen würde das Ziel der instantaneity machen würde, aber es ist eine Lösung, die alles durch eine Online-Anwendung tun können: Flash in unserem Fall Flex 
.
Die Macht der Flash-Plattform in der Audio-und Video-Behandlung geht weit über das, was mag und anspruchsvollen Multimedia-Anwendungen mit Beteiligung der Nutzer recht schnell erstellen. Wenn Sie auch genug Geld, können Sie es kombinieren mit Flash Media Server und die Grenzen werden Ihrer Phantasie setzen. Ein weiterer Tag werden wir ein Videochat 
.
Der Schlüssel ist, Zugriff auf die Kamera und das Mikrofon Geräte, die Flash Platform Benutzer Berechtigung ermöglicht, offensichtlich. Wenn Sie zulassen, verbindet der Spieler Ihrer Webcam und beginnen, welche das Video von ihm und, wenn die Anwendung es erfordert, senden Sie sie an andere Benutzer. Das gleiche kann mit Audio erfolgen.
Im heutigen Workshop werden wir machen eine kleine Anwendung, um eine sofortige photo gallery in web / Blog zu erstellen. Benutzer, die möchten, können Sie das Foto mit Ihrer eigenen Webcam zu nehmen, und es wird in der Galerie untergebracht werden. Einfache, aber auffällig.
Die Anwendung wird aus zwei Teilen bestehen:
- Fängt Zone: eine Anwendung in Flex entwickelt, das Benutzern erlaubt zu fotografieren keine Notwendigkeit mehr, eine Webcam haben wird.
- Galerie: eine einfache HTML-Seite, die alle Fotos, die sich Benutzer haben auflistet.
Die Aufnahme von Bildern
Es mag zwar sehr kompliziert werden wir sehen, dass die Leichtigkeit der Verbindung mit Flex Webcam ist genial.
Unsere Anwendung besteht aus nur zwei Komponenten, einem Bild und einer Taste. Das Bild, das wir einfach bringen einige Stil und Knopf Trigger die Nutzung unserer Kamera online.
Es gibt drei verschiedene Aufgaben:
- Verbinden Sie mit der Webcam.
- Capture the photo.
- Schicken Sie es an unsere Server.
Verbinden mit Webcam
Mit diesem einfachen Code in unserer Anwendung werden wir betrachten die Webcam, dass der Benutzer an den Computer angeschlossen.
insertWebcamVideo ( ) : void { insertWebcamVideo private function (): void {
UIComponent ( ) ; var videoHolder: UIComponent = new UIComponent ();
Camera . names . length > 0 ) { if (kamera. Namen. Länge> 0) {
. getCamera ( ) ; . = Kamera Kamera getCamera ();
camera == null || camera . width == -1 || camera . height == -1 || camera . fps == -1 ) { if (Kamera == null | |. Breite Kamera == -1 | |. camera Höhe == -1 | |. fps Kamera == -1) {
"Lo sentimos, no tienes cámara" , "Error" , 4 , null , null , iconoAlerta ) ; . Alarm Show ("Sorry, du hast keine Kamera", "Error", 4, null, null, iconoAlerta);
; Capture aktiviert = false.
; Kamera = null;
{ Else {}
( StatusEvent. STATUS , cerrar ) ; . Kamera addEventListener (StatusEvent. STATUS, schließen);
Video ( camera . width , camera . height ) ; Video = new Video (kamera. Breite, Höhe Kamera.);
( camera ) ; . attachCamera Video (Kamera);
video ) ; . videoHolder addChild (Video);
. width ; . videoHolder width = Video Breite.
. height ; . videoHolder height = Video Höhe.
; videoHolder sichtbar = true.
; videoHolder und = 0.
videoHolder, 0 ) ; . box addChildAt (videoHolder, 0);
fotillo ) ; . box removeChild (fotillo);
}
{ Else {}
"Lo sentimos, no tienes cámara" , "Error" , 4 , null , null , iconoAlerta ) ; . Alarm Show ("Sorry, du hast keine Kamera", "Error", 4, null, null, iconoAlerta);
; Capture aktiviert = false.
}
/ / Security.showSettings (SecurityPanel.CAMERA);
}
So einfach wie zuerst, ob Sie Webcam (aber offensichtlich können keine Bilder ) Und fügen Sie es zu einer Video-Komponente, dass wir eine UIComponent eingebaut haben, um es in die Anwendung anzuzeigen. Zu diesem Zeitpunkt haben wir die Live-Kamera-Benutzer in der Anwendung.
Nehmen Sie ein Foto
Unter den Video-Stream in der Anwendung, wollen wir, dass, wenn der Benutzer die Taste "Aufnahme"-Schaltfläche und dann schießen.
getSnapshot ( ) : void { getSnapshot private function (): void {
BitmapData ( video . width , video . height , true ) ; var Momentaufnahme: BitmapData = new BitmapData (video. Breite, Höhe Video, wahr.);
Matrix ( ) ; var m: Matrix = new Matrix ();
video , m ) ; . Momentaufnahme draw (video, m);
JPGEncoder ( 75 ) ; jpegEnc var: = new JPGEncoder JPGEncoder (75);
( snapshot ) ; var jpegDat:. ByteArray = jpegEnc kodieren (Snapshot);
= base64Encode ( jpegDat ) ; img_src var String = Base64Encode (jpegDat);
img_src. length > 1600 ) { if (img_src. Länge> 1600) {
/ / Bild korrekt erfasst
{ Else {}
"La imagen capturada parece estar vacía" , "Error" , 4 , null , null , iconoAlerta ) ; . Alarm Show ("Das aufgenommene Bild scheint leer zu sein", "Error", 4, null, null, iconoAlerta);
}
}
Mit dieser anderen Code hat dieser Effekt. Gibt eine bitweise Capture Video-Objekt und komprimiert in JPEG auf den Server zu senden. Wir haben bereits das Foto aufgenommen!
Senden Sie dieses Foto
Wir verwenden eine POST HTTPService um ein Foto senden wir getan haben, und wir werden in einer Datenbank zu halten. Wir sind auf die vorherige Funktion Code hinzufügen, um das Bild zu senden.
getSnapshot ( ) : void { getSnapshot private function (): void {
BitmapData ( video . width , video . height , true ) ; var Momentaufnahme: BitmapData = new BitmapData (video. Breite, Höhe Video, wahr.);
Matrix ( ) ; var m: Matrix = new Matrix ();
video , m ) ; . Momentaufnahme draw (video, m);
JPGEncoder ( 75 ) ; jpegEnc var: = new JPGEncoder JPGEncoder (75);
( snapshot ) ; var jpegDat:. ByteArray = jpegEnc kodieren (Snapshot);
= base64Encode ( jpegDat ) ; img_src var String = Base64Encode (jpegDat);
img_src. length > 1600 ) { if (img_src. Länge> 1600) {
= new Object ( ) ; var Temp.: Object = new Object ();
temp = img_src Bild.
temp ) ; HTTPService senden (temp).;
( this as DisplayObject, ventanaEspera, true ) ) ; cargandoWindow = ventanaEspera (PopUpManager. createPopUp (dies als DisplayObject, ventanaEspera, true));
{ Else {}
"La imagen capturada parece estar vacía" , "Error" , 4 , null , null , iconoAlerta ) ; . Alarm Show ("Das aufgenommene Bild scheint leer zu sein", "Error", 4, null, null, iconoAlerta);
}
}
<Mx: HTTPService
Fehler = "onHTTPFault (event)" />
Das war's. Die upload.php Skript auf Ihrem Server POST die Variable "Bild" mit dem Inhalt Ihres Fotos. Nur muss es in einer Datei gespeichert werden und fertig die Spaltung komplizierter? das Projekt.
$_POST [ 'imagen' ] & strlen ( $_POST [ 'imagen' ] ) != 0 & strlen ( $_POST [ 'imagen' ] ) > 1600 ) { if ($ _POST ['image'] &
strlen ($ _POST ['image'])! =
0 &
strlen ($ _POST ['image'])> 1600) { ( $_POST [ 'imagen' ] ) ; $ Bmd =
base64_decode ($ _POST ['image']); ( "fotos/foto.jpg" , 'w' ) ; $ Im =
fopen ("Fotos / photo.jpg", 'w'); $im , $bmd ) ; fwrite ($ im, $ bmd); }
Vor dem Speichern des Bildes auf der Festplatte könnte einen Datensatz in einer Datenbank, die Sie nach der Galerie generieren können hinzuzufügen. Das Teil ist Ihre Wahl.
Generieren der Galerie
Das ist der einfache Teil, erstellen Sie einfach ein PHP-Skript (oder die von Ihnen bevorzugte Sprache), um die Fotos, die Sie in der Datenbank Paging aufgespart habe, wie Sie denken, entsprechende Liste. Ich denke, zu viele Weitere Kommentare für etwas so einfach.
Schlussfolgerungen
Wir haben gesehen, wie in ein extrem schnell und einfach auf die Webcam (und Mikrofon) Benutzer verbinden. Wir haben nur gesehen, wie man eine Momentaufnahme von dem, was Sie durch die Kamera zu sehen, zu machen, aber das System öffnet eine riesige Welt an Möglichkeiten.
Laden Sie hier das Projekt Code.
