Intro

Jag är en software engineering student som också brinner för fotografering så jag ville kombinera två intressen på ett roligt projekt. Vad jag slutade med är en webbserver för att automatiskt visa bilder till alla anslutna webbläsare när en bild är tagna med en digitalkamera. Nu vill jag lära dig att göra det också!

Jag gjorde detta instructable för fotografering tävling och jag skulle verkligen uppskatta din röst om du tycker det är värdig (Klicka på det orange "röst" band längst upp till höger). Tack!

Om du inte har mycket kodning erfarenhet, inte panik! Jag kommer att bokstavligen gå igenom varje kodrad. Det tar bara ca en timme.

Detta Instructable använder sig av ett Eye-Fi SD-kort ($39,99 nya) som gör några av arbetet för oss av trådlös överföring av bilder från kameran till en dator eller du kan härma beteendet hos den Öga-Fi genom att klistra in bilder i en katalog som skapar vi! Jag ska visa dig hur du ställer in ett Eye-Fi kort så att vi kan få en bild från kameran till rätt katalog och hur du ställer in en server till få fotot från katalogen till webbläsare för massor av människor - ögonblickligen!

Först får vi det att fungera på ett lokalt nätverk så att den kan delas med andra människor är ansluten till samma wi-fi-anslutning (som är en majoritet av Instructable). Då, för mer tekniska publiken, jag ska förklara ytterligare några steg om hur man får det fungerar på en kundinriktade webbserver så någon på hela webben kan kolla din levande ström. All kod finns i min Github databas.

Systemet förklaring

Du behöver några fysiska saker:

• SD-kortet aktiverat digitalkamera
• Eye-Fi SD-kort
• En Internet-ansluten dator

Låt oss titta på ett system diagram över hur detta kommer att fungera.

När bilden är tagen, skickas bilden till Eye-Fi: s servrar innan vidarebefordras till vår egen dator. Under tiden är vår server acceptera anslutningar och öppna web sockets med alla webbläsare som försöker ansluta med den. När servern identifierar en ny bild som har avslutat uppladdning, skickar en länk till den bilden till alla kunder via uttaget. Ganska enkelt, eller hur?

Så låt oss komma igång.

Server som inrättats

Först måste vi installera nod JS (som jag hänvisar till som bara "nod") för att köra vår server. Det finns ett par enkla metoder beskrivs i noden Github sida. När noden är installerad, kommer vi göra en katalog för projektet och installera ett par nod moduler som gör våra liv enklare. Vi kommer att använda terminalen för att slutföra dessa uppgifter och för några liknande uppgifter i framtiden. På Windows, detta kan nås genom att trycka på windows-tangenten, att skriva "cmd", och tryck Ange. På OSX, bara öppna programmet Terminal. Kör följande kommandon i terminalen. Nod-klocka är för övervakning av vår katalog, express är den ram vi använder för vår webbserver och socket.io är för att upprätthålla web sockets.

Jag ber om ursäkt att ingen av koden är möjlig att kopiera; Du kan inte skriva kod på Instructables webbplats eftersom de inte vill du hacka den. Jag kan inte säga jag klandra dem.

Nu kan vi börja skapa vår server. I din redigerare val (< 3 sublima Text) skapa en fil som heter "livePhotoServer.js", ange i koden nedan och spara den i vår projektkatalog. Vad vi gör i det här segmentet är helt enkelt importerar koden från moduler som vi behöver för att köra en web app ("http" och "express") och hur du konfigurerar servern att acceptera anslutningar från klienter. Detaljerna är inte mycket viktigt.

Nu när koden har skrivits, kommer vi köra servern. För att köra servern, helt enkelt ange nod livePhotoServer.js och senare, när vi måste stoppa den, skriv control + c. Men för nu lämna den igång.

Obs: Om du får ett fel som "fel: lyssna EADDRINUSE' när jag försöker köra servern, du kan behöva ändra aktiva porten. För att göra det, ändra linje 19 av 'livePhotoServer.js' till server.listen(X), där X är ett nummer mellan 3000 och 9000 men inte 8080.

Nu, om du öppnar din webbläsare och navigera till "localhost: 8080" (eller, om du var tvungen att ändra din portnummer, ange det portnummer efter kolonet), bör du se "Välkommen till vår awesome foto streamer!". Det innebär att vår server svarar!

Nästa sak vi ska göra är tjäna upp en faktiska HTML-sida i stället för text när vi träffar på servern så att vi kan så småningom Visa en bild. Först skapar vi en katalog inuti våra projektkatalog som heter "offentliga" insidan som vi kommer att lagra någon av de filer som vi ska serva våra kunder.

Sedan ska vi skapa en fil som heter "livePhoto.html" inne i "offentliga" katalogen och ange koden nedan in i den. Koden skapar en enkel webbsida med en enda Röda torget.

