baptx

webrtc_video_blob_record

Sep 9th, 2020 (edited)
172
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Customized code to allow WebRTC record on existing page or HTML5 video blob download (based on https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/record/js/main.js)
  2.  
  3. /*
  4. *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
  5. *
  6. *  Use of this source code is governed by a BSD-style license
  7. *  that can be found in the LICENSE file in the root of the source
  8. *  tree.
  9. */
  10.  
  11. // This code is adapted from
  12. // https://rawgit.com/Miguelao/demos/master/mediarecorder.html
  13.  
  14. /* CUSTOM */
  15. //document.getElementsByTagName("video")[0].id = "gum";
  16. var div = document.createElement("div");
  17. div.innerHTML = `<video id="recorded" playsinline="" loop=""></video>
  18. <div>
  19.     <button id="start">Start camera</button>
  20.     <button id="record" disabled="">Start Recording</button>
  21.     <button id="play" disabled="">Play</button>
  22.     <button id="download" disabled="">Download</button>
  23. </div>`;
  24. document.body.appendChild(div);
  25. /* END CUSTOM */
  26.  
  27. 'use strict';
  28.  
  29. /* globals MediaRecorder */
  30.  
  31. const mediaSource = new MediaSource();
  32. mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
  33. let mediaRecorder;
  34. let recordedBlobs;
  35. let sourceBuffer;
  36.  
  37. //const errorMsgElement = document.querySelector('span#errorMsg');
  38. const recordedVideo = document.querySelector('video#recorded');
  39. const recordButton = document.querySelector('button#record');
  40. recordButton.addEventListener('click', () => {
  41.   if (recordButton.textContent === 'Start Recording') {
  42.     startRecording();
  43.   } else {
  44.     stopRecording();
  45.     recordButton.textContent = 'Start Recording';
  46.     playButton.disabled = false;
  47.     downloadButton.disabled = false;
  48.   }
  49. });
  50.  
  51. const playButton = document.querySelector('button#play');
  52. playButton.addEventListener('click', () => {
  53.   const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  54.   recordedVideo.src = null;
  55.   recordedVideo.srcObject = null;
  56.   recordedVideo.src = window.URL.createObjectURL(superBuffer);
  57.   recordedVideo.controls = true;
  58.   recordedVideo.play();
  59. });
  60.  
  61. const downloadButton = document.querySelector('button#download');
  62. downloadButton.addEventListener('click', () => {
  63.   const blob = new Blob(recordedBlobs, {type: 'video/webm'});
  64.   const url = window.URL.createObjectURL(blob);
  65.   const a = document.createElement('a');
  66.   a.style.display = 'none';
  67.   a.href = url;
  68.   a.download = 'test.webm';
  69.   document.body.appendChild(a);
  70.   a.click();
  71.   setTimeout(() => {
  72.     document.body.removeChild(a);
  73.     window.URL.revokeObjectURL(url);
  74.   }, 100);
  75. });
  76.  
  77. function handleSourceOpen(event) {
  78.   console.log('MediaSource opened');
  79.   sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  80.   console.log('Source buffer: ', sourceBuffer);
  81. }
  82.  
  83. function handleDataAvailable(event) {
  84.   console.log('handleDataAvailable', event);
  85.   if (event.data && event.data.size > 0) {
  86.     recordedBlobs.push(event.data);
  87.   }
  88. }
  89.  
  90. function startRecording() {
  91.   recordedBlobs = [];
  92.   /*let options = {mimeType: 'video/webm;codecs=vp9'};
  93.   if (!MediaRecorder.isTypeSupported(options.mimeType)) {
  94.     console.error(`${options.mimeType} is not Supported`);
  95.     //errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
  96.     options = {mimeType: 'video/webm;codecs=vp8'};
  97.     if (!MediaRecorder.isTypeSupported(options.mimeType)) {
  98.       console.error(`${options.mimeType} is not Supported`);
  99.       //errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
  100.       options = {mimeType: 'video/webm'};
  101.       if (!MediaRecorder.isTypeSupported(options.mimeType)) {
  102.         console.error(`${options.mimeType} is not Supported`);
  103.         //errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
  104.         options = {mimeType: ''};
  105.       }
  106.     }
  107.   }*/
  108.  
  109.   try {
  110.     //mediaRecorder = new MediaRecorder(window.stream, options);
  111.     var video = document.getElementsByTagName("video")[0];
  112.     stream = video.captureStream ? video.captureStream() : video.mozCaptureStream();
  113.     mediaRecorder = new MediaRecorder(stream);
  114.   } catch (e) {
  115.     console.error('Exception while creating MediaRecorder:', e);
  116.     //errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
  117.     return;
  118.   }
  119.  
  120.   //console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  121.   recordButton.textContent = 'Stop Recording';
  122.   playButton.disabled = true;
  123.   downloadButton.disabled = true;
  124.   mediaRecorder.onstop = (event) => {
  125.     console.log('Recorder stopped: ', event);
  126.     console.log('Recorded Blobs: ', recordedBlobs);
  127.   };
  128.   mediaRecorder.ondataavailable = handleDataAvailable;
  129.   mediaRecorder.start(10); // collect 10ms of data
  130.   console.log('MediaRecorder started', mediaRecorder);
  131. }
  132.  
  133. function stopRecording() {
  134.   mediaRecorder.stop();
  135. }
  136.  
  137. function handleSuccess(stream) {
  138.   recordButton.disabled = false;
  139.   console.log('getUserMedia() got stream:', stream);
  140.   window.stream = stream;
  141.  
  142.   //const gumVideo = document.querySelector('video#gum');
  143.   document.getElementsByTagName("video")[0];
  144.   gumVideo.srcObject = stream;
  145. }
  146.  
  147. async function init(constraints) {
  148.   try {
  149.     const stream = await navigator.mediaDevices.getUserMedia(constraints);
  150.     handleSuccess(stream);
  151.   } catch (e) {
  152.     console.error('navigator.getUserMedia error:', e);
  153.     //errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  154.   }
  155. }
  156.  
  157. document.querySelector('button#start').addEventListener('click', async () => {
  158.   const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
  159.   const constraints = {
  160.     audio: {
  161.       echoCancellation: {exact: hasEchoCancellation}
  162.     },
  163.     video: {
  164.       width: 1280, height: 720
  165.     }
  166.   };
  167.   console.log('Using media constraints:', constraints);
  168.   await init(constraints);
  169. });
  170.  
  171. /* CUSTOM */
  172. document.querySelector('button#record').disabled = false;
  173. document.querySelector('button#record').click();
  174. document.querySelector('button#download').disabled = false;
  175.  
  176. /*
  177. document.querySelector('button#download').click();
  178. */
  179. /* END CUSTOM */
  180.  
RAW Paste Data