media-source VS ECMAScript 6 compatibility table

It depends heavily on the website we're talking about but there's generally a lot going on when streaming video on the web.

Usually what happens at the core is that JavaScript will download video, audio and subtitles progressively through small chunks of data called "segments" and push them to JS-exposed buffers called 'SourceBuffer'. Deciding which chunk to download, downloading them and pushing them already require a lot of JavaScript (for example, you need to decide which video and audio quality to download through adaptive algorithms, which tend to be quite complex, moreover there's also a lot of media events that needs reaction to, like when seeking, rebuffering, changing track etc.). You also have a lot of JavaScript there to limit risks of playback stalling and if you have DRMs, a lot of JavaScript there to be able to recuperate the right decryption keys (an operation you generally wish to finish as soon as possible as it is often the last step before playback).

On some websites, you might want to play with as low latency as possible between the broadcaster and the user. In those cases, you might want to optimize your JS code, have very small checking intervals, and you might again prefer to run as much code as possible in a worker to avoid rebuffering due to the risk of the main thread being too occupied doing other things to push media segments.

Even on non-low-latency contents, some websites which already have a lot of JavaScript running beside video playback such as at least Facebook and YouTube pushed browsers for quite some time now to be able to use the main JavaScript media streaming APIs in a worker (https://github.com/w3c/media-source/issues/175), e.g. in another thread.

You could also have complex contents (lot of audio and subtitles languages, many audio and video qualities, multiple decryption keys, long duration etc.) that may lead to big performance and memory issue when parsing them on the JS-side. Those contents are usually described through a file named "manifest" or "playlist" which in this case can take a lot of resources to process (the document can be up to a huge 15MB XML where I work), often leading either the linked JavaScript to run in a worker or to use webassembly (a solution we chosed). Even more if you consider live contents, where this document might have to be regularly refreshed.

You might also want to apply some processing on the media played, for example transmuxing mpeg-ts segments to MP4 ones so they can be played by more browsers. Those are very frequent operations that can be performance-sensitive and are also often performed in another thread.

Again it very much depends on the website and I mainly know the use cases I personally encountered. Generally, adaptive media player are very complex JavaScript beasts.

Also performance issues and poor memory management from the browser-side can lead to a lot of issues. A recurring issue at my work is bad performance leading through side-effect to a very poor quality being played (due to the high overhead in loading segments, pushing them to the buffer etc.).

All these would suffer without a powerful and featureful JS engine like we generally have today on most browsers.

http://kangax.github.io/compat-table/es6/

This page lists features from es6 (and newer versions linked at the top) along with compliance to the spec. First column is the current browser, second is babel+corejs polyfills.

Overall, babel gets about 70% of the way there.

Case in point: Tail Call Optimization has been part of the JS spec since ES6, but remains completely unimplemented in all mainstream browsers/engines besides Safari[1]. For all but the most predictable inputs, you're pretty much forced to use loops where recursion would otherwise be preferable.

Additional case in point: async Iterables cannot be processed as a piped stream. You must use the for await construct, which is a shame considering the FP niceties that the Array type already provides for more traditional lists. Once again, you are forced to use an imperative construct unless you specifically want to defeat the purpose of using an Iterable in the first place by trying to convert it into an Array (... and potentially choking in the process, I might add!).

[1]: https://kangax.github.io/compat-table/es6/

Eventually the browsers started racing to near-full ES6 compatibility. I remember following ES6 progress in realtime with articles and with compatibility tables http://kangax.github.io/compat-table/es6/ . But many people are acting like that either didn't happen, or like it was a one and done thing (despite the ESNext naming shift to avoid the focus on numbers). So we see people just hand-waving away the importance of polyfills like in this gem:

> https://kangax.github.io/compat-table/es6/

Oh man this was a rough one both for FF and Chrome but Chrome did perform better slightly on cursory glance.

Thanks for providing these links, they're definitely a good rule of thumb benchmarks to test new browsers

Javascript / CSS language syntax: can see availability for Javascript here - https://kangax.github.io/compat-table/es6/

I say this as a JS user, but there is no singular JavaScript (realistically, it's not even JavaScript but instead ECMAScript). There is no one place to go that lays out all of what the language can or can't do the way PHP and Python do. The ECMAScript board makes recommendations, then the browsers and runtimes implement features of the recommendations. This site does a good job laying out which features are implemented for browsers and runtimes based on the flavor of the ECMAScript standard. This unique experience can be especially frustrating for someone learning JavaScript and coming from another language that does not have this problem.

https://kangax.github.io/compat-table/es6/ has a column for "current browser"