title: How to record video and Audio in angularJS mobile Website
body: <p>I am developing a mobile website using Express and AngularJS.</p>
  
  <p>I want to show a modal to the user to record a video and then save it in a folder. </p>
  
  <p>I tried using <a href="https://www.npmjs.com/package/recordrtc" rel="nofollow noreferrer">RecordRTC</a>, this is my code:</p>
  
  <p><strong>video.partial.html</strong></p>
  
  <pre><code>&lt;script src="./../../node_modules/recordrtc/RecordRTC.js"&gt;&lt;/script&gt;
  &lt;div ng-controller="index"&gt;
    &lt;button ng-click="addVideo()"&gt;Add Video&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute', 'ngMaterial', 'ui.bootstrap']);
  app.controller('index', ['$scope', '$location', 'Storage', '$http', '$modal', '$sce', function ($scope, $location, Storage, $http, $modal, $sce) {
    $scope.addVideo = function () {
      console.log('adding Video');
      $scope.openVideoModal();
    };
  
    $scope.openVideoModal = function (data) {
      $scope.modalInstance = $modal.open({
        templateUrl: 'partials/video.modal.html',
        controller: 'index',
        resolve: {
          data: function () {
            return data === null ? {} : data;
          }
        }
      }).result.then(function () { }, function (res) { });
    };
  }
  </code></pre>
  
  <p><strong>video.modal.html</strong></p>
  
  <pre><code>&lt;style&gt;
      html,
      body {
          margin: 0!important;
          padding: 0!important;
          overflow: hidden!important;
          width: 100%;
      }
  &lt;/style&gt;
  
  &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title"&gt;Record Video&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div style="margin: 5%;"&gt;
      &lt;button class="md-raised md-primary" id="btn-start-recording"&gt;Start Recording&lt;/button&gt;
      &lt;button class="md-raised md-primary" id="btn-stop-recording"&gt;Stop Recording&lt;/button&gt;
      &lt;hr&gt;
      &lt;video controls autoplay style: "width: 100%"&gt;&lt;/video&gt;
  &lt;/div&gt;
  &lt;script&gt;
  console.log('script is called here');
  var recorder; // globally accessible
  var btnStart = document.getElementById('btn-start-recording');
  var btnStop = document.getElementById('btn-stop-recording');
  var video = document.querySelector('video');
  
  function captureCamera(callback) {
      navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function (camera) {
          console.log('capture camera');
          callback(camera);
      }).catch(function (error) {
          alert('Unable to record Video.');
          console.error(error);
      });
  };
  
  function stopRecordingCallback() {
      console.log('stop recording');
      video.src = video.srcObject = null;
      video.src = URL.createObjectURL(recorder.getBlob());
      video.play();
      recorder.camera.stop();
      recorder.destroy();
      recorder = null;
  };
  
  btnStart.onclick = function () {
      this.disabled = true;
      console.log('start recording');
      captureCamera(function (camera) {
          setSrcObject(camera, video);
          video.play();
          recorder = RecordRTC(camera, {
              type: 'video'
          });
          recorder.startRecording();
          // release camera on stopRecording
          recorder.camera = camera;
          btnStop.disabled = false;
      });
  };
  
  btnStop.onclick = function () {
      console.log('stopping recording');
      this.disabled = true;
      recorder.stopRecording(stopRecordingCallback);
      btnStart.disabled = false;
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>But now, the script from the modal does not load when the modal is shown, and thus clicking the <code>start recording</code> button does nothing.</p>
  
  <p>Is there some way to fix this? or, is there a better way to record audio and video in AngularJS?</p>
  
  <p>Any suggestions would be helpful!</p>