Intro

Ik ben een software engineering student die ook gepassioneerd door fotografie is dus ik wilde het combineren van de twee belangen in een leuk project. Wat ik eindigde met is een webserver die automatisch foto's naar de browser van elke verbonden verschijnt zodra een foto is genomen met een digitale camera. Nu wil ik je leren hoe om het te maken!

Ik maakte dit instructable voor de fotowedstrijd en ik zou echt waarderen uw stem als je denkt dat het is waardig (Klik op de oranje "stemming" bovenaan rechts lint). Bedankt!

Hebt u niet veel ervaring codering, raak niet in paniek! Ik zal u door elke coderegel letterlijk lopen. Het duurt slechts ongeveer een uur.

Dit Instructable maakt gebruik van een kaart van BR van oog-Fi ($39.99 nieuwe) die deel van het werk voor ons doet door draadloos foto's vanuit de camera overbrengen naar een computer of die u het gedrag van de oog-Fi nabootsen kunt door foto's in een map we maken plakken! Ik zal je laten zien hoe een Eye-Fi card zodanig instellen dat kunnen we een foto uit de camera naar de juiste map en het instellen van een webserver die foto uit de map aan de browsers van veel mensen - om onmiddellijk te worden!

Ten eerste zullen we het werkend op een lokaal netwerk, zodat het kan worden gedeeld met andere mensen verbonden met dezelfde wi-fi verbinding (die een meerderheid van de Instructable). Vervolgens, voor de meer technische menigte leg ik uit een paar stappen over hoe het functioneren op een publieke webserver zodat iedereen op de gehele world wide web uw live stream controleren kunt te krijgen. Alle code kan worden gevonden in mijn archief Github.

Uitleg systeem

Hebt u een paar fysieke dingen nodig:

• SD-kaart toegelaten Digitale Camera
• Kaart van BR van oog-Fi
• Een op Internet aangesloten Computer

Laten we een systeemdiagram van hoe dit gaat werken.

Zodra de foto is genomen, wordt de afbeelding naar oog-Fi servers verzonden voordat het wordt doorgestuurd naar onze eigen computer. In de tussentijd is onze server verbindingen accepteert en web sockets openen met elke browser die verbinding ermee probeert te maken. Wanneer de server een nieuwe afbeelding die klaar is met het uploaden detecteert, verzendt deze een koppeling naar die afbeelding aan elk van de klanten via de aansluiting. Vrij simpel, toch?

Dus laten we aan de slag.

Server instellen

We zullen eerst knooppunt JS (die ik zal noemen als gewoon 'knooppunt') voor het uitvoeren van onze server te installeren. Er zijn een paar eenvoudige methoden die worden beschreven op het knooppunt Github pagina. Zodra knooppunt is geïnstalleerd, we maken een directory voor het project en installeer een paar knooppunt modules die ons leven veel gemakkelijker zal maken. Wij zal met behulp van de terminal om deze taken te voltooien en voor een paar soortgelijke taken in de toekomst. Op Windows, dit kan worden geopend door op de windows-toets, typen 'cmd', en druk vervolgens op invoeren. Op OSX, open het programma Terminal. Voer de volgende opdrachten in de terminal. Knooppunt-horloge is voor het controleren van onze directory, express is het kader die we voor onze web-server gebruiken en socket.io is voor het handhaven van web sockets.

Ik verontschuldig me dat geen van de code kopieerbaar is; u kunt code op de Instructable site kan niet schrijven omdat ze niet willen dat je het hacken. Ik kan niet zeggen dat ik het ze kwalijk nemen.

Nu kunnen we beginnen met het maken van onze server. In je editor naar keuze (< 3 sublieme tekst) Maak een bestand genaamd "livePhotoServer.js", ga in de code hieronder en sla het in onze projectmap. Wat we doen in dit stuk is gewoon importeren de code uit de modules moeten we uitvoeren van een web-app ('http' en 'express') en het opzetten van de server verbindingen van clients accepteert. De details zijn niet heel belangrijk.

