Cloudinary Blog

How to build a real-time photo sharing website in a few easy steps

Create a Real-Time Photo Sharing Website in a Few Easy Steps
Two decades ago websites had such a simple usage flow. Web servers returned complete HTML pages and each user action required that a new HTML page be reloaded from the server. Later on Ajax joined the game allowing dynamic updating of specific web page fragments via simple Javascript requests to the server. Google's wide-spread use of Ajax with Gmail was simply mind blowing at the time. Today's product requirements wouldn't settle even for that.
 
Modern web and mobile applications demand interactive real-time experience. When a friend sends you an email in Gmail or a message with WhatsApp, you want these to pop up immediately, whether you're watching it on the relevant website or mobile application. When you browse through your Facebook news-feed, you want to see new Like events, new comments and new posts by your friends immediately as they happen, without waiting and without hitting 'refresh'.
 
If you are web developers, you are probably aware of the complexity of trying to implement real-time push notifications yourselves. Modern web frameworks and platforms allow you to easily build rich and dynamic web applications, but usually don’t include easy to use, scalable solutions for real-time interaction of web visitors and mobile app users. Therefore, if you haven't done so already, you should try out PubNub.
 
PubNub is a very powerful yet easy to use cloud service for real-time applications and push notifications. With a few lines of code you can extend your web and mobile apps with a fast, highly scalable solution for real-time notifications.
 

Photo sharing app - live demo

Cloudinary is a cloud-based, end-to-end media management solution that automates and streamlines your entire media asset workflow, from upload to manipulation to delivery via multiple CDNs.

PubNub allows sending real-time messages to a channel that multiple users can subscribe to. Cloudinary's image uploading can be performed directly from a visitor's browser or mobile application. Same goes for PubNub's messages subscription. 
 
Combining both cloud services, you can easily build a high-end, real-time photo sharing application. 
 
The flow is quite straightforward - use Cloudinary to allow your users to upload as many images as they want to the cloud and then send a message through PubNub to notify all other relevant users about these newly uploaded images. 
 
Recipients can ask Cloudinary to generate a scaled-down, cropped version of the original image to match their specific device and get that image delivered efficiently for best viewing experience.
 
All this can be done without any complex coding, complex deployment setup or CPU load on your side. You can focus on your core application while Cloudinary and PubNub take care of all your media handling and communication channels.
 
The following frame shows a live demo of a basic photo-sharing web app built using Cloudinary and PubNub. Try it out! Upload an image to Cloudinary directly from the browser, select a simple graphical effect to apply on it and share the photo using a PubNub message with all other users that currently view this page. See this in action by opening two desktop browsers or mobile devices simultaneously. All viewers subscribe to a single PubNub channel directly from the browser and display dynamic thumbnails and full size images, as they are being uploaded by all the other viewers.
 
A robust, highly scalable, highly available, feature rich real-time photo sharing application, with just a few lines of code. Cool, right?

How does it work? 

First of all, you can browse and copy all sources from GitHub: https://github.com/cloudinary/cloudinary_pubnub_demo
 
We used a thin Ruby server (Sinatra) for this demonstration. In addition to Ruby, Cloudinary and PubNub also offer integration libraries for PHP, Ruby on Rails, Python & Django, .Net, Node.js, iOS, Android and others.
 
1. First we embedded a file input field in the page. This field includes a signature generated on the server side for authorizing secure uploading to Cloudinary from the browser using Cloudinary's jQuery plugin. The following Ruby code embeds a signed input field. For more details see this post.
cl_image_upload_tag(:photo_id, :resource_type => :image,
                    :transformation => incoming_transformation)
The :transformation parameter in this example applies an incoming transformation before storing the image in the cloud. The specific incoming transformation we've used limits the image size and adds a watermark. 
 
Here's the definition of the incoming transformation in this live demo:
incoming_transformation = [ { width: 1200, height: 1200, crop: 'limit'},
                            { overlay: 'logos_watermark', width: 0.7flags: 'relative', opacity: 40, gravity: 'north', y: 20 } ]
In addition, custom styles for the input field and drag area as well as the uploading progress bar are implemented using CSS and jQuery (see source code).
 
 
2. When the user clicks on the Share button, an Ajax request with an identifier of the photo is sent to the server which securely publishes a message to our shared PubNub channel. 
 
The following server-side Ruby code receives the identifier and additional message details and publishes to a PubNub channel using PubNub's Ruby library:
preloaded = Cloudinary::PreloadedFile.new(params[:photo_id])         
pubnub = Pubnub.new( :publish_key => PUBNUB_PUBLISH_KEY:subscribe_key => PUBNUB_SUBSCRIBE_KEY )

pubnub.publish({
    :channel => PUBNUB_CHANNEL,
    :message => {
        cloudinary_photo_id: preloaded.identifier,
        user: params[:user],
        message: params[:message],
        kind: params[:kind],
        time: Time.now.utc.iso8601
    },
    :callback => lambda { |x| $stderr.puts("Shared #{preloaded.public_id}: #{x}") }
})

3. The client side code in the browser uses PubNub's Javascript library to subscribe to a PubNub channel for new messages. 
var pubnub = PUBNUB.init({ subscribe_key: PUBNUB_SUBSCRIBE_KEY});
pubnub.subscribe({ channel : PUBNUB_CHANNEL,
                   callback : show_message });
When a message is received, it includes the photo identifier which is the public ID of the image uploaded to Cloudinary. The following Javascript code uses Cloudinary's jQuery plugin to display a dynamically transformed, face-detection based thumbnail of the photo through a CDN. Once the image is clicked, the originally uploaded image (with a watermark) is shown.
function show_message(message) {
  var link = $('<a></a>').
    attr('href', $.cloudinary.url(message.cloudinary_photo_id)).
    append($.cloudinary.image(message.cloudinary_photo_id, 
               { width: 150, height: 100, crop: "fill",
                 gravity: "face", radius: 20, effect: "sepia"});
  $('.stream').prepend($('<li></li>').append(link));
}
In addition, a Javascript code fetches the recent 5 messages that were published before the page was loaded. This is done using PubNub's History support.
pubnub.history({
    channel  : PUBNUB_CHANNEL,
    limit    : 5,
    callback : function(history) { $.each(history, function() { show_message(this); })}
});
  

Summary

If you browse through this live demo's source code, you will notice that the few code lines listed in this blog post are actually almost everything you need to build your own, live photo sharing application.
 
PubNub's service was built by developers that understood that developers should use a fully featured and scalable solution for real-time notifications instead of trying to build one by themselves. Same goes for Cloudinary's service - developers should use a fully featured and scalable image management, manipulation and delivery service instead of spending precious time building one themselves.
 
Using both cloud-based services you can build complex, modern applications quickly, focus on the core of your application’s business logic and stop worrying about media management and communication channels anymore.
 
 
This demo is just one, simple example. It would be great to hear your feedback and learn about your own ideas in the comments thread below.
 
Additional resources about image APIs used for image management and operations in social media and other online services

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more