Real time rendering
For contractual reasons, the video had to be hosted on youtube, and the same video need reach one million of views. so we could not upload several videos and change the link after N views. The problematic was how can we get a pixelated style in real time according to views with these limitations ?
Canvas to the rescue
We choose to take advantage of HTML5 canvas component.
Youtube have a nice API but use iframe component : "...the API will insert the 'iframe' tag containing the player." So we had no chance to access directly to the video, but we still had an option: Host the original video (thanks to video components) and with canvas component pixelated it. According to the youtube API documentation "A playback only counts toward a video's official view count if it is initiated via a native play button in the player." To count the view we had no choice to let users click on the youtube native button.
Layering is one of the keys
We have several layers here, is a list from the deepest to the top:
Video component layer
Image rendering layer
By playing with these layers, we can get what we want and bypass the limitations. Youtube video layer is just here to count the view, when someone click on the native play button on youtube the canvas mechanic is launch. Youtube layer is no longer displayed, video component plays the hosted video, second canvas gets the video flow and draws it into the image rendering layer, then we catch the image url and apply pixelated effect by drawing into First canvas. We needed two canvas and an image layer to get the right effect. SmoothingEnabled : " The default resizing algorithm can create blurry effects and ruins the beautiful pixels." To set SmoothingEnabled to false we needed to get flow from an image, that's why we needed all these layer.
pixelated effect with canvas
To pixelated the context, we divide size of the video (depending to the number views) and display it with the original width and height, so the more view we get, minus the video will be divided.
Stack, Server and Hosting