Live video is a constant trade-off between latency, stability, and scalability. Learn the fundamentals of HLS and how to build a robust, end-to-end streaming pipeline.
#1about 4 minutes
Understanding the new demand for online video
The COVID-19 pandemic forced sectors like fitness, e-learning, and virtual events to adopt video streaming to continue operating.
#2about 3 minutes
Choosing the right video platform for your application
Compare different approaches for integrating video, including social media platforms, traditional OVPs, developer-focused video APIs, and a complete DIY solution.
#3about 4 minutes
The four core components of a video service
A video streaming service is broken down into four essential stages: capture, processing, delivery, and playback.
#4about 4 minutes
How adaptive bitrate (ABR) streaming works
Adaptive bitrate streaming solves bandwidth fluctuation issues by encoding video into multiple quality levels and segmenting them for dynamic playback.
#5about 3 minutes
Demo: Inspecting an HLS stream in the browser
Use browser developer tools to inspect the network requests for an HLS stream, revealing the M3U8 manifest and individual TS video segments.
#6about 8 minutes
Setting up a live stream with OBS and Mux
Configure the open-source OBS software for video capture and use the Mux API to create a live stream endpoint and obtain a stream key.
#7about 5 minutes
Creating a professional live coding layout in OBS
Enhance your stream's visual presentation by creating a custom scene in OBS that combines a webcam feed, screen capture, and graphic overlays.
#8about 8 minutes
Live coding a web video player with HLS.js
Embed a live stream into a webpage using a standard HTML video element and HLS.js, including logic to fall back to native HLS support where available.
#9about 5 minutes
Exploring advanced live streaming features
Go beyond basic streaming by enabling features like instant on-demand replays, MP4 downloads, reduced latency, social media simulcasting, and watermarks.
#10about 5 minutes
Q&A: Streaming directly from a web browser
Learn how to stream from a browser by bridging WebRTC or WebSocket video into an RTMP feed using a server-side tool like FFmpeg.
#11about 5 minutes
Q&A: Latency versus reliability in video streaming
Understand the trade-offs between latency and reliability, and explore the evolution of low-latency HLS and DASH standards for near real-time delivery.
#12about 6 minutes
Q&A: GDPR compliance and video security
Address privacy concerns by understanding how a video platform can be GDPR compliant by not storing PII, and compare security methods like signed URLs versus DRM.
Related jobs
Jobs that call for the skills explored in this talk.
Building a "shoutout" component in plain HTML/CSS/JavaScriptEvery Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Chris Heilmann
Processing 175 WeAreDeveloper World Congress talk videos in 5 hours - with PHP?Every year after the WeAreDevelopers World Congress is over, we have a ton of video footage to edit and release. Most of it is in raw format and needs editing by hand, but a lot of our sessions are also streamed live on YouTube and thus easier to re-...
Chris Heilmann
All the videos of Halfstack London 2024!Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
Luis Minvielle
8 Code Streaming Channels to Slash Through ProgrammingAre you a programmer and a fan of slasher flicks? When you're not dreaming of electric Python sheep, do you live for the thrill of watching a masked killer wreak havoc on unsuspecting teens? When your JavaScript lessons are over, and you need to unwi...
From learning to earning
Jobs that call for the skills explored in this talk.