RecordRTC 打开设备录像并压缩文件

利用RecordRTC打开手机或者电脑摄像头，进行录像，完成后对视频文件进行压缩。

github地址：

https://github.com/muaz-khan/RecordRTC

git上的例子是比较复杂的，会对各种摄像参数进行选择和处理。这里提供一个简单并且能实现录像功能的例子。

页面：

<div style="width: 75%;" id="recording-player"></div>
<button id="btn-start-recording" ng-click="videoCapture()">开始</button>
<button id="save-to-disk">保存</button>

操作处理的js代码如下：

var video = document.createElement('video');
          video.controls = false;
          var mediaElement = getHTMLMediaElement(video, {
              buttons: ['full-screen'/!*, 'take-snapshot'*!/],
              showOnMouseEnter: false,
              width: 360,
          });
          document.getElementById('recording-player').appendChild(mediaElement);
          var div = document.createElement('section');
          mediaElement.media.parentNode.appendChild(div);
          div.appendChild(mediaElement.media);
          var recordingPlayer = mediaElement.media;
          var btnStartRecording = document.querySelector('#btn-start-recording');
          var saveRecording = document.querySelector('#save-to-disk');
          var mimeType = 'video/webm';
          var fileExtension = 'webm';
          var recorderType = null;
          var type = 'video';
          var videoBitsPerSecond = null;
          var button = btnStartRecording;

          function getURL(arg) {
              var url = arg;
              if(arg instanceof Blob || arg instanceof File) {
                  url = URL.createObjectURL(arg);
              }
              if(arg instanceof RecordRTC || arg.getBlob) {
                  url = URL.createObjectURL(arg.getBlob());
              }
              if(arg instanceof MediaStream || arg.getTracks || arg.getVideoTracks || arg.getAudioTracks) {
                  // url = URL.createObjectURL(arg);
              }
              return url;
          }

          function setVideoURL(arg, forceNonImage) {
              var url = getURL(arg);
              var parentNode = recordingPlayer.parentNode;
              parentNode.removeChild(recordingPlayer);
              parentNode.innerHTML = '';

              var elem = 'video';
              recordingPlayer = document.createElement(elem);

              if(arg instanceof MediaStream) {
                  recordingPlayer.muted = true;
              }
              recordingPlayer.addEventListener('loadedmetadata', function() {
                  if(navigator.userAgent.toLowerCase().indexOf('android') == -1) return;
                  // android
                  setTimeout(function() {
                      if(typeof recordingPlayer.play === 'function') {
                          recordingPlayer.play();
                      }
                  }, 2000);
              }, false);
              recordingPlayer.poster = '';
              if(arg instanceof MediaStream) {
                  recordingPlayer.srcObject = arg;
              }
              else {
                  recordingPlayer.src = url;
              }
              if(typeof recordingPlayer.play === 'function') {
                  recordingPlayer.play();
              }
              recordingPlayer.addEventListener('ended', function() {
                  url = getURL(arg);

                  if(arg instanceof MediaStream) {
                      recordingPlayer.srcObject = arg;
                  }
                  else {
                      recordingPlayer.src = url;
                  }
              });
              parentNode.appendChild(recordingPlayer);
          }

          button.mediaCapturedCallback = function() {

              var options = {
                  type: type,
                  mimeType: mimeType,
                  getNativeBlob: false, // enable it for longer recordings
                  video: recordingPlayer
              };
              options.ignoreMutedMedia = false;
              button.recordRTC = RecordRTC(button.stream, options);
              button.recordingEndedCallback = function(url) {
                  setVideoURL(url);
              };
              button.recordRTC.startRecording();




          }
          var commonConfig = {
              onMediaCaptured: function(stream) {
                  button.stream = stream;
                  if(button.mediaCapturedCallback) {
                      button.mediaCapturedCallback();
                  }

                  button.innerHTML = "停止";
                  button.disabled = false;
              },
              onMediaStopped: function() {
                  button.innerHTML = "开始";

                  if(!button.disableStateWaiting) {
                      button.disabled = false;
                  }
              },
              onMediaCapturingFailed: function(error) {
                  console.error('onMediaCapturingFailed:', error);

                  if(error.toString().indexOf('no audio or video tracks available') !== -1) {
                      alert('RecordRTC failed to start because there are no audio or video tracks available.');
                  }

                  if(DetectRTC.browser.name === 'Safari') return;

                  if(error.name === 'PermissionDeniedError' && DetectRTC.browser.name === 'Firefox') {
                      alert('Firefox requires version >= 52. Firefox also requires HTTPs.');
                  }

                  commonConfig.onMediaStopped();
              }
          };


          function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
              if(mediaConstraints.video == true) {
                  mediaConstraints.video = {};
              }

              navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
                  successCallback(stream);
                  setVideoURL(stream, true);
              }).catch(function(error) {
                  if(error && error.name === 'ConstraintNotSatisfiedError') {
                      alert('Your camera or browser does NOT supports selected resolutions or frame-rates. \n\nPlease select "default" resolutions.');
                  }
                  errorCallback(error);
              });
          }

          function addStreamStopListener(stream, callback) {
              var streamEndedEvent = 'ended';
              if ('oninactive' in stream) {
                  streamEndedEvent = 'inactive';
              }
              stream.addEventListener(streamEndedEvent, function() {
                  callback();
                  callback = function() {};
              }, false);
              stream.getAudioTracks().forEach(function(track) {
                  track.addEventListener(streamEndedEvent, function() {
                      callback();
                      callback = function() {};
                  }, false);
              });
              stream.getVideoTracks().forEach(function(track) {
                  track.addEventListener(streamEndedEvent, function() {
                      callback();
                      callback = function() {};
                  }, false);
              });
          }

          function captureAudioPlusVideo(config) {
              captureUserMedia({video: true, audio: true}, function(audioVideoStream) {
                  config.onMediaCaptured(audioVideoStream);
                  if(audioVideoStream instanceof Array) {
                      audioVideoStream.forEach(function(stream) {
                          addStreamStopListener(stream, function() {
                              config.onMediaStopped();
                          });
                      });
                      return;
                  }
                  addStreamStopListener(audioVideoStream, function() {
                      config.onMediaStopped();
                  });
              }, function(error) {
                  config.onMediaCapturingFailed(error);
              });
          }

          function stopStream() {
              if(button.stream && button.stream.stop) {
                  button.stream.stop();
                  button.stream = null;
              }

              if(button.stream instanceof Array) {
                  button.stream.forEach(function(stream) {
                      stream.stop();
                  });
                  button.stream = null;
              }

              videoBitsPerSecond = null;
              var html = 'Recording status: stopped';
              html += '<br>Size: ' + bytesToSize(button.recordRTC.getBlob().size);
          }

          function getFileName(fileExtension) {
              var d = new Date();
              var year = d.getUTCFullYear();
              var month = d.getUTCMonth() + 1;
              var date = d.getUTCDate();
              return 'RecordRTC-' + year + month + date + '-' + fileExtension;
          }

          function saveToDiskOrOpenNewTab(recordRTC) {

              /!*if(!recordRTC.getBlob().size) {
               var info = getFailureReport();
               console.log('blob', recordRTC.getBlob());
               console.log('recordrtc instance', recordRTC);
               console.log('report', info);

               if(mediaContainerFormat.value !== 'default') {
               alert('RecordRTC seems failed recording using ' + mediaContainerFormat.value + '. Please choose "default" option from the drop down and record again.');
               }
               else {
               alert('RecordRTC seems failed. Unexpected issue. You can read the email in your console log. \n\nPlease report using disqus chat below.');
               }

               if(mediaContainerFormat.value !== 'vp9' && DetectRTC.browser.name === 'Chrome') {
               alert('Please record using VP9 encoder. (select from the dropdown)');
               }
               }*!/

              var fileName = getFileName(fileExtension);

              saveRecording.onclick = function(event) {
                  if(!recordRTC) return alert('No recording found.');

                  var file = new File([recordRTC.getBlob()], fileName, {
                      type: mimeType
                  });

                  invokeSaveAsDialog(file, file.name);

              }
          }


          //操作录像
          btnStartRecording.onclick = function(event) {
              if(button.innerHTML === "停止") {
                  button.disabled = true;
                  button.disableStateWaiting = true;
                  setTimeout(function() {
                      button.disabled = false;
                      button.disableStateWaiting = false;
                  }, 2000);

                  button.innerHTML = '开始';

                  if(button.recordRTC) {
                      if(button.recordRTC.length) {
                          button.recordRTC[0].stopRecording(function(url) {
                              if(!button.recordRTC[1]) {
                                  button.recordingEndedCallback(url);
                                  stopStream();

                                  saveToDiskOrOpenNewTab(button.recordRTC[0]);
                                  return;
                              }

                              button.recordRTC[1].stopRecording(function(url) {
                                  button.recordingEndedCallback(url);
                                  stopStream();
                              });
                          });
                      }
                      else {
                          button.recordRTC.stopRecording(function(url) {
                              button.recordingEndedCallback(url);
                              saveToDiskOrOpenNewTab(button.recordRTC);
                              stopStream();
                          });
                      }
                  }

                  return;
              }
              captureAudioPlusVideo(commonConfig);

          }

在你的index文件中需要引入两个相关文件：

<link href="https://cdn.webrtc-experiment.com/getHTMLMediaElement.css" rel="stylesheet">
<script src="https://cdn.webrtc-experiment.com/getHTMLMediaElement.js"></script>

还需要引入RecordRTC.js。这个从git上就可以找到。
以上是从git上扒下来的部分代码，可以简单实现录像，并将视频文件压缩的功能