Play raw h264 live stream in browser

Question

I'm looking for a solution to play raw h264 stream coming from a native server through WebSocket live on a browser. I tried many third party h264 decoders in JavaScript and each one has its own issues. Decoders based on broadway cannot decode main and high profile h264. Other decoders are too slow to decode 1080p frames. I tried converting raw h264 into fragmented mp4 in JavaScript but the playback is very ugly when decoding bidirectional frames. I also tried webrtc but it seems impossible to implement peer-connection between browser and a native server. Any suggestions?

Answer 1

The best I have seen used (not had hands-on experience using it my self) is https://github.com/samirkumardas/jmuxer

There is an example of how to handle streaming data via WebSockets at https://github.com/samirkumardas/jmuxer/blob/master/example/index-h264.html

var socketURL = 'ws://localhost:8080';
var jmuxer = new JMuxer({
    node: 'player',
    mode: 'video',
    flushingTime: 1000,
    fps: 30,
    debug: true
});
var ws = new WebSocket(socketURL);
ws.binaryType = 'arraybuffer';
ws.addEventListener('message',function(event) {
     jmuxer.feed({
         video: new Uint8Array(event.data)
     });
});
ws.addEventListener('error', function(e) {
    console.log('Socket Error');
});