Slutligen, låt oss lägga till ett par rader till vår "livePhotoServer.js" fil som konfigurerar den offentliga katalogen som våra statiska fildelning källa (linje 14) och inkludera modulen för att läsa filer (linje 17). Vi ändrar vår rot väg (linjerna 20-24) för att läsa vår livePhoto.html fil och skicka texten i svaret (som kommer att göra som HTML i webbläsaren). Jag uppmuntrar för att jämföra radnumren i skärmdumpar att räkna ut var i koden stycke gå-filer.

Nu måste vi starta om servern. För att gå tillbaka en katalog, skriv "cd.." efter vilken du kan starta server (nod livePhotoServer.js). Ladda localhost8080: (eller vad din portnummer är) i din webbläsare och se Röda torget!

Det är mer av ett skikt av kommunikation behövs mellan vår server och vår klient: websockets. WebSockets ger servern möjlighet att inleda en dataöverföring till klienten i stället för beroende på klienten att begära nya sidor. Vi kan använda dessa tvåvägskommunikation ledningar hålla öppet en kommunikationskanal som meddelar klienten när vi får ett nytt foto.

Vi ska börja med att lägga till två rader till vår "livePhotoServer.js" script. Först vi importera modulen socket io och börja lyssna för anslutningar på vår server adress. Sedan skapar vi en array för att hålla referenser till uttagen som vi ska göra.

Då ska vi skriva en metod som på vår server accepterar web socketanslutningar från klienter, lagrar socket hänvisningen till array och skickar ett litet meddelande tillbaka till se till att det fungerade. Också, för att hålla den ren, tar vi bort socket referensen från matrisen på logiken frånkoppling.

Nu måste vi skriva den logik som initierar web socketanslutningar från webbläsaren när den laddar sidan från vår server. Skapa en fil med namnet "livePhoto-client.js" i den allmänna katalogen och lägga till lite kod för att initiera en web socketanslutning till servern (linje 2). När klienten tar emot ett "connected" meddelande från servern, öppnas en dialogruta med innehållet i meddelandet (raderna 5-10).

Den sista delen av vår web socket hopkok innebär att köra denna klientsidan javascript genom att länka till det från vår klient HTML-fil. Vi länkar också till socket io koden (som måste deklareras innan vår livePhoto-client.js-filen så att io biblioteket inte är odefinierad). jQuery är också kopplade i eftersom det kommer att göra våra liv lite enklare när vi lägger till mer komplicerade koden senare.

Om du startar om servern igen och ladda om sidan, bör du se en varningsruta med meddelandet: "meddelande från servern: Välkommen till foto ström." Om du ser att din websockets arbetar vackert!

Phew! Tillräckligt javascript redan. Låt oss konfigurera Eye-Fi-kort att arbeta med vår kod.

Eye-Fi ställer in

Först, vi kommer att skapa en "bilder" katalog inuti våra "offentliga" katalog att våra bilder kommer att magiskt levereras till (eller som du kan klistra in bilder i om du inte har ett Eye-Fi kort).

Om du aldrig har använt din Eye-Fi kort, Följ instruktionerna på Eye-Fi: s webbplats för att ställa upp. Om du redan har använt det, se till att du kan ansluta till ett trådlöst nätverk. Vi kommer att se till att kortet överför foton till katalogen "bilder" i vår "offentliga" mappen och att det inte skapa datumbaserade mappar. Om du är förvirrad över det här steget, se skärmdump nedan från Eye-Fi Center App.

Slutligen kan vi börja ta bilder! Jag rekommenderar att ändra kamerans inställningar till den lägsta upplösningen möjligheten, om den har förmågan, så att vi kan uppnå snabbare uppladdning gånger. Ta några bilder och kontrollera att de hamnar i katalogen "bilder". Om det inte verkar fungera, se till att du kameran inte går in i viloläge efter att ha tagit bilder och att du är tillräckligt nära för att den trådlösa routern. Jag hade några problem med detta själv när jag arbetade på projektet.
Nu låt oss gå tillbaka till koden!

Fil System för övervakning

Nu ska vi börja övervaka våra filsystem att upptäcka när Eye-Fi levererar ett nytt foto till vår "bilder"-katalog. Vi måste lägga till koden nedan till vår "livePhotoServer.js" fil så att vi kan importera modulen nod-klocka för att utnyttja sin klocka metod. Det övervakar en katalog och ger oss en återuppringning kommer den att köra när en fil ändras (linje 32). Tyvärr är filnamnet på den ändrade filen ger i återanropet namnet på överordnad katalog (i vårt fall "allmänheten/bilder") som är ganska värdelös. I stället skapar vi en matris kallas bilder där vi manuellt hålla reda på de bilder vi har redan visas så att vi vet vilken bild är nytt när filsystemet ändras (vi ska skriva genomförandet av findNewImageName() i nästa steg).

