Video: The fundamentals of online video & getting started with live streaming

There are plenty of videos detailing the latest streaming protocols, but not many which teach you how to literally put one together let alone ones that build it during the talk. Being a system of many components, there are countless permutations of how you could go about building a system, so how can you work out which ones you need and is there an easier way?

MUX’s Phil Cluff presents this talk for WeAreDevelopers to explain streaming and implement it as we watch. He begins by helping us think through exactly what we’re looking to get out of our service and using the budget we have to steer us towards, or way from, free services like YouTube and Twitch. The alternatives being OVPs such as Brightcove or aides supporting your self-sufficiency.

With motivations out of the way, Phil examines the whole chain starting with ‘Capture’. Whilst you’ll need a camera, he recommends the open-source project OBS to provide easy web page integration and a system which can be for general operation or for emergencies. Next is processing which typically includes dealing with old films/negatives. For distribution, Phil spends a couple of minutes describing the CDN in use.

Phil looks at why simply using the ‘video’ entity in HTML isn’t a solution for most streaming applications quickly moving on to discuss the large amount of ingest which still happens via RTMP, explaining the information needed to ensure the RTMP stream can connect. Phil next discusses ABR (Adaptive Bitrate Streaming) showing how it works with different resolutions and chunks. We then look further afield to MPEG-DASH to see how that delivers ‘MPEG Dynamic Adaptive Streaming over HTTP’ and look at the internals of manifest files.

In the next part of the talk, Phil shows us how to put together a page which delivers ABR streaming from an OBS camera which he also sets up and adds graphics to. Streaming into the cloud using RTMP we see the way Phil sets up OBS and configures it with a Stream Key. He then shows us how to create a player with HLS.js by prototyping a page, as we watch, in codesandbox.io. Finally he looks at some of the more advanced things you can do such as watermarking, getting credentials for social media simulcasts before fielding questions from the audience such as how to stream from the browser, realtime engagement APIs, Low Latency delivery (including Apple LL-HLS) and data privacy.

Watch now!
Speakers

Phil Cluff Phil Cluff
Streaming Architect,
MUX
Stefan Steinbauer Moderator: Stefan Steinbauer
Director, Developer Experience
WeAreDevelopers GmbH