Vous aimez les gif animés ?
Aujourd’hui, voici une petite application (à télécharger pour Mac en bas de cette article) pour transformer votre webcam en machine à gif, le tout en Processing !
Mode d’emploi : clic gauche pour ajouter une image, clic droit pour enregistrer, le fichier est créé dans le répertoire de l’application avec comme nom « l’heure » .gif, et on peut en refaire un en cliquant de nouveau.
Si vous voulez l’améliorer, il faut installer cette librairie dans votre Processing.
Les sources sont livrées dans le zip.
import processing.video.*;
import gifAnimation.*;
Capture myCapture;
GifMaker gifExport;
boolean ready;
String name;
Gif last;
void setup() {
ready=true;
background(0);
size(320, 240);
frameRate(25);
myCapture = new Capture(this, 320, 240, 30);
bw_start();
}
void bw_start() {
int s = second();
int m = minute();
int h = hour();
name = nf(h, 2)+"_"+nf(m, 2)+"_"+nf(s, 2)+".gif";
gifExport = new GifMaker(this, name, 0);
gifExport.setRepeat(0);
}
void captureEvent(Capture myCapture) {
myCapture.read();
}
void draw() {
if (ready) {
image(myCapture, 0, 0);
}
else {
PFont geneva = createFont("geneva", 9, false);
textFont(geneva, 9);
image(last, 0, 0);
text("Gif My Cam!\n-- result --\nclick to create again", 20, 20);
}
}
void mousePressed() {
if (ready) {
if (mouseButton== LEFT) {
gifExport.setSize(320, 240);
gifExport.setDelay(70);
gifExport.addFrame();
}
if (mouseButton== RIGHT) {
ready=false;
gifExport.finish();
last = new Gif(this, name);
last.play();
}
}
else {
ready=true;
bw_start();
}
}
Après l’expérience d’Arcade Fire voici un autre clip 2.0 http://sour-mirror.jp/, je n’ai pas réussi à voir la version avec Facebook et/ou Twitter (ça charge trop longtemps) mais avec la webcam, c’est déjà génial !
Dernier point, ça ne marche que sous Chrome ou Safari (dommage pour les autres).
// mon flash + webcam semble faire planter firefox //
Je viens de réaliser un script en as3, pour faire des captures (snapshot) en jpg de la webcam x fois toutes les y millisecondes, avec un bout de php qui écrit le fichier sur le serveur (ou avec mamp/wamp/… sur votre disque dur) et comme je n’aime pas l’as3, les class, le compilateur Flash, j’ai passé des variables via le html ! J’ai rien inventé, j’ai juste compilé des exemples mais ce fut assez hasardeux pour avoir une image correcte… la plupart des scripts propose du 160 x 120, là j’ai un 1200 x 900 (enfin la isight des macbook monte qu’à 800 x 600 je crois).
Les fichiers sources sont en bas.
Pour changer x et y, fichier html -> ligne 14 et 15 (boucle et delay)
Pour lancer l’application, une fois mamp/wamp ok -> copier aussi dans htdocs ou www, puis ouvrir
http://localhost:xxxx/xxxxx/index.html
L’image de la webcam bug quelques secondes au lancement, une fois stable, on clique et les captures sont sur le disque dur dans le dossier de l’index.html.
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Timer;
import flash.events.TimerEvent;
import com.adobe.images.JPGEncoder;
var Delay:Number = (this.loaderInfo.parameters.Delay)?this.loaderInfo.parameters.Delay:5000;
var Boucle:Number = (this.loaderInfo.parameters.Boucle)?this.loaderInfo.parameters.Boucle:10;
var MonChemin:String = (this.loaderInfo.parameters.MonChemin)?this.loaderInfo.parameters.MonChemin:"";
var cam:Camera = Camera.getCamera();
var bandwidth:int=0;// Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int=100;// this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
cam.setQuality(bandwidth, quality);
cam.setMode(1200,900,5,true);
var video:Video = new Video(1200,900);
video.attachCamera(cam);
video.x = 0;
video.y = 0;
addChild(video);
var bitmapData:BitmapData = new BitmapData(video.width,video.height);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = 1200;
bitmap.y = 0;
addChild(bitmap);
//capture_mc
capture_mc.buttonMode = true;
capture_mc.addEventListener(MouseEvent.CLICK,captureImage);
function captureImage(e:MouseEvent):void {
//bitmapData.draw(video);
myTimer.start();
}
function prendrePhoto(e:TimerEvent):void {
var now:Date = new Date();
bitmapData.draw(video);
var bm_video:Bitmap = new Bitmap(bitmapData);
var jpgEncoder:JPGEncoder = new JPGEncoder(90);
var jpgStream:ByteArray = jpgEncoder.encode(bitmapData);
var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest(MonChemin+"upload.php?filename="+now.getHours()+"-"+now.getMinutes()+"-"+now.getSeconds()+".jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, uploadCompleted);
loader.load(jpgURLRequest);
bitmap.x = 0;
}
function uploadCompleted(e:Object):void {
trace("uploaded finisehd");
}
var myTimer:Timer=new Timer(Delay,Boucle);
myTimer.addEventListener("timer", prendrePhoto);
le php qui écrit sur le disque dur (ou sur le serveur).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="SwfcamPhp"/>
<meta name="author" content="Ben"/>
<meta name="keywords" content="swf"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.MonChemin = window.location.href; //"http://localhost:8888/snapshot/";
flashvars.Delay = 1000;
flashvars.Boucle = 10;
swfobject.embedSWF("camnice.swf", "flashcontent", "1200", "900", "10.0.0","",flashvars);
</script>
</head>
<body>
<div id="flashcontent">you need to get the new flash player</div>
</body>
</html>
Voici la source : swfcam.zip
Merci à quentin pour avoir dégoté un script as3 beaucoup mieux pour la résolution :)
Tout ça me donne quand même envie de me mettre à Processing :)