Build Your Own Live Streaming Platform

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

You need to download OBS for video streaming and create a Mux account. The link for OBS is provided in the Discord channel.

HLS works by breaking down video content into small chunks and delivering them over HTTP. This allows for adaptive bitrate streaming, making it easier to handle varying network conditions and ensuring smoother playback.

H.265 is more efficient than H.264, offering better video quality at the same bitrate. However, H.265 requires more computation to encode and decode, which can be a trade-off.

The webinar is designed to guide participants on setting up video streaming using OBS and Mux, incorporating live stream video into projects, and writing code to exercise the platform.

You can secure your video playback by using signed URLs. This involves creating playback IDs with a token parameter, ensuring that only authorized users can access the video content.

You can use HLS.js to enable HLS playback in browsers that do not support it natively. Create a video player component in React, attach the HLS source to a video element, and use a library like Plyr for enhanced controls and UI.

First, create a live stream in the Mux dashboard and copy the stream key. In OBS, go to settings, select Mux as the service, paste the stream key, and click 'Start Streaming.' Your stream should then appear as active in the Mux dashboard.

Common use cases include live streaming concerts, educational lectures, sports events, and weddings. Mux provides scalable, adaptive bitrate streaming suitable for various applications and audience sizes.

Adaptive bitrate streaming adjusts the video quality in real-time based on the viewer's internet connection. This ensures continuous playback by lowering the video quality when the connection is slow and increasing it when the connection improves.

Mux simplifies the complexities of video streaming by providing adaptive bitrate streaming, handling video encoding, and offering APIs to create and manage live streams and recordings. It also provides tools for video analytics and quality monitoring.

Dylan Jhaveri
Dylan Jhaveri
138 min
09 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Workshop covered various topics related to video streaming and adaptive bitrate. It discussed the importance of video quality and the use of advanced tools in the modern video streaming environment. The role of video codecs and compression in reducing video size was highlighted. The integration of livestream into a React app and the use of HLSJS for video playback were demonstrated. The Workshop also touched on topics such as thumbnail previews, playback security, and the benefits of using MUX assets. Overall, the Workshop provided valuable insights into the world of video streaming and engineering.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Video Editing in the Browser
React Summit 2023React Summit 2023
23 min
Video Editing in the Browser
Top Content
Watch video: Video Editing in the Browser
This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
Watch video: Pushing the Limits of Video Encoding in Browsers With WebCodecs
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Going Live from a Browser...with Another Browser
JSNation Live 2020JSNation Live 2020
8 min
Going Live from a Browser...with Another Browser
This Talk discusses live chat and live broadcast using WebRTC and RTMP. It explores running WebRTC on a server via Chrome and alternative approaches like using GetUserMedia and the Chrome.tabCapture API. The use of a whole Chrome instance for WebRTC and RTMP broadcast is also discussed, highlighting the pros and cons of this approach. The Talk recommends checking out Nick's talk from All Things RTC for more information.
Creating Videos Programmatically in React
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Creating Videos Programmatically in React
The Talk discusses the use of ReMotion, a library that allows for declarative video creation in React. It covers the process of creating videos, animating elements, and rendering multiple compositions. The Talk also mentions the features of ReMotion, such as audio support and server-side rendering. ReMotion 2.0 introduces audio support and the possibility of live streaming. The Talk concludes by highlighting the frustration with existing video editing tools and the integration of existing videos into ReMotion projects.
Getting Weird with Video Manipulation and HTML5 Canvas
React Summit 2020React Summit 2020
16 min
Getting Weird with Video Manipulation and HTML5 Canvas
Today's Talk at React Summit focused on the Canvas and HTML5 video APIs, showcasing the capabilities and possibilities they offer for video manipulation and interactivity. The speaker demonstrated how to use the HTML5 video element and canvas to manipulate and draw images, apply filters, and add real-time text overlays. They also showcased real-time object detection on video frames using machine learning. The Talk concluded with an example of enhancing a marketing website with interactive video using the canvas element. Overall, the Talk highlighted the power and potential of these APIs for video development.
Going Live from your Browser without WebRTC
React Summit Remote Edition 2020React Summit Remote Edition 2020
13 min
Going Live from your Browser without WebRTC
Mux provides an API for live streaming and aims to keep users in their own applications. Live broadcast and live chat are different, with live chat using WebRTC and live broadcast using RTMP and HLS. WebRTC can be implemented using headless Chrome or the getUserMedia process. Mux targets developers building platforms and suggests using semantic HTML. Ionic supports native apps and custom native views.