Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>RecordRTC over Node.js</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="/js/RecordRTC.js"> </script>
        <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; }
        </style>
    </head>
    <body>
        <p>
            <video id="camera-preview" autoplay controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video>
        </p><hr />

        <div>
                <h2 id="download-url"></h2><br />
            <button id="start-recording">Start Recording</button>
            <button id="stop-recording" >Stop Recording</button>
            <button id="upload-recording">Upload Recording</button>
        </div>
        <div id="result">
              <video id="result_camera" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;">
                     <source id="mkv_source" type="video/mkv"/>
              </video>
        </div>

<script>

$(document).ready(function(){


      var startRecording = document.getElementById('start-recording');
      var stopRecording = document.getElementById('stop-recording');
      var uploadRecordingBtn = document.getElementById('upload-recording');
      var cameraPreview = document.getElementById('camera-preview');

            var timeoutInt = 0;
            var secondCount;
      var audio = document.querySelector('audio');

            var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

            navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia;

      var recordAudio, recordVideo;
      startRecording.onclick = function() {

            navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia;

          navigator.getUserMedia({

                  audio: true

              }, function(stream) {

                  recordAudio = RecordRTC(stream, {
                      bufferSize: 16384
                  });

                                  navigator.getUserMedia({

                                          video: true

                                      }, function(stream2) {

                                          cameraPreview.src = window.URL.createObjectURL(stream2);
                                          cameraPreview.play();

                                                    if(isFirefox){
                                                recordVideo = RecordRTC(stream2);
                                                    }else{
                                                        recordVideo = RecordRTC(stream2,{type:"video"});
                                                    }

                                          stopRecording.disabled = false;
                                                    uploadRecordingBtn.disabled = true;
                                            startRecording.disabled = true;


                                                    recordAudio.startRecording();
                                                    recordVideo.startRecording();
                                                    secondCount = 1;
                                                    setTimer(secondCount);

                                      }, function(error) {
                                          alert(JSON.stringify(error));
                                      });

                  stopRecording.disabled = false;
                            uploadRecordingBtn.disabled = true;
                    startRecording.disabled = true;

              }, function(error) {
                  alert(JSON.stringify(error));
              });


      };


      stopRecording.onclick = function() {
                stopRecordingAll();
      };

            uploadRecordingBtn.onclick =  function() {

            startRecording.disabled = false;
            stopRecording.disabled = true;
          //uploadRecordingBtn.disabled = true;
                uploadBlob();

      };

      function stopRecordingAll(){
        cameraPreview.src = null;
            startRecording.disabled = false;
            stopRecording.disabled = true;
          uploadRecordingBtn.disabled = false;

            recordAudio.stopRecording();
            recordVideo.stopRecording();
            clearTimeout(timeoutInt);
      }

            function setTimer(secondCount){

                if(secondCount < 12){

                    document.getElementById("txt").innerHTML="seconds : "+secondCount ;
                secondCount++;

                timeoutInt = setTimeout(

                    function(){
                        setTimer(secondCount);
                        },

                        1000);

                }else{

                clearTimeout(timeoutInt);
                    alert("You reach to maximum limit of 11 seconds");
                    stopRecordingAll();

                }

            }

        function uploadBlob(){

            var fd = new FormData();
                var vblob = new Blob([recordVideo.getBlob()],{type: "video/webm"});
                var ablob = new Blob([recordAudio.getBlob()],{type: "audio/wav"});

            fd.append('videoBlob', vblob);
            fd.append('audioBlob', ablob);
            fd.append('chrome',true);

            $.ajax({
                type: 'POST',
                url: '/uploadBlob',
                data: fd,
                processData: false,
                contentType: false
            }).done(function(data) {
                console.log(data);
                resultVideo = document.getElementById("result_camera")
                resultVideo.src = document.location.origin+data.video_url
                resultVideo.play();
            });

        }


});
        </script>
        <div id="txt"></div>
    </body>
</html>