index.html 6.1 KB

原文件审查历史永久链接

<!--
// Muaz Khan     - www.MuazKhan.com
// MIT License   - www.WebRTC-Experiment.com/licence
// Experiments   - github.com/muaz-khan/RecordRTC
-->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>RecordRTC to Node.js</title>
  <script>
    if (location.href.indexOf('file:') == 0) {
      document.write('<h1 style="color:red;">Please load this HTML file on HTTP or HTTPS.</h1>');
    }
  </script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
  <meta name="author" content="Muaz Khan">

  <style>
    html {
      background-color: #f7f7f7;
    }

    body {
      background-color: white;
      border: 1px solid rgb(15, 158, 238);
      margin: 1% 35%;
      text-align: center;
    }

    hr {
      border: 0;
      border-top: 1px solid rgb(15, 158, 238);
    }

    a {
      color: #2844FA;
      text-decoration: none;
    }

    a:hover,
    a:focus {
      color: #1B29A4;
    }

    a:active {
      color: #000;
    }

    audio,
    video {
      border: 1px solid rgb(15, 158, 238);
      width: 94%;
    }

    button[disabled],
    input[disabled] {
      background: rgba(216, 205, 205, 0.2);
      border: 1px solid rgb(233, 224, 224);
    }
  </style>
</head>

<body>
  <h1>RecordRTC to Node.js</h1>
  <p>
    <video></video>
  </p>
  <hr />

  <div>
    <label id="percentage">0%</label>
    <progress id="progress-bar" value=0></progress><br />
  </div>

  <hr />

  <div>
    <button id="btn-start-recording">Start Recording</button>
    <button id="btn-stop-recording" disabled="">Stop Recording</button>
  </div>

  <script src="/node_modules/recordrtc/RecordRTC.js"> </script>

  <script>
    // fetching DOM references
    var btnStartRecording = document.querySelector('#btn-start-recording');
    var btnStopRecording = document.querySelector('#btn-stop-recording');

    var videoElement = document.querySelector('video');

    var progressBar = document.querySelector('#progress-bar');
    var percentage = document.querySelector('#percentage');

    var recorder;

    // reusable helpers

    // this function submits recorded blob to nodejs server
    function postFiles() {
      var blob = recorder.getBlob();

      // getting unique identifier for the file name
      var fileName = generateRandomString() + '.webm';

      var file = new File([blob], fileName, {
        type: 'video/webm'
      });

      videoElement.src = videoElement.srcObject = null;
      videoElement.src = URL.createObjectURL(recorder.getBlob());
      if (mediaStream) mediaStream.stop();
      return;

      // videoElement.src = '';
      // videoElement.poster = '/ajax-loader.gif';

      xhr('/uploadFile', file, function (responseText) {
        var fileURL = JSON.parse(responseText).fileURL;

        console.info('fileURL', fileURL);
        videoElement.src = fileURL;
        videoElement.play();
        videoElement.muted = false;
        videoElement.controls = true;

        document.querySelector('#footer-h2').innerHTML = '<a href="' + videoElement.src + '">' + videoElement.src + '</a>';
      });

      if (mediaStream) mediaStream.stop();
    }

    // XHR2/FormData
    function xhr(url, data, callback) {
      var request = new XMLHttpRequest();
      request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
          callback(request.responseText);
        }
      };

      request.upload.onprogress = function (event) {
        progressBar.max = event.total;
        progressBar.value = event.loaded;
        progressBar.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
      };

      request.upload.onload = function () {
        percentage.style.display = 'none';
        progressBar.style.display = 'none';
      };
      request.open('POST', url);

      var formData = new FormData();
      formData.append('file', data);
      request.send(formData);
    }

    // generating random string
    function generateRandomString() {
      if (window.crypto) {
        var a = window.crypto.getRandomValues(new Uint32Array(3)),
          token = '';
        for (var i = 0, l = a.length; i < l; i++) token += a[i].toString(36);
        return token;
      } else {
        return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
      }
    }

    var mediaStream = null;
    // reusable getUserMedia
    function captureUserMedia(success_callback) {
      var session = {
        audio: true,
        video: true
      };

      navigator.getUserMedia(session, success_callback, function (error) {
        alert('Unable to capture your camera. Please check console logs.');
        console.error(error);
      });
    }

    // UI events handling
    btnStartRecording.onclick = function () {
      btnStartRecording.disabled = true;

      captureUserMedia(function (stream) {
        mediaStream = stream;
        // videoElement.src = window.URL.createObjectURL(stream);
        try {
          videoElement.srcObject = stream;
        } catch (error) {
          videoElement.src = window.URL.createObjectURL(stream);
        }
        videoElement.play();
        videoElement.muted = true;
        videoElement.controls = true;
        recorder = RecordRTC(stream, {
          type: 'video'
        });

        recorder.startRecording();

        // enable stop-recording button
        btnStopRecording.disabled = false;
      });
    };


    btnStopRecording.onclick = function () {
      btnStartRecording.disabled = false;
      btnStopRecording.disabled = true;

      recorder.stopRecording(postFiles);
    };

    window.onbeforeunload = function () {
      startRecording.disabled = false;
    };
  </script>
  <footer style="width:100%;position: fixed; right: 0; text-align: center;color:red;">
    <h2 id="footer-h2"></h2>
    Questions?? <a href="mailto:muazkh@gmail.com">muazkh@gmail.com</a>

    <br><br>
    Open-Sourced here:<br>
    <a
      href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs">https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs</a>
  </footer>
</body>

</html>