Up to Speed

MediaCrush [1] is not a Flickr, YouTube, or SoundCloud stand-in, nor is it meant to be. If that's what you need, check out MediaGoblin, which I talked about in a previous article [2]. MediaCrush works more like Imgur [3], which allows you to upload images quickly and easily – with no registration required (Figure  1).

Figure 1: Upload images quickly and easily in Imgur.

Like Imgur, MediaCrush (Figure 2) does not require registration, and it is absurdly simple to upload images to the site. The main aim of the site is to provide links or code snippets for embedding your media elsewhere. It was originally developed specifically for Reddit and is 100% RES (Reddit Enhanced Suite) compatible [4].

Figure 2: MediaCrush is similar to Imgur but has a number of neat tricks up its sleeve.

Even better, MediaCrush is completely open source, distributed under a permissive MIT license. Apart from bitmap images, it allows for vector SVG graphics, video, and audio, and it uses all the tricks in the book to compress your files so your site loads faster for visitors.

For example, when you upload a GIF animation, MediaCrush converts it into a losslessly compressed video (OGV or WEBM) and then shows the video on your site. A 998KB GIF I tried was compressed down to a 295KB OGV video – a 338% improvement (Figure 3). This has the added advantage of allowing users to pause the animation at any point. If you download the file, MediaCrush serves the original GIF image.

Figure 3: MediaCrush turns a GIF into a compressed OGV, making it a fraction of its original size.

Get Ready

MediaCrush comes with a very comprehensive README.md file with instructions on how to install the software. Unfortunately, not everything works as described.

As my test machine, I used a stock Debian Wheezy on VirtualBox with all updates applied as of November 26, 2013. When installing Debian, I chose the server option (databases, web servers, etc.).

The first thing you want to do is to get rid of Apache, so it doesn't hog port 80.

/etc/init.d/apache2 stop
apt-get purge apache2

Next, make sure your repos are up to date with no obsolete software hanging around:

apt-get update
apt-get upgrade

Because you'll need it to get the MediaCrush source, you have to install Git. While you're at it, you might want to grab Vim, too, which is useful for editing all the config files later.

apt-get install vim git

The MediaCrush developers also recommend compiling and installing the latest version of ffmpeg to manage and convert video files. Before that works, you'll have to install more packages from your repositories:

apt-get install nasm libtheora-dev libvpx-dev ↩
   libx264-dev libvorbis-dev pkg-config

Now, you can install FFmpeg, as shown by the command lines in Listing 1.

Next, you'll want to install the MediaCrush-specific dependencies:

apt-get install redis-server jhead tidy optipng

and Python-specific dependencies:

apt-get install python-dev libpcre3-dev python-virtualenv

Your system is now ready to install MediaCrush.

Getting the Code

To store the source code you're going to get from GitHub, create a directory,

mkdir mediacrush

and then get the source:

git clone http://github.com/MediaCrush/MediaCrush </route/to/your/>mediacrush

The download shouldn't take long. Once it's finished, create a virtual environment for MediaCrush:

virtualenv </route/to/your/>mediacrush --no-site-packages

This command ensures that MediaCrush uses only the modules it needs and that it also does not interfere with the rest of the system. To activate the environment, go into your folder and enter:

$ cd </route/to/your/>mediacrush
$ source bin/activate

Now you have to install the Python modules that MediaCrush needs. The requirements.txt file contains a list of all modules Python requires. Using pip,

$ pip install -r requirements.txt

you can install everything in one go.

Get Going

Before running the server, you need to do several things. First, you have to create a storage directory that will store the uploaded files under your MediaCrush directory, such as:

$ mkdir storage

Second, you have to rename the config.ini.sample file to config.ini and configure it. One of the changes you'll have to make in this file is at the storage_folder line. For everything to work smoothly, you have to change

storage_folder = storage

to the absolute path to your storage directory:

storage_folder = </route/to/your/>mediacrush/storage

Additionally, you have to change the protocol and domain key-value pairs. Although the official MediaCrush site uses the HTTPS protocol to encrypt traffic to and from the site, for the sake simplicity, change the protocol value to http. For domain, you enter the domain part of your site; for example:

domain = mymediacrush.net

To suit your setup, you may make many other changes in config.ini. For example, you can integrate your Google AdSense and Analytics accounts, include the email of an administrator for abuse reports, or change the location of directories and files.

Finally, you have to run the MediaCrush daemon that does all the conversion in the back end:

$ python daemon.py&

The & at the end pushes the execution of the daemon to the background, allowing you to run the server up front in the same terminal. If you enter

$ python app.py

MediaCrush runs in debug mode on port 5000. If you point your browser to the IP address of your server (e.g., http://192.168.1.110:5000), you should see a spanking new MediaCrush install waiting for your pics.

Going Public

The above configuration will be okay for a test run, but it won't do you any good for production. First, the use of port 5000 is no good if you want users to visit your site regularly. It's too weird. Second, the links and snippets MediaCrush generates for each image, video, or audio file for your sharing pleasure won't work because they'll redirect to the wrong address.

The developers of MediaCrush recommend using Nginx as a reverse proxy for your site if you intend to open it up to the Internet. (It's also good for an internal network – remember to include a new line in your /etc/hosts files.)

# apt-get install nginx

Listing 2 shows a minimal Nginx proxy setup. To use it, type the contents into a text file called mediacrush, and drop it into /etc/nginx/sites-enabled (remember to move the default file out from /etc/nginx/sites-enabled and put it elsewhere). Now, restart Nginx.

The client_max_body_size 25M line limits uploads to 25MB or less. If you're not afraid your hard disk will be stuffed with kitty pictures, you can change that size.

Now you can run MediaCrush with gunicorn:

$ gunicorn -w 4 app:app

then visit http://mymediacrush.net, and – Hey presto! – you should have a perfectly working MediaCrush setup.

Your site will allow you to upload files by dragging and dropping them onto the box on the main page. If you drag more than one file, you can create an album, grouping them together. If you click on any of your pictures or videos, MediaCrush opens it in a separate window or tab within your browser and allows you to choose an action from the Embed, Share, Download, Reported, or Delete choices offered below the image (Figure 4).

Figure 4: You can download, embed, or share your media by clicking on any of your pics.

If you choose Embed, MediaCrush supplies you with an HTML snippet you can include in your website or blog (see "A Note on Embedding"). Sharing gives you a link within your MediaCrush site – a direct link to your image or video – as well as Markdown, HTML, and BBCode snippets.

embed.value = '<iframe src="https://mediacru.sh/' + ↩
  window.filename + '/frame" frameborder="0" allowFullscreen width="' + ↩
  size.width + '" height="' + size.height + '"></iframe>'

embed.value = '<iframe src="http://mymediacrush.net/' + ↩
  window.filename + '/frame" frameborder="0" allowFullscreen width="' + ↩
  size.width + '" height="' + size.height + '"></iframe>'

MediaCrush creates a mobile version of your site automatically. Point your smartphone to your site, and you'll see a simplified version with big buttons for fingers (Figure 5).

Figure 5: MediaCrush automatically creates a mobile-friendly site.

Apps

Two browser extensions are available – one for Firefox and one for Chrome – that allow you to upload media to mediacru.sh; however, with a little tweaking, they can be made to upload to your site instead. The source for both extensions [5] are written in clear JavaScript, and you would only need to change all the instances of https://mediacru.sh/ within the code to the URL of your own site.

The same goes for the command-line app, MediaCrush-cli. You'll need to change the line that says

server="https://mymediacru.sh"

to

server="http://mymediacrush.net"

(if you have been following naming in the examples to the letter). A word of caution with regard to the -r recursive option for this app: It does not work as expected. Also, if you have a symbolic link within your directory, you could find yourself uploading more than you expected.

Instead of using recursion – always a gamble – use:

$ MediaCrush-cli -a somedirectory/*

This will upload all the media into somedirectory and spit out an album link at the end containing all your pics.

Conclusion

MediaCrush not only looks good, it works great. Uploading is easy and fast. The compression functionality boosts the speed at which the media is shown, and visitors will appreciate how simple and straightforward it is to use. MediaCrush is an excellent way to share or embed media on the web.