Nu dat de code is geschreven, zullen we de server uitvoeren. De server wordt uitgevoerd, Voer knooppunt livePhotoServer.js en, later, wanneer we moeten stoppen, typt u control + c. Maar voor nu laat draaien.

Opmerking: U ontvangt een foutbericht als ' fout: Luister EADDRINUSE' wanneer het proberen om de server te draaien, moet u wellicht de actieve poort te wijzigen. Om dat te doen, Wijzig regel 19 van 'livePhotoServer.js' server.listen(X); waarbij X een getal tussen 3000 en 9000 maar niet 8080 is.

Nu, als u uw webbrowser open en navigeer naar 'localhost8080' (of als u moest veranderen uw nummer van de poort, voert u dat poortnummer na de dubbele punt), moet u "Welkom op onze awesome foto streamer!". Dat betekent dat onze server reageert!

Het volgende wat dat we gaan doen is dienen tot een werkelijke HTML-pagina in plaats van tekst wanneer we de server, raken zodat we uiteindelijk een afbeelding kunt weergeven. Eerst maken we een map binnen onze projectmap met de naam 'openbare' binnenkant die we zullen slaan of de bestanden die we onze klanten serveren.

Toen we een bestand genaamd 'livePhoto.html' in de map 'public' en voer de onderstaande code erin. De code maakt een eenvoudige webpagina met een enkele Rode plein.

Tenslotte, laten we een paar regels aan onze 'livePhotoServer.js' bestand toevoegt die de openbare map geconfigureerd als onze statische bestandsdeling bron (lijn 14) en omvatten de module voor het lezen van bestanden (lijn 17). Vervolgens wijzigen wij onze root-route (lijnen 20-24) om te lezen onze livePhoto.html bestand en verzenden van de tekst naar beneden in de reactie (die wordt weergegeven als HTML in de browser). Ik moedig de regelnummers in de screenshots om erachter te komen waar in de bestanden die de code bits gaan vergelijken.

Nu moeten we de server om opnieuw te beginnen. Als u wilt terugkeren van een map, typ 'cd..'  waarna u kunt het starten van de server (knooppunt livePhotoServer.js). Laden van http://localhost: 8080 (of wat uw nummer van de poort is) in uw browser en zie het Rode plein!

Er is één meer laag van de mededeling die wij tussen onze server en onze client moeten: websockets. Websockets geeft de server de mogelijkheid tot een overdracht van gegevens naar de client in plaats van naar gelang naar de koper te vragen van nieuwe pagina's. We kunnen deze twee richtingen buizen gebruiken open te houden een communicatiekanaal dat de client een bericht ontvangt als we een nieuwe foto ontvangen.

We beginnen door twee lijnen toe te voegen aan ons script 'livePhotoServer.js'. Ten eerste, wij importeren van de socket-io-module en beginnen te luisteren voor verbindingen op adres van onze server. Vervolgens maken we een array om verwijzingen naar de aansluitingen die we maken.

Vervolgens schrijven we een methode die op onze server web socket-verbindingen van clients accepteert, slaat de socket-verwijzing naar de array en stuurt een beetje message terug om te controleren of het werkte. Ook, zodat de logica die schoon, we verwijderen de socket-verwijzing uit de matrix op loskoppelen.

Nu moeten we om te schrijven van de logica die wordt geïnitialiseerd web socketverbindingen vanuit de browser wanneer het de pagina van onze server laadt. Maak een bestand met een adellijke titel ' livePhoto-client.js " in de openbare map en sommige code toevoegen om te starten van een web-socketverbinding met de server (lijn 2). Wanneer de client een 'verbonden' bericht van de server ontvangt, wordt het een dialoogvenster geopend met de inhoud van het bericht (lijnen 5-10).

Het laatste deel van onze web socket brouwsel omvat het uitvoeren van deze client-side javascript door te linken naar het uit onze client HTML-bestand. Wij ook koppelen aan de socket-io-code (die moet gedeclareerd worden voor ons livePhoto-client.js-bestand zodat de io-bibliotheek geen niet-gedefinieerde is). jQuery is ook gekoppeld omdat het ons leven een beetje makkelijker maken zal als we later meer ingewikkelde code toevoegt.

