video upload thing

browser video record & upload

by edwardsharp

HTML

<h1>
  videoCAPTURE
</h1>
<h2 id="allowHint" class="hidden">
  you need to allow your browser to access your webcam &amp; microphone.
</h2>
<h2 id="hint" class="hidden">
  hint: use the Chrome or FireFox browser to record video on this page using your webcam. otherwise, select a video file to upload.
</h2>
<div id="streamContainer" class="hidden">
  source:
  <select id="audioSource"></select>
  <label for="audioSource">audio</label>
  <select id="videoSource"></select>
  <label for="videoSource">video</label>
  <br>
  <video id="live" width="320"></video>
  <div id="livePreview">live preview</div>
  <div class="buttonContainer">
    <button id="record" class="hidden">record</button>
    <button id="stop" class="hidden">stop</button>
  </div>
  <br>
  <video id="recording" controls width="320"></video>
  <br>
  <div id="recordedClip">recorded clip</div>
  <div class="buttonContainer">
    <button id="uploadStreamButton" class="hidden">upload</button>
  </div>
</div>
<input id="upload" class="hidden" type="file" accept="video/*;capture=camcorder">

CSS

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 320px;
}

* {
  font-weight: 100;
  color: white;
  background-color: black;
}

button {
  font-size: 2em;
  padding: 0.5em;
  border: none;
  background-color: #666;
}

.hidden {
  display: none;
}

.buttonContainer {
  text-align: center;
}

#record {
  background-color: red;
  border-radius: 10px;
}

#record:hover {
  background-color: #990000;
}

#stop:hover {
  background-color: #ddd;
}

#livePreview,
#recordedClip,
#hint,
#allowHint {
  width: 320px;
}

JavaScript

var recordButton, stopButton, recorder, liveStream, constraints;
var audioSelect, videoSelect, livePreview, upload, streamContainer, uploadStreamButton, hint, liveVideo, video;

window.onload = function() {
  audioSelect = document.querySelector('select#audioSource');
  videoSelect = document.querySelector('select#videoSource');
  livePreview = document.querySelector('#livePreview');
  upload = document.querySelector('#upload');
  streamContainer = document.querySelector('#streamContainer');
  uploadStreamButton = document.querySelector('#uploadStreamButton');
  hint = document.querySelector('#hint');
  liveVideo = document.getElementById('live');
  video = document.getElementById('recording');
  recordButton = document.getElementById('record');
  stopButton = document.getElementById('stop');

  if (window.MediaRecorder) {
    navigator.mediaDevices.enumerateDevices()
      .then(gotDevices).then(getStream).catch(handleError);

    audioSelect.onchange = getStream;
    videoSelect.onchange = getStream;
  } else {
    hint.classList.remove('hidden');
    upload.classList.remove('hidden');
  }
};

function gotDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label ||
        'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    }
  }
}

function getStream() {
  if (liveStream) {
    liveStream.getTracks().forEach(function(track) {
      track.stop();
    });
  }

  constraints = {
    audio: {
      deviceId: {
        exact: audioSelect.value
      }
    },
    video: {
      deviceId: {
        exact: videoSelect.value
      }
    }
 ...