Capture and share video with Ionic

@anon_developer wrote:

Theoretically I want to then use the video to share the video to different social media sites such as youtube. My issue is that with the code provided I'm able to capture the video but it doesn't show the thumbnail or preview. Once I figure that out I'll be better equipped to share.

I'm using this tutorial to capture video. https://devdactic.com/capture-and-store-videos-ionic/
Plugin: cordova plugin add cordova-plugin-photokandy-video-thumbnail --save

Here's my code:

Video.html

<ion-view name="video" view-title="Record Video">
  <ion-content class="padding center-hor" style="background:#f2f2f2;">
  <div class="list">
	  <div class="item item-divider">
	 <i class="ion-videocamera"></i>
	 My Video Clips
	  </div>
	  </br></br>
	<img ng-src="{{urlForClipThumb(clip)}}" ng-click="showClip(clip)" style="height:250px; width: 150px;"/>
        </div></br></br>
	<div class="button-bar">
	<button class="button button-assertive button-large" ng-click="captureVideo()">
	Capture a video
	</button>
	</div>
   </ion-content>
 </ion-view>

Controller.js

.controller('VideoCtrl', function($scope, $cordovaCapture, VideoService) {
		 $scope.clip = '';
	 $scope.urlForClipThumb = function(clipUrl) {
		var name = clipUrl.substr(clipUrl.lastIndexOf('/') + 1);
		var trueOrigin = cordova.file.dataDirectory + name;
		var sliced = trueOrigin.slice(0, -4);
		return sliced + '.png';
	}

	$scope.showClip = function(clip) {
		console.log('show clip: ' + clip);
	}
	$scope.captureVideo = function() {

	$cordovaCapture.captureVideo().then(function(videoData) {
			VideoService.saveVideo(videoData).success(function(data) {
				$scope.clip = data;
				$scope.$apply();
			}).error(function(data) {
				console.log('ERROR: ' + data);
			});
		});
	   };
	})

Services.js

.service('VideoService', function($q) {
	 // Resolve the URL to the local file
	// Start the copy process
	function createFileEntry(fileURI) {
		window.resolveLocalFileSystemURL(fileURI, function(entry) {
			return copyFile(entry);
		}, fail);
	}

	// Create a unique name for the videofile
	// Copy the recorded video to the app dir
	function copyFile(fileEntry) {
		var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
		var newName = makeid() + name;

		window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
				fileEntry.copyTo(fileSystem2, newName, function(succ) {
					return onCopySuccess(succ);
				}, fail);
			},
			fail
		);
	}

	// Called on successful copy process
	// Creates a thumbnail from the movie
	// The name is the moviename but with .png instead of .mov
	function onCopySuccess(entry) {
		var name = entry.nativeURL.slice(0, -4);
		window.PKVideoThumbnail.createThumbnail (entry.nativeURL, name + '.png', function(prevSucc) {
			return prevImageSuccess(prevSucc);
		}, fail);
	}

	// Called on thumbnail creation success
	// Generates the currect URL to the local moviefile
	// Finally resolves the promies and returns the name
	function prevImageSuccess(succ) {
		var correctUrl = succ.slice(0, -4);
		correctUrl += '.MOV';
		deferred.resolve(correctUrl);
	}

	// Called when anything fails
	// Rejects the promise with an Error
	function fail(error) {
		console.log('FAIL: ' + error.code);
		deferred.reject('ERROR');
	}

	// Function to make a unique filename
	function makeid() {
		var text = '';
		var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		for ( var i=0; i < 5; i++ ) {
			text += possible.charAt(Math.floor(Math.random() * possible.length));
		}
		return text;
	}

	// The object and functions returned from the Service
	return {
		// This is the initial function we call from our controller
		// Gets the videoData and calls the first service function
		// with the local URL of the video and returns the promise
		saveVideo: function(data) {
			createFileEntry(data[0].localURL);
			return promise;
		}
	}




	 var deferred = $q.defer();
	var promise = deferred.promise;

	promise.success = function(fn) {
		promise.then(fn);
		return promise;
	}
	promise.error = function(fn) {
		promise.then(null, fn);
		return promise;
	}
 });

Thanks.

Posts: 1

Participants: 1

Read full topic