Building a video editor on the web. Part 0.

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.

<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Below is my rough one-page project plan:</p>
<p><strong>Use cases that I have:</strong></p>
<ul>
<li>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.</li>
<li>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.</li>
<li>I need to build some products to keep sharp. ;)</li>
</ul>
<p><strong>Input:</strong></p>
<ul>
<li>[p0] Record audio from a microphone</li>
<li>[p0] Record video from a web camera [done – see below]</li>
<li>[p0] Embed external videos hosted on the web</li>
<li>[p0] Record the desktop</li>
<li>[p1] Record a remote stream</li>
<li>[p1] Record a <canvas> element</li>
<li>[p0] Load a file from the local device</li>
<li>[p1] Share a file from the local device (android share intent)</li>
</ul>
<p><strong>Manipulation:</strong></p>
<ul>
<li>[p1] Add watermarks</li>
<li>[p1] Add in filter effects to the image</li>
<li>[p0] Add in custom images as layers</li>
<li>[p0] Queue videos and overlay</li>
<li>[p0] Overlay separate tracks of audio and video</li>
<li>[p1] Overlay text at specific times</li>
<li>[p0] Crop video to size</li>
<li>[p0] Enable positioning and resizing of the video</li>
<li>[p0] Trim video / audio</li>
<li>[p0] Splice video / audio</li>
</ul>
<p><strong>Output:</strong></p>
<ul>
<li>[p0] Video file in webm format</li>
<li>[p1] VTT information</li>
<li>[p1] Video file in xyz format</li>
</ul>
<p><a href="https://glitch.com/edit/#!/camera-recorder?path=script.js:1:0">Code for this
video</a>
<a href="https://camera-recorder.glitch.me/">Demo</a></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">init</span> <span style="color:#f92672">=</span> () => {
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">blobs</span>;
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">rec</span>;
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">stream</span>;

<span style="color:#a6e22e">captureBtn</span>.<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">async</span> () => {
<span style="color:#a6e22e">stream</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">navigator</span>.<span style="color:#a6e22e">mediaDevices</span>.<span style="color:#a6e22e">getUserMedia</span>({<span style="color:#a6e22e">video</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1280</span>,
<span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">720</span> }, <span style="color:#a6e22e">audio</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>});

<span style="color:#a6e22e">videoElement</span>.<span style="color:#a6e22e">srcObject</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">stream</span>;
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">opts</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">mimeType</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'video/webm; codecs=vp9,opus'</span>};
<span style="color:#a6e22e">blobs</span> <span style="color:#f92672">=</span> [];
<span style="color:#a6e22e">download</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">display</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'none'</span>

<span style="color:#a6e22e">rec</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">MediaRecorder</span>(<span style="color:#a6e22e">stream</span>, <span style="color:#a6e22e">opts</span>);
<span style="color:#a6e22e">rec</span>.<span style="color:#a6e22e">ondataavailable</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) => <span style="color:#a6e22e">blobs</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">data</span>);
<span style="color:#a6e22e">rec</span>.<span style="color:#a6e22e">onstop</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">async</span> () => {
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">blob</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Blob</span>(<span style="color:#a6e22e">blobs</span>, {<span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'video/webm'</span>});
<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">url</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">URL</span>.<span style="color:#a6e22e">createObjectURL</span>(<span style="color:#a6e22e">blob</span>);
<span style="color:#a6e22e">download</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">url</span>;
<span style="color:#a6e22e">download</span>.<span style="color:#a6e22e">download</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'test.webm'</span>;
<span style="color:#a6e22e">download</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">display</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'block'</span>;
};
<span style="color:#a6e22e">startBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>;
<span style="color:#a6e22e">captureBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;
};

<span style="color:#a6e22e">startBtn</span>.<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> () => {
<span style="color:#a6e22e">startBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;
<span style="color:#a6e22e">stopBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>;
<span style="color:#a6e22e">rec</span>.<span style="color:#a6e22e">start</span>();
};

<span style="color:#a6e22e">stopBtn</span>.<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> () => {
<span style="color:#a6e22e">captureBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>;
<span style="color:#a6e22e">startBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;
<span style="color:#a6e22e">stopBtn</span>.<span style="color:#a6e22e">disabled</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;

<span style="color:#a6e22e">rec</span>.<span style="color:#a6e22e">stop</span>();
<span style="color:#a6e22e">stream</span>.<span style="color:#a6e22e">getTracks</span>().<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">s</span>=><span style="color:#a6e22e">s</span>.<span style="color:#a6e22e">stop</span>())
<span style="color:#a6e22e">videoElement</span>.<span style="color:#a6e22e">srcObject</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>
<span style="color:#a6e22e">stream</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span>;
};
};

window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'load'</span>, <span style="color:#a6e22e">init</span>);
</code></pre></div>


Print Share Comment Cite Upload Translate
APA
Paul Kinlan | Sciencx (2024-03-29T09:04:33+00:00) » Building a video editor on the web. Part 0.. Retrieved from https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/.
MLA
" » Building a video editor on the web. Part 0.." Paul Kinlan | Sciencx - Thursday October 11, 2018, https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/
HARVARD
Paul Kinlan | Sciencx Thursday October 11, 2018 » Building a video editor on the web. Part 0.., viewed 2024-03-29T09:04:33+00:00,<https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/>
VANCOUVER
Paul Kinlan | Sciencx - » Building a video editor on the web. Part 0.. [Internet]. [Accessed 2024-03-29T09:04:33+00:00]. Available from: https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/
CHICAGO
" » Building a video editor on the web. Part 0.." Paul Kinlan | Sciencx - Accessed 2024-03-29T09:04:33+00:00. https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/
IEEE
" » Building a video editor on the web. Part 0.." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/. [Accessed: 2024-03-29T09:04:33+00:00]
rf:citation
» Building a video editor on the web. Part 0. | Paul Kinlan | Sciencx | https://www.scien.cx/2018/10/11/building-a-video-editor-on-the-web-part-0/ | 2024-03-29T09:04:33+00:00
https://github.com/addpipe/simple-recorderjs-demo