Home Web Development JavaScript Solution to: canvas.getContext(‘webgl’) returns null.

Get social!

HTML5 Video Support

Let's face it, the major browser HTML5 video support sucks All browsers support some type video format (webm, theora/vorbis, m3u8, mpeg ...), but as far as I know there is no format that works well in all browsers. Believe me, I should know -- I've banged my head against this problem for longer than I'd care to admit.

Add to to this the fact that 90% of IP cameras stream in RTSP (which *no* browser supports natively), and you'll start to see why sites like Wowza can charge hundreds of dollars per month for streaming solutions that work on every platform.

Websockets + FFMPEG = Accessible Video!

One of my attempts to stream live video to all platforms implemented a clever solution presented by PHOBOSLAB. Once I got it running, it worked well but the quality was not what I desired based on the amount of bandwidth the solution was using. Still, you might find it acceptable for your project, so I encourage you to check it out!

As I mentioned above, the quality was a bit lacking for my tastes. Not terrible, but I wanted more. While perusing PHOBOSLAB's source code, I noticed that the project would use hardware acceleration via webgl if enabled. So I tested if this was true for my browser with this line:


Console.log displayed "null". Thus began a couple of hours of searching and tweaking, then searching and tweaking some more, all to no avail.


For whatever reason, defining the canvas in the HTML caused the problem. Initially, my HTML contained the following line to create the canvas:

<canvas id="videoCanvas" width="640" height="480"></canvas>

When I removed it and created the canvas using JavaScript:

var canvas = document.createElement('canvas');

The console.log() function displayed the canvas object. Here's the full JavaScript for reference:

    <div id="canvas"></div>
    <script type="text/javascript" src="js/jsmpg.js"></script>
    <script type="text/javascript">
        var canvas = document.createElement('canvas');
        canvas.setAttribute('id', 'videoCanvas');
        canvas.setAttribute('width', '640');
        canvas.setAttribute('height', '480');
        // Setup the WebSocket connection and start the player
        var client = new WebSocket( 'ws://www.mycoolwebcamsite.com:8085/' );
        var player = new jsmpeg(client, {canvas:canvas, benchmark:true});


I eventually switched to using FFMPEG for capturing and converting the stream, then pushing it to a custom build of Nginx using the RTMP module. On the front end, I used Flowplayer RTMP with a M3U8 backup stream. This works pretty well on all browser/platforms (or at least the one's that I tested). The initialization process is a bit slow on mobile devices, but hey, I'll take it. If you'd like to see the resulting project, check out these live streams.


 canvas.getContext('webgl') returns null, webgl, live video streaming to browsers, hardware excelleration, websockets

Similar articles

Bad Behavior has blocked 43 access attempts in the last 7 days.