I switched my original idea to making a camera that captures your image and then shows you a randomly selected image from the database of all photos taken by other users. I thought it would be fun to surprise users with unexpected images. It could be a cool way to see what is happening in the lives of others with little context or information. Photos could come from anywhere at any time. I designed it to work on either a laptop or a phone. I think it’s better on the phone since you can choose between the selfie or external facing camera. Some new things I dealt with were saving images using the file system and using nedb database to keep track of the info I was collecting.
I actually did build my idea from my previous post - the image clock - but it actually ended up being sort of difficult to demo since there were not many photos stored in my database. Essentially, if any images were captured at a specific second of the day, it would show up on the site. Otherwise, you would only see a camera that doesn’t seem to do anything. It’s definitely a slow gratification thing. The mostly finished code for it is here.
Saving the images
To save the images, I needed the client side to get the image’s data URL and then use socket.io to send it to the server. I used the epoch time to differentiate the image file names.
Once the data was received by the server, I could use the file system to save it. I converted the image URL into a jpg and then saved the jpg to a folder called “imgs”.
In addition to saving the image, I also added an object with the file path and timestamp to the database every time the server received new image data through socket.io.
Then I get the entire database, which returns an array of objects. I randomly select an image and send it back to the client.
When the client receives the image, I change the image source to the new file path and then show the image and hide the video. I have some similar code to manage what the user sees. I hid the “capture” button when the client is viewing an image, and then made it reappear when they return back to the camera mode.
All of the Code
Thanks for reading! All the code is available here.