Als u de server opnieuw, en reload de pagina, moet u een waarschuwingsvenster met de boodschap: ' bericht van server: Welkom bij Photo Stream. " Als u ziet dat uw websockets prachtig werkt!

Oef! Al genoeg javascript. Laten we zo configureren dat de Eye-Fi-kaart om te werken met onze code.

Oog-Fi instellen

Ten eerste, we gonna een map 'afbeeldingen' binnen onze 'openbare' folder die onze foto's magische wijze zal worden geleverd aan (of wie u annuleerteken stijfsel beelden in als u niet over een Eye-Fi card) maken.

Als u nooit uw oog-Fi-kaart gebruikt hebt, volg de instructies op oog-Fi-website als u wilt instellen. Als u het al hebt gebruikt, zorg ervoor dat u kunt aansluiten op een draadloos netwerk. We gonna willen ervoor zorgen dat de kaart naar de map 'afbeeldingen' binnenkant van onze 'openbare' map foto's uploadt, en dat het datumgebonden mappen niet maken. Bent u verward over deze stap, zie het screenshot hieronder van oog-Fi Center App.

Tot slot kunnen we beginnen met het nemen van foto's! Ik adviseer je camera's wijzigen naar de laagste resolutie mogelijk, als er de capaciteit, zodat we sneller uploaden tijden kunt bereiken. Een paar foto's nemen en te verifiëren dat ze in de map 'afbeeldingen belanden'. Als het niet lijkt te werken, zorg ervoor dat je camera niet in slaapstand gaat na het nemen van foto's en dat je dicht genoeg bij de draadloze router. Ik had een paar problemen met dit mezelf toen ik aan het project werkte.
Nu laten we terug naar de code!

Bestand systeemcontrole

We gaan nu beginnen met de monitoring van onze bestandssysteem te detecteren als oog-Fi een nieuwe foto aan onze folder 'beelden levert'. We moet de onderstaande code toevoegen naar onze 'livePhotoServer.js' bestand zodat we het knooppunt-horloge-module voor het gebruik van het horloge methode kunt importeren. Het monitoren van een map en geeft ons een retouraanroep die het zal uitvoeren wanneer een bestand wordt gewijzigd (lijn 32). De bestandsnaam van het gewijzigde bestand in de callback biedt is helaas de naam van de bovenliggende map (in ons geval ' publiek/beelden') wie vrij onnut zit. In plaats daarvan maken we een array genaamd beelden waarin we zullen handmatig bijhouden van de beelden die we al hebt weergegeven, zodat we welk beeld is nieuwe weten wanneer het bestandssysteem is gewijzigd (we schrijven de tenuitvoerlegging van findNewImageName() in de volgende stap).

Nu gaan we meer code toevoegen aan onze 'livePhotoServer.js' bestand toe te voegen van alle afbeeldingen die in de directory naar onze matrix, zodra we de server starten, zodat we niet per ongeluk weergegeven hen als wij nemen meer foto's (lijnen 92-103 & 106). Dan, wanneer we bericht van knooppunt-horloge dat iets veranderd krijgen, kunnen we herhalen het bestandssysteem Zie welk bestand niet in onze matrix (lijnen 71-85). Het lijkt een beetje ingewikkeld voor zulk een eenvoudige taak zo als iedereen aan een eenvoudiger manier denken kunt van doen, laat het me weten.

Nu, als u de server opnieuw opstart en een paar foto's nemen, uw terminal moet uitprinten de bestandsnamen van de foto's die je neemt! Awesome.

Afbeelding URL transmissie en Rendering

Het laatste deel van het systeem waarbij wordt verzonden over de URL's van de nieuwe afbeeldingen aan alle van de afwachting client-aansluitingen. In onze "livePhotoServer.js" bestand, voegen we wat code om de clients te updaten door het doorlopen van de array sockets en verzenden neer de URL naar elkaar. Dit wordt aangeroepen wanneer we een wijziging in het bestandssysteem herkend.