Nu ska vi lägga till ytterligare kod till vår "livePhotoServer.js" fil att lägga till alla bilder som är i katalogen att vårt utbud så fort vi startar servern så att vi inte oavsiktligt visar dem som vi bilder ta mer (linjer 92-103 och 106). Sedan, när vi får meddelande från nod-klocka som något förändrats, vi kan iterera över filsystemet att se vilken fil är inte i vår matris (linjerna 71-85). Det verkar vara lite komplicerat för en så enkel uppgift så om någon kan tänka på ett enklare sätt att göra det, behaga låta mig veta.

Nu, om du startar om servern och ta några bilder, din terminal bör skriva ut filnamnen för de bilder du tar! Toppen.

Image URL överföring och återgivning

Den sista delen av systemet innebär att skicka över webbadresserna till de nya bilderna till alla väntar på klienten uttagen. I vår "livePhotoServer.js" fil, måste du lägga till lite kod för att uppdatera klienterna genom att söka igenom mängd sockets och skicka ner URL-adressen till var och en. Detta blir anropas när vi upptäcker en förändring i filsystemet.

Då uppdaterar vi vår "livePhoto.html" fil för att ta ut röda torget och ersätta det med ett bildelement som kan uppdateras. Tilldela den "live-foto" id så att vi kan nå det på vår JavaScript.

Slutligen, vi kommer att uppdatera vår klientsidan JavaScript så att den kan ta emot socket meddelanden med de nya bilden webbadresserna. Vi använder jQuery att hitta elementet bild och uppdatera sin källattribut (raderna 5-11).

Starta om din nod servern, uppdatera din localhost: 8080 sida och börja ta bilder. De bör att uppdatera sidan i realtid! Det är om en 3 andra eftersläpning mellan tar bilder och dem som förekommer i min webbläsare när du använder storleken "S3" inställning på min Canon DSLR så förväntar sig en transport försening i den storleksordningen.

Du kan också Visa live stream från någon annan enhet på samma trådlösa nätverk som servern. Helt enkelt hitta din IP-adress med antingen är kommandot ifconfig , om din kör OSX eller ipconfig, om din kör Windows i din terminal. Anger att IP-adress följt av ": 8080' (eller vilken port nummer du använde) på en annan enhet och det kommer att uppdatera med bilder som du tar dem (eller klistra in dem i mappen"bilder").

Njut!

Tillval & mer avancerade: levande ström från en webbplats

Om du redan har en FTP-server active någonstans, är det inte för mycket mer problem att flytta detta foto streaming server på den. Det finns tre förändringar vi måste göra:

• Ändra adressen för klientsocket
• Ändra konfigurationen av Eye-Fi
• Kontrollera om bilderna laddas helt innan klienter

Låt oss börja med att ändra klientsocket adress. I den "livePhoto-client.js' fil, ändra metoden io.connect för att acceptera serverns domännamn:

Nu ska vi använda Eye-Fi möjlighet att skicka bilder till en FTP-server. Du bör följa Eye-Fi bra instruktioner hur man gör detta här men jag också vill ange en sak. Av någon anledning Eye-Fi inte tillåter dig att inte tillåta titeln katalog skapande för bilder som de gör när du har dem överförs till din lokala dator, så du måste peka FTP-transaktionen till LivePhoto/offentliga (i stället för LivePhoto/public/bilder som vi hade innan) och ange albumnamnet till bilder. På så sätt filens struktur förblir densamma så vår kod inte bryta.

Den sista förändringen vi har att göra är en följd av FTP-implementationen (det kan bero på FTP-tjänsten du använder på din sever... Jag är inte säker... Jag använde ren-ftp). Jag tyckte att när jag använde koden från ovan på min FTP-server, länkar skulle skickas om och om igen till klienter som uppladdningen var pågår. Ibland stannade länkar som skickas innan uppladdningen var färdig så webbläsarna skulle se ofullständiga eller saknas bilder. För att motverka denna effekt på enklast möjliga sätt, jag la ett intervall på 5 sekunder innan du skickar in länken, och om en annan fil förändring upptäcks eftersom bilden var fortfarande laddas upp innan de 5 sekunderna var upp, jag återställa intervallet. Detta tycktes minska problemet.

Det finns ett par andra mer komplicerade, men mer tillförlitlig, sätt att ta sig runt detta som övervakning program som lsof (står för lista öppna filer) eller övervakning FTP-serverns loggar eftersom de vanligen anger när en fil har hämtats uppladdning. Dock för denna demo, skulle de ha varit mer problem än de är värda.

Och det är det! Köra nod servern, gå till YOUR_DOMAIN:8080 och börja direktuppspelning dina bilder!

Mitt tack går till selkeymoonbeam för hennes hjälp arbetar kinks ur detta Instructable.