JavaScript Conferences

JSNation US 2024

JSNation US 2024

English versionEN

Video: Modern & Secure Streaming on the Web

Katarzyna Dusza

Katarzyna Dusza

From Author:

Media streaming is ubiquitous... We listen to our favourite songs while running, or sitting on the train. We are absorbed by audiobooks written by our favourite authors. We watch TV series or movies with our family and friends. Media streaming is everywhere.. Nowadays, with the increasing number of devices and content, providers must keep pace and provide the most efficient and smooth playback to all users, no matter where they are, no matter what devices they use. They also have to stay compliant, so that no content can be distributed without producers' consent and knowledge.

In this talk, we are going to learn how to stream media on the Web. We will learn about the common technologies such as segmentation, adaptive bitrate (ABR) and DASH protocol used to provide an efficient and smooth playback. We will look into details of how decrypting licensed content works thanks to Encrypted Media Extensions (EME). Last but not least, we will see all of these in action, during the demo, at the end of the presentation.

If you are interested in learning how the world's biggest streaming companies stream their content, join me for this session.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

React article version of this talk

Video summary

Today's Talk explores modern and secure streaming on the web, covering topics such as segmentation, media source extensions, dash protocol, and encryption/decryption with encrypted media extensions. The MP4 format is discussed, including atom structure and fragmentation. The use of the MPEG-DASH streaming protocol to fragment files and create a dash manifest is explained. Content protection and playback are handled through media source extensions, decryption components, and the creation of decryption keys. A demo is conducted to showcase the preparation, encryption, and playback of encrypted content. The importance of segmentation, media source extensions, encryption, and digital rights management in ensuring smooth and secure content distribution is emphasized.

FAQ

MPEG-DASH (Dynamic Adaptive Streaming over HTTP) is a streaming protocol that splits media files into smaller segments for adaptive streaming, enhancing playback quality and efficiency.

DRM is used to protect media content from unauthorized use and control its distribution. It involves encryption and decryption processes to ensure secure streaming.

Encrypted Media Extensions (EME) is an API that facilitates the decryption of encrypted media content, allowing it to be played back by users.

Media Source Extensions (MSE) enable the creation of media source objects that control buffering and playback of media segments, allowing for smooth and adaptive streaming.

The speaker recommends tools like 'Pentor 4' and 'Mudoteca' for working with MP4 files, as well as understanding specifications related to streaming protocols.

The speaker is Kasia, a second-year employee at Spotify. She works on a team that develops an SDK powering the Spotify player on the web.

The main topic of the talk is modern and secure streaming on the web, including smooth playback and content encryption.

Key topics include segmentation, media source extensions, DASH protocol, encryption, and decryption with encrypted media extensions.

Fragmentation allows downloading and playing fractions of a video file, which helps ensure smooth playback and control over buffering.

Attendees can scan a QR code provided in the presentation to access a GitHub repository with the demo application and additional resources related to the talk.

browser api security case study

Katarzyna Dusza

Katarzyna Dusza

30 min

21 Nov, 2024

Comments

Sign in or register to post your comment.

Video transcription

Sign in to access video transcription and chapter summary.

Available in other languages:

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

A Framework for Managing Technical Debt

TechLead Conference 2023

35 min

A Framework for Managing Technical Debt

Top Content

Alex Moldovan

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

developer challenges team productivity case study

React Summit 2023

24 min

Debugging JS

Top Content

Watch video: Debugging JS

Mark Erikson

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

web development javascript case study best practices debug

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder

Node Congress 2022

26 min

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder

Top Content

Feross Aboukhadijeh

Feross Aboukhadijeh

Feross is the author and maintainer of WebTorrent, StandardJS, and 100s of other open source projects

The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.

node.js security

Building a Voice-Enabled AI Assistant With Javascript

JSNation 2023

21 min

Building a Voice-Enabled AI Assistant With Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

artificial intelligence case study

A Practical Guide for Migrating to Server Components

React Advanced 2023

28 min

A Practical Guide for Migrating to Server Components

Top Content

Watch video: A Practical Guide for Migrating to Server Components

Fredrik Höglund

Fredrik Höglund

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react 18 react react server components react query next.js case study

Power Fixing React Performance Woes

React Advanced 2023

22 min

Power Fixing React Performance Woes

Top Content

Watch video: Power Fixing React Performance Woes

Josh Goldberg

Open Source enthusiast, TypeScript contributor, writing a book on Typescript

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

react performance case study

Workshops on related topic

Build Modern Applications Using GraphQL and Javascript

Node Congress 2024

152 min

Build Modern Applications Using GraphQL and Javascript

Featured Workshop

Emanuel Scirlet

Miguel Henriques

2 authors

Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.

web development graphql case study

Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs

JSNation US 2024

148 min

Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs

Featured Workshop

Gregor Biswanger

Gregor Biswanger

In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals.This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems.

security testing security

Building a Shopify App with React & Node

React Summit Remote Edition 2021

87 min

Building a Shopify App with React & Node

Top Content

WorkshopFree

Jennifer Gray

Hanna Chen

2 authors

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.

shopify with react e-commerce shopify case study

0 to Auth in an hour with ReactJS

React Summit 2023

56 min

0 to Auth in an hour with ReactJS

WorkshopFree

Kevin Gao

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.

react web development authentication security

Build a chat room with Appwrite and React

JSNation 2022

41 min

Build a chat room with Appwrite and React

WorkshopFree

Wess Cope

API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!

web development react chat app case study realtime

Hard GraphQL Problems at Shopify

GraphQL Galaxy 2021

164 min

Hard GraphQL Problems at Shopify

WorkshopFree

Rebecca Friedman

Jonathan Baker

Alex Ackerman

Théo Ben Hassen

Greg MacWilliam

5 authors

At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.

graphql scalability case study