Trying to record and embed video


#1

Hello,

I have a process on my app where i record a video and send it to amazon, but before that i show the video to my user in a thumbnail. Thats where i have a problem, im able to record and send the video to my server but when im try to show the video on the thumbnail i have several problems.

On android 5.0 the video player dont work;
On android 6.0 the video player display audio and the video lenght.

Heres a sample of my code

my view:

<ion-view hide-back-button="true">
    <ion-content has-bouncing="false">
            <div class="spacer" style="width: 300px; height: 16px;"></div>
            <h4 class="left-icon color-green w80" style="font-size: 48px"s>
                <i class="ion-videocamera float-left"></i>
                {{tipoVistoriaTexto}}
            </h4>
            <div class="spacer" style="width: 300px; height: 16px;"></div>

            <p class="texto-padrao text-left w80">{{"filme_veiculo" | translate}}</p>

            <div class="car-foto car-video lado-todos w80" ng-click="click($event)">
                <img src="img/sides-car/lado-cima.jpg" ng-hide="video" />
            </div>
            <div class="spacer" style="width: 300px; height: 8px;"></div>
            <!--<a ui-sref="app.simulacao" id="login-button99" style="color:#A5A5A5;font-size:18px;border-radius:125px 125px 125px 125px;" class="button button-balanced  button-block button-outline btn-login color-green w80">fazer vistoria</a>-->
                <a ng-click='continue()' 
                    id="cadConclusao-button38" 
                    style="font-size:18px;border-radius:125px 125px 125px 125px;" 
                    class="button button-balanced button-block btn-login color-white w80"
                    ng-disabled="!video"
                    >{{"continuar" | translate}}</a>
                <div class="spacer" style="width: 300px; height: 8px;"></div>
            <div class="spacer" style="width: 300px; height: 8px;"></div>
    </ion-content>
</ion-view>

my controller

angular.module('starter.controllers')

.controller('VistoriaVideos', function ($scope, $stateParams, $ionicPopup, $state, $document, PhotoVideo, AppStorageService, UtilsService, FileService, WebService) {
  $scope._video = "";
  var itemId = null;

  //valor recebido da tela anterior para identificar uma vistoria de sinistro
  $scope.tipoVistoria = $stateParams.tipoVistoria;

  //verifica se o valor da variável é igual a 1, caso seja trata-se de uma vistoria de sinistro, senão é uma pré-vistoria
  if ($scope.tipoVistoria == VISTORIA_SINISTRO) {
    $scope.tipoVistoriaTexto = "Agora vamos filmar seu veículo e o local do ocorrido.";
    itemId = AppStorageService.getSinistroId();
  } else {
    $scope.tipoVistoriaTexto = "Agora vamos filmar seu veículo.";
    var cotacao = AppStorageService.getCotacao();
    itemId = cotacao.cotacaoId;
  }

  $scope.click = function (e) {
    PhotoVideo.video(function success(mediaFiles) {
      $scope._video = mediaFiles;
      $scope.video = mediaFiles[0].fullPath;
      var image = $document[0].querySelector('.car-video img');
      var carFoto = $document[0].querySelector('.car-video');
      var video = $document[0].createElement('video');
      var source = $document[0].createElement('source');
      video.setAttribute('webkit-playsinline',true);
      video.setAttribute('controls',true);
      video.setAttribute('preload','auto');
      video.style.width = '100%';
      video.style['max-height'] = "300px";
      video.style.position = 'relative';
      video.style.display = 'inline-block';
      source.type = mediaFiles[0].type;
      source.src = mediaFiles[0].fullPath;
      video.appendChild(source);
      carFoto.removeChild(image);
      carFoto.appendChild(video);
      console.log(carFoto.children[0].children.length);
      $scope.$apply();//"erro" com carregamento de $scope
      $scope.click = function () {};
    },function error(e) {
      console.log(e);
    });
  };

  $scope.continue = function() {
    if ($scope._video != "") {
      UtilsService.startLoading();

      var tagVideo = ($scope.tipoVistoria == VISTORIA_SINISTRO) ? ARQUIVO_UPLOAD.SINISTRO_VIDEO_SEGURADO : ARQUIVO_UPLOAD.PREVISTORIA_VIDEO;

      FileService.enviaArquivo($scope._video[0].fullPath, "video/mp4", tagVideo, itemId, function(response){
        UtilsService.stopLoading();

        var efetuaVistoriaTerceiros = AppStorageService.getEfetuaVistoriaTerceiros();
        if (efetuaVistoriaTerceiros == true) {
          showPopupVistoria();
        } else {
          if ($scope.tipoVistoria == VISTORIA_SINISTRO) {
            $state.go('app.sinfimvistoria', {}, {reload: true});
          } else {
            gerarApolice();
          }
        }
      }, function(error){
        UtilsService.stopLoading();

        UtilsService.showPopup("Não foi possível enviar o vídeo.");

        console.log(error);
      });
    }
  }

  function showPopupVistoria(){
    var confirmPopup = $ionicPopup.confirm({
      title: 'Thinkseg',
      template: 'Vistoria de terceiros?',
      buttons:[
        {
          text: 'Não',
          onTap:function(e){
            return false;
          }
        },
        {
          text:'Sim',
          type:'button button-balanced button-block',
          onTap:function(e){
            return true;
          }
        }
      ]
    });

    confirmPopup.then(function(res) {
      if(res) {
        $state.go('app.vistoriaterceiros');
      } else {
        if ($scope.tipoVistoria == VISTORIA_SINISTRO) {
          $state.go('app.sinfimvistoria', {}, {reload: true});
        } else {
          gerarApolice();
        }
      }
    });
  }

  function gerarApolice(){
    WebService.geraApolice(itemId).then(function(success){
      $state.go('app.simfimprevistoria', {apolice_id: success.data.apolice.apolice.cd_apolice}, {reload: true});
    }, function(error){
      
    });
  }
})

I was having problems with the meta tag on my index, but even after adding the necessary info to it i keep having problems, heres how im using it

    <meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' 'unsafe-eval' *;img-src 'self' data: *;">

When i try to load the code i get the following error.

Refused to load the image 'android-webview-video-poster:default_video_poster/6447281984869393931' because it violates the following Content Security Policy directive: "img-src 'self' data: *".

But i already have included the necessary on my meta tag.