A thousand and one gifs

Hello!
I would like to tell you the story of the creation of one simple entertainment service for recording gif'ok from a webcam using HTML5 and JS. About how the solution on the knee based on open source solutions overnight produced, albeit a small one, a surge in the popularity of the wave from which for half a year already brought a small number of visitors who benefit from this service.

It all started just

At the end of the summer, on a normal working day, plowing the expanses of GitHub, I came across a rather interesting script ( facetogif ) in native JS and HTML5 that allows you to record videos from a webcam into gif animation. Even a working demo was added, uploading ready-made videos to the imgur service or allowing you to save them directly to your hard drive.
This idea seemed very interesting to me and I decided to implement it with a little alteration as an independent service.
No sooner said than done. That evening, I forked the repository, registered the VGIF.RF domain, raised VPS (the cheapest price for $ 5) on DigitalOcean and wrote a simple php script storing videos right there on the server.
To save resources on the server, I installed only Nginx and PHP-FPM.



first version of the site

The next morning I shared a link to the newly-found service to friends in one closed community . And the service was well met =) Gradually, in between work, I took up small tweaks - I added sharing buttons on VK and Twitter, and also edited js so that it was possible to make clips of only one size (for unification). On the night of that day, I realized that a domain in the Russian Federation zone is a rather bad idea and registered a more beautiful and interesting togif.me domain, on which the service is still to this day.
The long-awaited Saturday came, and in the morning I decided to take up the site. To start, I made a large and beautiful manual with pictures and myself in the title role, and then posted it on the Pikabu entertainment siteand began to wait for minuses (there a rating system similar to Reddit and Habr). And then one by one comments began to appear, pluses went along with the minuses, and then I noticed that the free space on the VPS began to gradually decrease. Late he caught up with screwing Yandex.Metrica. Tightened late in the evening she showed about 700 unique visitors. At that time, there were already about 500 comments on the post on Picabu. Well, then someone kind posted a link to the service in a post on Joyreactor, and traffic increased again! On Sunday, the metric counter froze at around 8 thousand visitors and 12 thousand views!



Technical details

And then I realized that I made one annoying mistake. The video could be downloaded or downloaded, but when downloading the user was given only a boring direct link to the gif file. There was not enough catalog of downloaded videos so that you could not only record your own, but also look at other visitors to the site!
It is time to rewrite the “service” which consisted of 1 static html page, 1 open source js and upload.php script.

Option 1

Since the flow of visitors was not interrupted, and I wanted the catalog here and now, I put in a simple MySQL database schema, connected Idiorm for queries to the OOP style database, wrote simple routings to display the catalog pages and pictures themselves, and also added Disqus to allow commenting on each clip .
Somewhere in the same period I began to experiment with compression of the clips and it turned out that imagemagick compresses each of them at least 30%, or even 70% =)
This is due to the fact that the clips are generated via js in the browser when each frame is removed separately and then they fold into a roller. With this approach, the same parts of the frames are repeated in each frame.

During this time, the number of visitors gradually melted (from 1000 unique to 300 during September), but this did not bother me much. the service was made purely for my pleasure and I was glad every new recorded video. It is very pleasant to realize that I did something very simple and not entirely my own, but useful.

Next, I decided to rewrite everything on the Yii Framework and it turned out:

Option 2



Innovations:
  • checkmark for “non-public” clips (not displayed in the catalog) - storage of new downloaded clips in Selectel storage
  • thumbnail generation with imagemagick
  • application of watermarks on rollers with a link to the site (right during recording)
  • separate page with FAQ
  • counting the number of views of each video
  • generating safer links with a random number of characters and adding a date (instead of /image/4r32njfi3.gif it became / 2014/04/5e7eaed8bd.gif)
  • the ability to "mirror" the recording


I transferred the clip storage to selectel storage I wanted a faster upload of files for end visitors. I borrowed the finished php class from Eugene Smith on GitHub .

