-
Notifications
You must be signed in to change notification settings - Fork 28
Live Player
With the initial goal of creating a live accessible player for the University of Illinois Board of Trustees meetings, a student group (Ahmed, Harsh, Peter Summer 21) created a hls.js based live player. The documentation here isn't the most extensive, but it can be a good starting point for continuing work here. If you do make new contributions on the project, make sure to update this page to keep things up to date.
To try out the live player, go to the \liveplayer route and set the videoSrc argument to the m3u8 file. For example:
https://classtranscribe-dev.ncsa.illinois.edu/liveplayer?videosrc=https://cbsn-us-cedexis.cbsnstream.cbsnews.com/out/v1/55a8648e8f134e82a470f83d562deeca/master.m3u8
The player takes in m3u8 links which are plain text file formats containing information about text tracks, video chunks and all sorts of data about the video. Most of the details will be handled by hls.js library with a few hooks, but it's good having a basic idea of how the format works.
Introduction to HTTP Live Streaming: HLS on Android and More - This article is a good starting point on the hls file format.
One of the main libraries to understand is hls.js. It's a really good library and extensively used by lots of sites today for HLS content. It basically takes in the video source and then adds on stuff to an existing <video> HTML video element. Since CT also took a similar approach of using an enhanced <video> element, this approach fit things quite well. The GitHub has links to documentation and example code that's quite useful for understanding how the library works.
hls.js demo - is a demo site running the hls.js video player. This is really useful for just debugging and playing around. The demo page also has a lot of logs and debug visualizations that is extremely useful in figuring out what's going on. It also has many example sources preloaded but none of them are live streams that we're interested in.
Basic hls.js demo - a simpler starting point to understand how the library is used.
If you're working on the project, I think it's very worthwhile to understand how this library works and coding a simple example on your own.
The VLC Media Player does an okay job at m3u8 streams, and I'd test with hls.js demo page first, but this can be useful for poking around and trying to find useful data as well.
For the live meetings, we'll get captions in the WebVTT format which is a more extended format than the SRT format. Most of the heavy lifting related to this will be handled by hls.js adding them automatically to video.textTracks which you can add event listeners too. That being said, it's helpful to understand the captioning format, especially if you're working with the download generators or any parsing level work.
It's a fairly straightforward format, and can even be written using a Notepad level text editor. WebVTT Captions: How to Create a Web Video Text Track File is a good starting point on understanding the rules and how to generate our own.
Live WebVTT Validator and it's library are very useful to make sure the VTT you're dealing with is valid.
It's surprisingly hard to find good testing links online, especially live ones that are on 24/7 that include captions. We've had the most success with American news channels:
ABC News - https://content.uplynk.com/channel/3324f2467c414329b3b0cc5cd987b6be.m3u8
NBC News - https://nbcnewshls-i.akamaihd.net/hls/live/1005170/nnn_live1/index.m3u8
CBS News - https://cbsn-us-cedexis.cbsnstream.cbsnews.com/out/v1/55a8648e8f134e82a470f83d562deeca/master.m3u8
Reddit r/Free2View4CordCutters link with regional/alt channels for the above three sources as well.
Newsmax News - https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8 - The caption format is a little different from the other news channels, but it's also worthwhile testing.
OTTVerse m3u8 examples - these are mostly non-live but have some good sources to test around from
Feel free to add more here.
It's has a common base with the CT Project, so having a better understanding of how CT works will be help here as well. Particularly understanding the way React Hooks, Redux, Redux Saga, and DvaJS work with the project. That said, a lot of the code is different and in some places there is boolean logic based on if the live player is present using isLive in the media prop.
The entire component is called LiveHLSPlayer and is set up as a route in App.js where it's mounted. That component is defined in a file called live_test.jsx which sets up a few basic things that returns a wrapped CTPlayer.