Online Live Photo Streaming From Any SD Card Enabled Camera

8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera

1/16


1/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/

Online Live Photo StreamingFrom Any SD

Card Enabled Camera

[1]
http://www.instructables.com/files/deriv/FMO/X9B5/HAQ39JB5/FMOX9B5HAQ39JB5.LARGE.jpghttp://www.instructables.com/files/deriv/FMO/X9B5/HAQ39JB5/FMOX9B5HAQ39JB5.LARGE.jpghttp://www.instructables.com/files/deriv/FMO/X9B5/HAQ39JB5/FMOX9B5HAQ39JB5.LARGE.jpghttp://www.instructables.com/files/deriv/F0M/DVGT/HAQ39LDQ/F0MDVGTHAQ39LDQ.LARGE.jpg


2/16



[2]

[3]

Intro

I'm a software engineering student who's also passionate about photography so I

wanted to combine the two interests in a fun project. What I ended up with is a

web server that will automatically display photos to any connected browser as

soon as a photo is taken with a digital camera. Now I want to teach you how to

make it too!
http://www.instructables.com/files/deriv/F9G/31I4/HAQ39MCF/F9G31I4HAQ39MCF.LARGE.jpghttp://www.instructables.com/files/deriv/FMO/X9B5/HAQ39JB5/FMOX9B5HAQ39JB5.LARGE.jpg


3/16


http://nodejs.org/https://github.com/johnnyman727/LivePhotohttp://www.eye.fi/


4/16



Express JS [7]to run our application

Socket IO [8]to power our web sockets

Node FS [9]to read files

Node-Watch [10]to monitor our file system for new images

Lets look at a system diagram of how this is going to work.

Once the photo is taken, the image is sent to Eye-Fi's servers before being

forwarded to our own computer. In the meantime, our server is accepting

connections and opening web sockets with each browser that attempts to

connect with it. When the server detects a new image that has finished

uploading, it sends a link to that image to each of the clients through the socket.

Pretty simple, right?

So let's get started.

Server Set Up

First, we'll need to install Node JS (which I'll refer to as just 'node') to run our

server. There are a couple of easy methods described on the node Github page

[11]. Once node is installed, we will make a directory for the project and install

the node modules I mentioned above that will make our lives much easier. We'll

be using the terminal to complete these tasks and for a few similar tasks in the

future. On Windows, this can be accessed by hitting the windows key, typing

'cmd', and then pressing enter. On OSX, just open the Terminal application. Run

the following commands in the terminal.
https://github.com/joyent/node/wiki/Installationhttps://npmjs.org/package/node-watchhttps://github.com/bpedro/node-fshttp://socket.io/http://expressjs.com/


5/16



I apologize that none of the code is copyable; you can't write code on

Instructable's site because they don't want you hacking it. I can't say I blame

them.

