Как записать видео и аудио на мобильном сайте angularJS - PullRequest
Новая
       42

Как записать видео и аудио на мобильном сайте angularJS

0 голосов
/ 07 мая 2018

Я занимаюсь разработкой мобильного веб-сайта с использованием Express и AngularJS.

Я хочу показать модал пользователю для записи видео, а затем сохранить его в папке.

Я пытался использовать RecordRTC , это мой код:

video.partial.html 

<script src="./../../node_modules/recordrtc/RecordRTC.js"></script>
<div ng-controller="index">
  <button ng-click="addVideo()">Add Video</button>
</div>

app.js 

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) { });
  };
}

video.modal.html 

<style>
    html,
    body {
        margin: 0!important;
        padding: 0!important;
        overflow: hidden!important;
        width: 100%;
    }
</style>

<div class="modal-header">
    <h4 class="modal-title">Record Video</h4>
</div>
<div style="margin: 5%;">
    <button class="md-raised md-primary" id="btn-start-recording">Start Recording</button>
    <button class="md-raised md-primary" id="btn-stop-recording">Stop Recording</button>
    <hr>
    <video controls autoplay style: "width: 100%"></video>
</div>
<script>
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;
};
</script>

Но теперь скрипт из модального окна не загружается, когда отображается модальный, и, таким образом, нажатие кнопки start recording ничего не делает.

Есть ли способ исправить это? или есть лучший способ записать аудио и видео в AngularJS?

Любые предложения будут полезны!

...