How to Program Interactive Videos for the Modern Web 🎥
This is me ... obviously
How can we record and upload video in the browser?
What about video chat?
What about streaming?
Questions
Intro: getUserMedia() 📹
MediaStream is the backbone of web video
But a MediaStream is not very useful on its own...
... a MediaStream is always an input to another browser API
Recording with MediaRecorder 🎞
MediaRecorder records the contents of a MediaStream into a "Blob"
But what about Safari?
<input type="file" accept="video/*" capture="user" />Mobile Recording
Video Chat with WebRTC 📞
WebRTC: peer-to-peer browser connection to exchange, video, audio, or other abritrary data among users
Think Google Meet in the browser!
- You still need infrastructure for some things
- Focus: quantity over quality
- Recording this video not trivial
Bonus: Streaming
Stream Consumption
Protocols: HLS vs MPEG-DASH
Goals: Adaptive Bitrate, Smart Buffering
Stream Creation
Theoretically? yes.
Pracitcally? Not very much 😞
How to Program Interactive Videos for the Modern Web
By haydenbraxton
How to Program Interactive Videos for the Modern Web
From social media, to doctor visits, to education - interactive video has become much more important for businesses and individual Internet users alike. As of 2020, browsers and Internet infrastructure have advanced much farther beyond the point of simply being able to play a video on a web page. In this talk, we’ll take a survey of the different video capabilities supported by browsers, the JavaScript APIs that enable these features, and some of the pitfalls encountered on specific platforms and browsers.
