Question

我正在使用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中录制音频和视频？

任何建议都会有所帮助！

如何在angularJS移动网站上录制视频和音频

0 个答案: