You should be able to create and edit videos using just the web in the browser. It should be possible to provide a user-interface akin to Screenflow that lets you create an output video that combines multiple videos, images, and audio into one video that can be uploaded to services like YouTube.
This post is really just a statement of intent. I am going to start the long process of working out what is and isn't available on the platform and seeing how far we can get today.
During some of the thoughts on this project, I had a Carl Sagan moment - so instead of inventing the universe to create an apple pie, I need to at least create all the tools needed to build a video editor, especially if I want to record the process of doing it. The fact that this post exists is because I know I have some of the pieces in place and ready to go.
I don't think I am going to create one massively monolithic 'video editor', that can be a business for someone else, but I do plan on trying to work out all the pieces that are needed so that I can make it easy to create great videos on the web and hopefully show a lot of people what is possible on the web.
Below is my rough one-page project plan:
Use cases that I have:
- I normally have to record all the device demos for Google I/O and Chrome DevSummit and add in the overlays etc. Everyone on the team should be able to do this.
- The team often record screencasts and I would like to enable them to do it quickly from a simple website and be able to the clean up the final output.
- I need to build some products to keep sharp. ;)
Input:
- [p0] Record audio from a microphone
- [p0] Record video from a web camera [done - see below]
- [p0] Embed external videos hosted on the web
- [p0] Record the desktop
- [p1] Record a remote stream
- [p1] Record a <canvas> element
- [p0] Load a file from the local device
- [p1] Share a file from the local device (android share intent)
Manipulation:
- [p1] Add watermarks
- [p1] Add in filter effects to the image
- [p0] Add in custom images as layers
- [p0] Queue videos and overlay
- [p0] Overlay separate tracks of audio and video
- [p1] Overlay text at specific times
- [p0] Crop video to size
- [p0] Enable positioning and resizing of the video
- [p0] Trim video / audio
- [p0] Splice video / audio
Output:
- [p0] Video file in webm format
- [p1] VTT information
- [p1] Video file in xyz format
const init = () => {
let blobs;
let rec;
let stream;
captureBtn.onclick = async () => {
stream = await navigator.mediaDevices.getUserMedia({video: { width: 1280,
height: 720 }, audio: true});
videoElement.srcObject = stream;
let opts = {mimeType: 'video/webm; codecs=vp9,opus'};
blobs = [];
download.style.display = 'none'
rec = new MediaRecorder(stream, opts);
rec.ondataavailable = (e) => blobs.push(e.data);
rec.onstop = async () => {
let blob = new Blob(blobs, {type: 'video/webm'});
let url = window.URL.createObjectURL(blob);
download.href = url;
download.download = 'test.webm';
download.style.display = 'block';
};
startBtn.disabled = false;
captureBtn.disabled = true;
};
startBtn.onclick = () => {
startBtn.disabled = true;
stopBtn.disabled = false;
rec.start();
};
stopBtn.onclick = () => {
captureBtn.disabled = false;
startBtn.disabled = true;
stopBtn.disabled = true;
rec.stop();
stream.getTracks().forEach(s=>s.stop())
videoElement.srcObject = null
stream = null;
};
};
window.addEventListener('load', init);
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
