使用CordovaCapture以离子方式在本地录制和播放视频

时间:2016-10-25 14:15:39

标签: android ios angularjs cordova ionic-framework

我试图在Ionic app中使用CordovaCapture在我的应用上显示此视频。 我也使用window.resolveLocalFileSystemURL来获取视频网址但仍然无法正常工作请仔细检查并帮助我。

controller.js

angular.module('starter.controllers', ['ngCordova'])

.controller('VideoCtrl', function($scope, $cordovaCapture) {

function successCallback(fileEntry) {
$scope.video = fileEntry.nativeURL;
console.log(fileEntry.name);
console.log(fileEntry);
console.log($scope.video);
}
function errorCallback(fileEntry) {
    console.log(fileEntry.name);
}
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {

    // do something interesting with the file
    $scope.$apply(function(){
      $scope.path = mediaFiles[i].fullPath;
      window.resolveLocalFileSystemURL($scope.path, successCallback, errorCallback);
      console.log($scope.path);
    });
    console.log($scope.path);
}
};

// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};


    var options = { limit: 1, duration: 15 };

// start video capture
$scope.captureVideo = function() {
    // Launch device video recording application, 
    navigator.device.capture.captureVideo(captureSuccess, captureError, options); 

}

的index.html:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title></title>

      <link rel="manifest" href="manifest.json">

      <link href="lib/ionic/css/ionic.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">

      <!-- ionic/angularjs js -->
      <script src="lib/ionic/js/ionic.bundle.js"></script>

      <!-- cordova script (this will be a 404 during development) -->
      <script src="cordova.js"></script> 

      <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <!--  <script type="text/javascript" src="cordova.js"></script>--> 

      <!-- your app's js -->
      <script src="js/app.js"></script>
      <script src="js/controller.js"></script>
    </head>



    <body ng-app="starter">

  <ion-view ng-controller="VideoCtrl">
    <ion-header-bar class="bar-stable">
    <h1 class="title">My videos</h1>
    </ion-header-bar>

    <ion-content>
      <div class="list">
      <div class="item item-divider">
        <i class="ion-videocamera"></i>
        Current clip
      </div>
  {{video}}
      <video width="320" height="240" controls ng-if="path"> -->
        <source ng-src="{{video}}"  type="video/mp4">
       Your browser does not support the video tag.
      </video>
    </div>

    </ion-content>

    <ion-footer-bar align-title="center" class="bar bar-light">
      <div class="button-bar">
        <button class="button button-positive" ng-click="captureVideo()">
          Capture a video
        </button>
      </div>
    </ion-footer-bar>

  </ion-view>
    </body>
  </html>

我不知道我是做对还是错。请帮助我如何使它在视图上工作。

0 个答案:

没有答案