Vervolgens werken we onze 'livePhoto.html' bestand te nemen uit het Rode plein en vervangen door een afbeeldingselement dat kan worden bijgewerkt. Het de 'live-foto' id toewijzen zodat wij het in onze JavaScript kan gebruiken.

Wij zullen ten slotte onze client-side JavaScript bijwerken zodat het socket berichten met de nieuwe afbeelding URL's kunt ontvangen. We gebruiken jQuery te vinden het afbeeldingselement en bijwerken van het bronkenmerk (lijnen 5-11).

Begin uw server van het knooppunt opnieuw, vernieuw uw localhost8080 pagina en beginnen met het nemen van foto's. Moeten zij op de pagina in realtime bijwerken! Er is over een 3 tweede vertraging tussen fotograferen en hen verschijnen in mijn browser als u de bestandsgrootte 'S3' instelling op mijn Canon DSLR dus verwacht een vertraging van het vervoer van die omvang.

U kunt ook de live stream van een ander apparaat op hetzelfde draadloze netwerk als de server bekijken. Gewoon het vinden van uw IP-adres met behulp van hetzij het ifconfig commando, als je met OSX of de ipconfig, als uw lopende Vensters, in uw terminal. Voer dat IP adres gevolgd door ': 8080' (of welke poort nummer u gebruikt) op een ander apparaat, en het zal updaten met foto's aangezien u hen nemen (of plak ze in de map 'afbeeldingen').

Geniet van!

Optionele & geavanceerdere: Live Stream van een Website

Als u al een FTPserver actief ergens, is het niet te veel meer moeite om deze foto streaming server naar het verplaatsen. Er zijn drie wijzigingen die wij moeten maken:

• Het adres van de client socket wijzigen
• De Eye-Fi-configuratie wijzigen
• Controleer als de foto's volledig zijn geüpload voordat klanten

Laten we beginnen met het veranderen van het client-socket adres. In de ' livePhoto-client.js' file, de io.connect-methode om te accepteren van de domeinnaam van uw server te wijzigen:

Nu gaan we gebruik maken van oog-Fi de mogelijkheid om de foto's sturen naar een FTP-server. Moet u oog-Fi grote instructies hoe deze hier , maar ik ook wilt opgeven van één meer ding. Voor sommige reden, oog-Fi niet toegestaan te weigeren met een adellijke titel directory maken voor de foto's zoals ze doen als je ze overgebracht naar uw lokale computer, dus je moet om te wijzen op de FTP-transactie voor LivePhoto/publiek (in plaats van LivePhoto/publiek/afbeeldingen zoals we voorheen) en de naam van het album ingesteld op beelden. Op die manier de structuur van het bestand blijft hetzelfde dus onze code niet breken.

De laatste wijziging die we moeten maken is een gevolg van de FTP-implementatie (het kan afhangen van de FTP-service die u gebruikt op uw server... Ik ben niet zeker... Ik gebruikte pure-ftp). Ik vond dat toen ik de code van bovenaf op mijn FTPserver gebruikte, links zou over en weer aan clients worden verzonden als de upload in voortgang. Soms stopte de koppelingen worden verzonden voordat de upload voltooid was, zodat de browsers onvolledige of ontbrekende foto's zou zien. Om te compenseren dat effect op de eenvoudigste manier mogelijk, voegde ik een interval van.5 seconden voordat de link, en als een ander bestand verandering was omdat het beeld was nog steeds worden geüpload voor de.5 seconden was ontdekt, ik het interval resetten. Dit leek het probleem te verlichten.

Er zijn een paar andere ingewikkelder, maar meer betrouwbaar, manieren om rond dit zoals controle van programma's zoals lsof (staat voor de geopende bestanden lijst) of de controle van uw FTP-server logs omdat ze geven meestal wanneer een bestand is voltooid uploaden. Echter voor deze demo, zou die geweest zijn meer moeite dan ze waard.

En thats it! De server van het knooppunt worden uitgevoerd, ga naar YOUR_DOMAIN:8080 en begin live streaming van uw foto's!

Mijn dank gaat uit naar selkeymoonbeam voor haar hulp werken knikken uit dit Instructable.