10 ms·
JSMpeg – Decode It Like It's 1999
- brian_herman 10y agosounds like the internet archive would love something like this.
- sp332 10y agoVLC is working on a JS port. https://news.ycombinator.com/item?id=13113529 https://news.ycombinator.com/item?id=13113529
- eriknstr 10y agoI notice that the demo video stops when I switch tabs. Is this by design or by accident? Can I use JSMpeg but have it play in the background? Another thing; can I have video controls? PS: That video has a very late nineties, early double-ohs feel to it indeed. Good choice of video :)
- nacs 10y agoBrowsers (like Chrome throttle) the JS execution of background tabs drastically which would probably make the MPEG decode impossible. They probably stop the video as a workaround.
- ryanplant-au 10y agoWorth noting that Chrome won't throttle a tab that has audio playing.
- stilldavid 10y agoYeah. From the docs: > pauseWhenHidden – whether to pause playback when the tab is inactive. Default true. Note that browsers usually throttle JS in inactive tabs anyway.
- tyingq 10y agoSupposedly, Chrome doesn't throttle background tabs where audio is playing.
- koolba 10y agoJS hack idea! Play a silent sound to force Chrome to not throttle your page when it's not primary.
- nix0n 10y agoPlease don't. Also, Chrome puts a little speaker icon on the tab, so users might notice.
- recursive 10y agoIn the long run, the probability of this being exploited is approximately 100%. I'm surprised they left in such an obvious loophole.
- daurnimator 10y agoI'm not sure how usurping this is an 'exploit'. It's used as a heuristic to save battery life. and if you're trying to run down a user's battery I can think of better ways.
- 10y ago
- peterhajas 10y agoVideo decoding in JS is very impressive - really highlights the speed of modern interpreters. I especially love that a Björk track from the 90's is featured. I recently worked on a personal project which had to play back .webm files, and I used a similar utility: https://github.com/brion/ogv.js/ https://github.com/brion/ogv.js/ It decodes .webm files and plays them in the web. I believe it's also used by Wikipedia to play bag Ogg files.
- flavioribeiro 10y agohere is a nice talk about ogv.js: https://www.twitch.tv/videos/94956075 https://www.twitch.tv/videos/94956075
- Retr0spectrum 10y agoThis begs the question, which codec is optimal in terms of "cpu-cycles-to-decode per second" for a given image quality ( for some subjective measure of quality)?
- ryanpetrich 10y agoWhatever codec is hardware accelerated on the device you're playing it back on.
- lmm 10y agoIn terms of CPU cycles raw video is best. In realistic cases something like Lagarith was traditionally worthwhile simply because you couldn't read raw video from disk fast enough. I don't know whether that's still true in the age of SSDs.
- mrb 10y agoYou don't need SSDs. Raw 720p video at 24 bpp and 24 fps is 66 MB/sec, which a 5-year-old 7200 RPM HDD could serve.
- lmm 10y ago66MB/s consistently is pushing it, and resolution, bpp and fps can all go substantially higher than the numbers you gave. More to the point, realistic systems could handle much higher resolutions (wherever the limit for that system was) using Lagarith than in raw.
- ryandrake 10y agoOfftopic grammar peeve: You probably mean "This _raises_ the question". Begging the question is rather different.
- Retr0spectrum 10y agoThanks, unfortunately it's too late for me to edit.
- tambourine_man 10y agoA stack that you can understand from top to bottom. Love it
- streamer45 10y agomain problem I see are bandwidth requirements to keep a decent quality. That said, very interesting project and well executed.
- ilurkedhere 10y agoHow power efficient is this? Just curious because iOS was mentioned as a target.
- wmf 10y agoNot at all.
- Tade0 10y agoI remember toying with this idea when I was doing some web-based slot-machine mobile games. We had a ridiculous amount of assets(mostly animations) that had to be compressed, because one of the sales representatives noticed, that it's impossible to play any of the games if you're connected to a 2G network. Eventually we didn't go with this solution, because it considerably reduced battery life and made the devices heat up too much.
- adrianN 10y agoThis stutters a bit on my 2009 Macbook. If I weren't plugged in it'd probably kill my battery really fast. It's a nice hack to get this kind of video on the iPhone, but somehow I feel that for decoding video JS is a bit high on the stack.
- edwinyzh 10y agoWhat does "Decode It Like It's 1999" mean? Thanks.
- guyzero 10y agoIt's a reference to the Prince song "1999" and the fact that it's using MPEG 1 video encoding that was available in 1999.
- juliangoldsmith 10y agoHe's probably referring to the codecs that JSMpeg decodes. Both of them are from around then.
- throwaway2048 10y agoall the preformance of a 20 year old low end PC.
- cs2818 10y agoThe "Why Use JSMPEG" section hits the nail on the head with respect to the needs of some projects I have worked on. Particularly, I once needed to stream video from a UAV to multiple tablets and phones on a local network to allow collaborative annotations. Since it was a disaster response system there was no depending on external services, which at the time put WebRTC out of the picture (all of the easy to use implementations required internet access to use existing signaling services). We ended up using MJPEG and then later a JavaScript implementation of a MPEG-1 decoder. This library certainly would have made my life a little easier at the time!
- rich90usa 10y ago> there was no depending on external services, which at the time put WebRTC out of the picture (all of the easy to use implementations required internet access to use existing signaling services) See: https://github.com/cjb/serverless-webrtc https://github.com/cjb/serverless-webrtc That's a good rough demo of how WebRTC connections can still be established with the ask/offers being conveyed out-of-band. To make it a little more friendly for tablets (and to accomplish before messages expire) I'd think QR codes would be a reasonable way of passing the data without depending on an external service. There could also be some extraneous information that can be stripped to save on the amount of data you pass between peers so that the QR code isn't excessively gross (see: https://webrtchacks.com/the-minimum-viable-sdp/ https://webrtchacks.com/the-minimum-viable-sdp/)
- networked 10y agoInteresting. Did you look into how using the JavaScript MPEG-1 decoder over MJPEG affected the tablets' battery life?
- cs2818 10y agoI don't think we ever did formal testing on this (external battery packs were plentiful), but I do recall some of the early versions of the MPEG-1 decoder causing tablets to heat up.
- donatj 10y ago
- rucas__ 10y agoThe talk about JSMpeg is an awesome learning experience. https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic...
- chadnickbok 10y agoThis is really cool! But the compression quality of MPEG1 is really nowhere close to h264. If you're interested in this sorta thing, try taking a look at Broadway JS: https://github.com/mbebenita/Broadway https://github.com/mbebenita/Broadway Here's a simple demo page they have setup: http://mbebenita.github.io/Broadway/foxDemo.html http://mbebenita.github.io/Broadway/foxDemo.html Its entirely possible to use WebSockets to stream H264 to a browser and decode using broadway, and the performance is pretty good, even on mobile.
- markonen 10y agoThis seems risky to use in production due to H.264 patent issues. MPEG-1, on the other hand, could seemingly work as a drop-in replacement for GIFs in a variety of cases with no such worries.
- colek42 10y agoI did it for a hack-a-thon a couple months back. Actually works quite well. https://github.com/colek42/streamingDemo https://github.com/colek42/streamingDemo
- wmf 10y agoDon't browsers have built-in native H.264 support?
- colek42 10y agoMedia source extensions don't give you the low-level control needed for low-latency and streams need to be re-muxed into fMP4. Web-RTC is a good option, but the infrastructure required can be a non-starter for many projects. For example, native webRTC libraries for golang are currently lacking to support needed to stream low-latency video.
- espadrine 10y agoBeyond the valid patent worries (Broadway.js uses Android code, which isn't cleared by the MPAA in the way the Cisco code is), I would be interested to have a proper comparison with jsmpeg in terms of FPS and battery use on mobile. I would assume there is a CPU cost associated with more complex decoding operations. Edit: here is jsmpeg's author talking about it: > There's been an experiment, called Broadway.js, which tries to decode H.264 in JavaScript. And there's some demos available, but I haven't been able to make this work consistently. It's very flaky. It tries to decode different stuff, and different threads And it barely works, if it works at all, so-- and you have to download, maybe, one megabyte of JavaScript for this. It's all part of EM script. [sic — emscripten?] And it's-- yeah, it's very complicated to get working, which is why the MPEG1 form of this is so nice for this, because it's so simple. And you end up with a decoder that's 30 kilobytes in size. https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic...
- Mizza 10y agoThis has also opened up some awesome new browser experiments, such as playing GTAV in the browser (on an iPhone!) http://phoboslab.org/log/2015/07/play-gta-v-in-your-browser-sort-of http://phoboslab.org/log/2015/07/play-gta-v-in-your-browser-...
- mborch 10y agoCisco's got a royalty-free codec that would let you decode like it's 2017. https://github.com/cisco/thor https://github.com/cisco/thor
- DiabloD3 10y agoActually, they don't. Thor has been merged with Xiph's Dalaa into IETF's NETVC effort, and both Cisco and Xiph are backing this. NETVC is a next generation codec designed to replace H264, H265, and all future MPEG codecs with a system that is not user- and developer-hostile wrt licensing lock-in via (possibly invalid) patents.
- milankragujevic 10y agoWhy not just use VP9 right now? I hated it but changed my mind recently, it's pretty nice and works on Chrome, if you don't need Apple device support (for example for storing and archiving surveillance camera footage or ripping library of DVDs and BluRay movies...) Or in the future AV1 which is Daala + Thor + VP10.
- VeejayRampay 10y agoCombine this with webtorrent and you have yourself a real nice distribution platform.
- yeureka 10y agoThis is very cool! In 1999 my degree final year project was to implement an mpeg decoder in software. My only source of information was the MPEG technical reference manuals. It took me 3 months to be able to decode my first frame. It ran at less than 10fps on an AMD K6, but I learn a lot about video and compression.
- w0utert 10y agoI did exactly the same, but instead purely for fun and learning. Picked a random/blind clip from a naughty movie for extra motivation to get the first frames to the screen :D I also worked from just the reference book, with no prior knowledge of video coding at all, which made it quite a puzzle to get something on the screen and moving, but it was extremely satisfying when it all worked (to some extent, the thing was horribly slow, broke after one group of predicted frames, and I never implemented chroma, just luma)
- z3t4 10y agoImagine all cool stuff you can build with this. And it's JavaScript!!!
- dalanmiller 10y agoIt is incredibly hard to stream video from say, a Raspberry Pi to the web in a way/format that's easy to consume on multiple devices or using just the browser. This is awesome.
- stepik777 10y agoYet another people who cannot correctly decode video. Videos are not in sRGB color space and must be converted to it for displaying in browser. Also videos do not use full range 0-255, instead they use narrow range 15-235 where color (15, 15, 15) means black and (235, 235, 235) means white; this should be converted to the full range which is used in web-canvas.
- keyle 10y agoIt's great that you bring more information to the table, (I didn't know about the narrow range myself) but you don't have to be condescending about it.
- brokenmachine 10y agoI'm impressed by someone being able to write their own decoder, wrong color range or not.
- colek42 10y agoYou can actually do this with H264 as well. I did it for a hack-a-thon a couple months back. We are actually looking at doing this in production for a video streaming on an internal network now that NPAPI is deprecated. https://github.com/colek42/streamingDemo https://github.com/colek42/streamingDemo
- Ezhik 10y agoBeware of patents.
- bagels 10y agoI don't know where they get the "5 seconds" of latency for dash videos. There's definitely a startup latency, but it's not 5 seconds, and can be avoided with some simple techniques.
- londons_explore 10y agoThey're thinking of live dash streams. Eg. how many seconds from video camera to screen. I can see it would probably be possible to get low latency, but without a fancy server stalling connections till frames become available, flushing on frame boundaries, etc, I can't see it working. Try doing such things with a CDN like cloudflare to support lots of users... Also, for true streaming, timing should be done by the camera. Ie. If the cameras frame rate is 0.0001% slower than the 60fps advertised, the display device should slow down to match. MPEG-DASH has no ability to do this, and would lead to a "buffering" gap for a second every few hours of playback time.
- bagels 10y agoSegment length can be set to 1 second, if you're brave. 5 seconds for live streams just happens to be the most commonly reached compromise.
- shabbyrobe 10y agoWatch out! Some of this code may be GPL-encumbered. The decoder for JSMpeg is based in part on "Java MPEG-1 Video Decoder and Player" [1], which is licensed under the GPLv2. I am not a lawyer, but an argument could be made that the sections of JSMpeg's decoder that are directly ported from that project are a derivative work. [1]: https://sourceforge.net/projects/javampeg1video/
- flukus 10y agoAdvertisers will use this to get around video blocking in 3...2...1...
- faljse 10y agoAwesome work. I´m using it for an e-learning/robotics platform for low latency live streaming where it does a great job. I´d like to know how reverse playback could be achieved. Is there a way to "undo" a P-Frame calculation, or is a second (reverse) mpeg file a possible solution?
- markwillis82 10y agoI used JSMPEG to process a live 360 camera feed and then a canvas to convert the output to the format to work with a google cardboard. I was pleasantly surprised with the quality of the output and speed of which the devices could decode and render the new output.