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.