Now we can start creating our server. In your editor of choice (


6/16



responding!

The next thing we are going to do is serve up an actual HTML page instead of

text when we hit the server so that we can eventually display an image. First,

we'll create a directory inside our project directory called 'public' inside of which

we will store any of the files that we'll serve our clients.

Then we'll create a file called 'livePhoto.html' inside the 'public' directory and

enter the code below into it. The code creates a simple webpage with a single red

square.

Finally, let's add a couple of lines to our 'livePhotoServer.js' file that configures

the public directory as our static file sharing source (line 14), and include the

module for reading files (line 17). We then modify our root route (lines 20 - 24)

to read our livePhoto.html file and send the text down in the response (which

will render as HTML in the browser). I encourage to compare the line numbers in

the screenshots to figure out where in the files the code bits go.

Now we need to start the server again. To go back up a directory, type 'cd ..' after

which you can start the server (node livePhotoServer.js). Reload

http://localhost:8080 (or whatever your port number is) in your browser and seethe red square!

There is one more layer of communication we need between our server and our


7/16



client: websockets [13]. Websockets give the server the ability to initiate a data

transfer to the client instead of depending on the client to request new pages.

We can use these two-way pipes to keep open a communication channel that will

notify the client when we receive a new photo.

We'll start by adding two lines to our 'livePhotoServer.js' script. First, we import

the socket io module and start listening for connections on our server's address.

Then we create an array to hold references to the sockets that we'll make.

Then, we'll write a method that on our server accepts web socket connections

from clients, stores the socket reference to the array and sends a little messageback to make sure it worked. Also, to keep the logic clean, we'll remove the

socket reference from the array on disconnect.

Now we need to write the logic that initializes web socket connections from the

browser when it loads the page from our server. Create a file titled 'livePhoto-

client.js" in the public directoryand add some code to initiate a web socket

connection with the server (line 2). When the client receives a "connected"

message from the server, it will open a dialog box with the contents of the

message (lines 5 - 10).
http://en.wikipedia.org/wiki/WebSocket


8/16



The final part of our web socket concoction involves executing this client-side

javascript by linking to it from our client HTML file. We also link to the socket io

code (which must be declared before our livePhoto-client.js file so that the io

library is not undefined). jQuery is also linked in because it will make our lives a

little easier when we add more complicated code later.

If you restart the server again, and reload the page, you should see an alert box

with the message: 'Message from server: Welcome to Photo Stream." If you see

that, your websockets are working beautifully!

Phew! Enough javascript already. Let's configure the Eye-Fi card to work with

our code.

Eye-Fi Set Up

First, we're going to create an 'images' directory inside our 'public' directory that

our photos will be magically delivered to (or which you can paste images into if

you don't have an Eye-Fi card).

If you've never used your Eye-Fi card, follow the instructions on Eye-Fi's website

[14]to set it up. If you have already used it, make sure you can connect to a
http://support.eye.fi/cards/start/setup-eye-fi-card/


9/16



wireless network. We're going to want to make sure that the card uploads photos

to the 'images' directory inside of our 'public' folder and that it doesn't create

date-based folders. If you're confused about this step, see the screenshot below

from the Eye-Fi Center App.

Finally, we can start taking pictures! I recommend changing your camera'ssettings to the lowest resolution possible, if it has the capability, so we can

achieve faster upload times. Take a few pictures and verify that they end up in

the 'images' directory. If it doesn't seem to be working, make sure you camera

doesn't go into a sleep mode after taking pictures and that you're close enough to

the wireless router. I had a few problems with this myself when I was working

on the project.

Now let's get back to the code!

File System Monitoring

Now we are going to start monitoring our file system to detect when Eye-Fi

delivers a new photo to our 'images' directory. We'll need to add the code below

to our 'livePhotoServer.js' file so that we can import the node-watch module to

utilize it's watchmethod. It monitors a directory and provides us with a callback

it will execute when a file changes (line 32). Unfortunately, the filename of the

changed file it provides in the callback is the name of parent directory (in ourcase 'public/images') which is pretty useless. Instead, we'll create an array called

imagesin which we will manually keep track of the images we've already

displayed so that we know which image is new when the file system is changed


10/16



(we'll write the implementation offindNewImageName()in the next step).

Now we're going to add more code to our 'livePhotoServer.js' file to append all

the images that are in the directory to our array as soon as we start the server so

that we don't accidentally display them as we take more pictures (lines 92 - 103

& 106). Then, whenever we get notice from node-watch that something

changed, we can iterate over the file system to see which file isn't in our array

(lines 71 - 85). It seems to be a bit complicated for such a simple task so if

anyone can think of a simpler way of doing it, please let me know.


11/16



Now, if you restart the server and take a few photos, your terminal should print

out the file names of the pictures you're taking! Awesome.

Image URL Transmission And Rendering

The final part of the system involves sending over URLs of the new images to all

of the awaiting client sockets. In our 'livePhotoServer.js" file, we'll add some

code to update the clients by iterating through the array of sockets and sending

down the URL to each one. This gets called whenever we detect a change in the

filesystem.


12/16



Then we'll update our 'livePhoto.html' file to take out the red square and replaceit with an image element that can be updated. Assign it the 'live-photo' id so that

we can access it in our JavaScript.

Finally, we will update our client-side JavaScript so that it can receive socketmessages with the new image URLs. We use jQuery to find the image element

and update it's source attribute (lines 5 - 11).

Restart your node server, refresh your localhost:8080 page, and start taking

pictures. They should be updating on the page in realtime!There is about a 3

second lag between taking pictures and them appearing in my browser when

using the 'S3' file size setting on my Canon DSLR so expect a transport delay of

that magnitude.

You can also view the live stream from any other device on the same wireless

network as your server. Simply find your IP Address using either


13/16



the ifconfigcommand, if your running OSX, or the ipconfig,if your running

Windows, in your terminal. Enter that IP address followed by ':8080' (or

whatever port number you used) on another device and it will update with

photos as you take them (or paste them in the 'images' folder).

Enjoy!

Optional & More Advanced: Live Stream

From A Website

If you already have an FTP server active somewhere, it's not too much more

trouble to move this photo streaming server onto it. There are three changes we

need to make:Change the address of the client socket

Change the Eye-Fi configuration

Check if the photos are completely uploaded before notifying clients

Let's start with the changing the client-socket address. In the 'livePhoto-

client.js' file, change the io.connect method to accept your server's domain

name:

Now we are going to utilize Eye-Fi's ability to send the photos to an FTP server.

You should follow Eye-Fi's great instructions of how to do this here [15]but I

also want to specify one more thing. For some reason, Eye-Fi doesn't allow you

to disallow titled directory creation for the photos like they do when you have

them transferred to your local computer, so you need to point the FTP

transaction to LivePhoto/public (instead of LivePhoto/public/images like we had

before) and set the album name to images. That way, the file structure stays the

same so our code doesn't break.
http://support.eye.fi/software/media/upload-to-an-ftp-server/


14/16



The final change we have to make is a consequence of the FTP implementation

(it may depend on the FTP service you use on your sever... I'm not sure... I used

pure-ftp). I found that when I used the code from above on my FTP server, linkswould be sent over and over again to clients as the upload was in progress.

Sometimes the links stopped being sent before the upload was complete so the

browsers would see incomplete or missing pictures. In order to counteract that

effect in the simplest way possible, I added an interval of .5 seconds before

sending out the link, and if another file change was detected because the image

was still being uploaded before the .5 seconds was up, I reset the interval. This

seemed to alleviate the problem.


15/16



1. http://www.instructables.com/files/deriv/F0M/DVGT/HAQ39LDQ/F0MDVGTHAQ39LDQ.LARGE.jpg

2. http://www.instructables.com/files/deriv/FMO/X9B5/HAQ39JB5/FMOX9B5HAQ39JB5.LARGE.jpg

There are a couple other more complicated, but more reliable, ways of getting

around this such as monitoring programs like lsof(stands for list open files) or

monitoring your FTP server's logs because they usually indicate when a file has

finished uploading. However, for this demo, those would have been more

trouble than they're worth.

And that's it! Run the node server, go to YOUR_DOMAIN:8080 and startlive streaming your photos!

My thanks go out to selkeymoonbeam [16]for her help working the kinks out of

this Instructable.
http://www.instructables.com/member/SelkeyMoonbeam/


16/16


3. http://www.instructables.com/files/deriv/F9G/31I4/HAQ39MCF/F9G31I4HAQ39MCF.LARGE.jpg

4. http://www.eye.fi/

5. https://github.com/johnnyman727/LivePhoto

6. http://nodejs.org/

7. http://expressjs.com/

8. http://socket.io/

9. https://github.com/bpedro/node-fs

10. https://npmjs.org/package/node-watch

11. https://github.com/joyent/node/wiki/Installation

12. http://www.sublimetext.com/

13. http://en.wikipedia.org/wiki/WebSocket

14. http://support.eye.fi/cards/start/setup-eye-fi-card/

15. http://support.eye.fi/software/media/upload-to-an-ftp-server/

16. http://www.instructables.com/member/SelkeyMoonbeam/

Online Live Photo Streaming From Any SD Card Enabled Camera

Documents

Transcript of Online Live Photo Streaming From Any SD Card Enabled Camera