online live photo streaming from any sd card enabled camera
TRANSCRIPT
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
1/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
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 -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
2/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
2/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
[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 -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
3/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
3/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
http://nodejs.org/https://github.com/johnnyman727/LivePhotohttp://www.eye.fi/ -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
4/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
4/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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/ -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
5/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
5/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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 (
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
6/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
6/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
7/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
7/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
8/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
8/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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/ -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
9/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
9/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
10/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
10/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
(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.
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
11/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
11/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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.
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
12/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
12/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
13/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
13/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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/ -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
14/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
14/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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.
-
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
15/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
15/16www.instructables.com/id/OnlineLivePhotoStreamingFromAnySDCardEnabl/
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/ -
8/12/2019 Online Live Photo Streaming From Any SD Card Enabled Camera
16/16
1/4/13 Online Live Photo Streaming From Any SD Card Enabled Camera
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/