React Summit

React Summit 2023

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.

Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Video Editing in the Browser

Christopher Chedeau

JS Nation

JSNation 2023

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.

High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!

Pushing the Limits of Video Encoding in Browsers With WebCodecs

Akash Hamirwasia

DevOps.js

DevOps.js Conf 2022

Today's Talk explores the lessons that video games can teach us about building virtual teams. The impact of communication on software development is discussed, highlighting the importance of understanding software for successful deployment. The concept of collective intelligence is introduced, emphasizing the role of social perceptiveness, cognitive diversity, and equal distribution of communication. The Talk also emphasizes the need to optimize team performance with key metrics and suggests keeping teams small and cross-functional to enable easy communication and lower cognitive loads.

What does Conway's Law have in common with the video game League of Legends? They can both teach us about how to organise development teams that achieve collective intelligence. When it comes to the art of software development, it's never a game of chance <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gaming the System: How Video Games Can Help us Create More Effective Virtual Teams

Jessica Cregg

React Finland

React Finland 2021

In this presentation, we'll present how video streaming works. We'll look at the anatomy of video streaming, and how video streaming is beneficial for delivering your content over just adding mp4 files. We'll demonstrate live streaming from the browser, and then how to integrate that live stream into your webpage. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Video streaming on the web: Live and recorded video streaming

Doug Sillars

React Summit Remote Edition

React Summit Remote Edition 2020

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.

When developers think about broadcasting live from the browser, the immediate assumption is to use WebRTC. While WebRTC is amazing technology, server-side implementations are...lacking right now. We'll talk about a (totally hacky) way to get video from the browser via technology you're using today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Going Live from your Browser without WebRTC

Matt McClure

JSNation Live

JSNation Live 2020

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.

There are other ways to proxy live video from a browser to an RTMP endpoint, but what if we wanted to interact with that stream first? And not just interact writing obtuse ffmpeg filters, but just some good ol' HTML and CSS? Let's do that! We'll talk about how you can allow your streamers to go live directly from their browser using headless Chrome and ffmpeg. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Going Live from a Browser...with Another Browser

React Summit 2020

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.

In this lightning talk we will be pushing the boundaries of HTMl5 Canvas browser APIs. Join us while we do some experiments with video in the browser to see what’s truly possible. DISCLAIMER: No promises of cross-browser compatibility. Not for the faint of heart. Must be this tall to ride. Attending this lightning talk may result in serious injury or death. All participants must bring a life jacket. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Weird with Video Manipulation and HTML5 Canvas

Dylan Jhaveri

JSNation Live 2021

Today's Talk discusses the use of video sprites, which are similar to CSS sprites and are commonly used for optimization. Video sprites can be used to synchronize and select multiple video feeds, allowing viewers to choose the desired feed. Smooth streaming and broadcasting limitations are also mentioned, highlighting the need to consider resolution constraints. Overall, the Talk provides insights into the benefits and techniques of using video sprites for feed synchronization and optimization.

Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remember CSS Sprites? Let's do that with video!

React Summit Remote Edition 2021

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.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Your Own Live Streaming Platform

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.

Introduction to Remotion, a new library with which we can turn React code into MP4 videos, create our motion graphics programmatically and server-side render them. I give an overview of the priciples, the philosophy and of course we are going to code a video! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Creating Videos Programmatically in React

Jonny Burger

Today's Talk discusses the use of video sprites to optimize video playback. Video sprites, similar to CSS sprites, allow for the selection of specific parts of an image. By combining multiple videos into one and selecting the desired one, video synchronization can be enhanced, and viewers can choose different camera angles in live events. The implementation involves dividing the video into quadrants, allowing viewers to select which quadrant they want to watch for synchronized feeds and a shared audio stream.

#video