Merge pull request #1700 from fippo/recording-import

recording: allow local upload and play

Author: fippo

src/content/getusermedia/record/css/main.css

@@ -12,6 +12,22 @@
   width: 120px;
 }
 
+/* copied from main button style */
+.file-upload {
+  background-color: #d84a38;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8em;
+  margin: 0 0 1em 0;
+  padding: 0.5em 0.7em 0.6em 0.7em;
+}
+
+.file-upload:hover {
+  background-color: #cf402f;
+}
+
 button:last-of-type {
   margin: 0;
 }
@@ -35,3 +51,7 @@ video:last-of-type {
 video#gumVideo {
   margin: 0 20px 20px 0;
 }
+
+input[type="file"] {
+  display: none;
+}

src/content/getusermedia/record/index.html

@@ -49,6 +49,7 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
         <button id="record" disabled>Start Recording</button>
         <button id="play" disabled>Play</button>
         <button id="download" disabled>Download</button>
+        <label for="upload" class="file-upload">upload locally</label><input id="upload" type="file"/>
     </div>
 
     <div>

src/content/getusermedia/record/js/main.js

@@ -17,13 +17,13 @@ let mediaRecorder;
 let recordedBlobs;
 
 const codecPreferences = document.querySelector('#codecPreferences');
-
 const errorMsgElement = document.querySelector('span#errorMsg');
 const recordedVideo = document.querySelector('video#recorded');
 const recordButton = document.querySelector('button#record');
 recordButton.addEventListener('click', () => {
   if (recordButton.textContent === 'Start Recording') {
     startRecording();
+    uploadButton.disabled = true;
   } else {
     stopRecording();
     recordButton.textContent = 'Start Recording';
@@ -33,15 +33,24 @@ recordButton.addEventListener('click', () => {
   }
 });
 
-const playButton = document.querySelector('button#play');
-playButton.addEventListener('click', () => {
-  const mimeType = codecPreferences.options[codecPreferences.selectedIndex].value.split(';', 1)[0];
-  const superBuffer = new Blob(recordedBlobs, {type: mimeType});
+function doPlay(blob) {
   recordedVideo.src = null;
   recordedVideo.srcObject = null;
-  recordedVideo.src = window.URL.createObjectURL(superBuffer);
+  recordedVideo.src = window.URL.createObjectURL(blob);
   recordedVideo.controls = true;
   recordedVideo.play();
+};
+
+const playButton = document.querySelector('button#play');
+playButton.addEventListener('click', () => {
+  const mimeType = codecPreferences.options[codecPreferences.selectedIndex].value.split(';', 1)[0];
+  const superBuffer = new Blob(recordedBlobs, {type: mimeType});
+  doPlay(superBuffer);
+});
+
+const uploadButton = document.querySelector('#upload');
+uploadButton.addEventListener('change', e => {
+  doPlay(e.target.files[0]);
 });
 
 const downloadButton = document.querySelector('button#download');