For site recognition, it was decided to add a watermark to each recorded video. And I wanted even the clip just saved from the browser to already have it. For this task, I decided to load user resources and this is what happened:

function recorder_fn(ctx, gif, frames) {
    var coords = facetogif.recorderFrame(),
      drawW = facetogif.gifSettings.w,
      drawH = facetogif.gifSettings.h;
      if(facetogif.p_flag==0 && facetogif.scale==1) {
      ctx.translate(coords.w, 0);
      ctx.scale(-1, 1);
      }
    return function () {
      if (facetogif.video.src) {
        ctx.drawImage(facetogif.video, coords.x,coords.y, coords.w,coords.h);
        if (facetogif.scale==1) {
          //Грязный хак с переворотами =)
          ctx.translate(coords.w, 0);
          ctx.scale(-1, 1);        
          ctx.fillStyle = "white";
          ctx.font = "normal 20px Arial";
          ctx.textBaseline = 'top';
          ctx.fillText("ToGIF.me", 220, 220);  
          ctx.translate(coords.w, 0);
          ctx.scale(-1, 1);    
        }
        else {
          //наложение ватермарки begin
          ctx.fillStyle = "white";
          ctx.font = "normal 20px Arial";
          ctx.textBaseline = 'top';
          ctx.fillText("ToGIF.me", 220, 220);
          //наложение ватермарки end
        }
        var frame = ctx.getImageData(0,0, drawW,drawH);
        frames.push(frame);
        gif.addFrame(frame, {delay: facetogif.gifSettings.ms});
      } else {
        clearInterval(recorder.interval);
        facetogif.recIndicator.classList.remove('on');
        recorder.state = recorder.states.IDLE;
      }
    }
  }


Well, I added the mirroring of the videos for the reason that if you record the video in normal mode, then on the video your right hand will become your left and vice versa. Therefore, for perfectionists, I added a similar regime.

I began to generate safer links to protect users from the complete downloading of archives by stupid enumeration of links since those who trusted me and uploaded private videos to the server should deserve protection. For obvious reasons, I will not disclose the algorithm.

During this time, the main site managed to move from VPS to DigitalOcean to the cloud virtual machine in Selectel, and the old videos remained in place and automatic redirects to old.togif.me/image/xxx began to work for links like togif.me/image/xxx.gif .gif

Then, in the absence of significant advantages and a higher cost of the solution ($ 5 + 300 rubles + 150 rubles each month) for the site for the fan, it was decided to start saving.

The new configuration includes - a powerful shared hosting on the server, and selectel storage for new videos. For each portion of 10Gb gifs, I decided to create a separate subdomain and, based on the set of this volume, I began to transfer them to shared hosting as there is a lot of space, traffic is not limited and the speed of return is not so important because the videos are not new.
Cloud storage with high speeds remains only for new videos that are given and stored at high speeds. Now the cost of the site is about 200 rubles. per month, which is basically tolerable.

Current technology stack:
Nginx, Imagemagick, HTML5, JS, PHP, Yii, MySQL

Unresolved issues:
  • recording videos in Safari does not work
  • recording of clips does not work in Iphone, Ipad


Some statistics:
  • Launch of the service - 08.22.13
  • Traffic for this period - ~ 1Tb
  • Uploaded videos - ~ 15000
  • Unique visitors - ~ 80 000


Conclusions:
  • For some heavy operations, it is sometimes possible to load client computers and client JS in this case is a lifeline
  • For heavy operations on the server, it is advisable to use something more productive than php. Pictures, for example, are optimized by the convert utility.
  • Yii shows a rather high speed even without built-in caching, but you must enable the settings for production mode
  • Flash is gradually leaving, but there are still a bunch of devices and programs that do not support the newfangled features of HTML5


So, using open source solutions, you can make a rather interesting and useful project for people that, albeit without profit, but without any special costs, continues to please someone.

Also popular now: