Video Upload App --- Desperate HELP NEEDED!

myk410 · April 4, 2016, 5:23am

 I am relatively new at all of this so please bear with me...  For the last two weeks I have been spending up to 15 hours a day trying to develop an app that allows users to take video with their phone and upload it to my private server.  I am working on a macbook pro.  I am using ionic and cordova plugins as well as xcode and have already signed up with apple to be a developer.  

I have already designed the app and have it running on my iPhone.  It has two buttons: one is to capture video and the other is to access the devices video album.  After the video is captured or selected I would like a dialogue to pop up with the option to upload the video to my home server.  The functionality is what I am really struggling with.  I have installed cordova media capture, plugin file, file transfer, white list, geolocation, and a bunch of others just to cover my bases.  I would like the file that is uploaded to have a unique name with the date, time, and location the video was taken (not uploaded) attached if at all possible-or maybe have that information linked to a separate text doc that is generated for each clip.  All I have got to partially work is the video capture button which only opens the camera and records a video.  However after i click "use video” I just go back to the home screen and I have no idea what happens to the video.  I want it to also save the video to the camera roll, but that doesn’t even happen.  I have yet to tackle the other button to access the album.  I’m sure that will be an entirely new set of head aches.

Right now where I am most lost and frustrated is how to upload. This is where I need the most guidance and if you need to pick what to help me with I hope you choose the following dilemma. I have set up an OS X Server on a mac pro. I have purchased a domain name and am using dyn.com to convert my dynamic ip to a static one that i have linked to my domain.

I am barely grasping the understanding of all I am doing as I am learning most everything about coding and networking all at once and all on my own.  Even if I am writing the correct javascript to enable the app to upload the file I have no idea where it’s going wrong.  I don’t even know the proper address to send it to.  Can I use the domain name I have forwarding to dyn?  Do I need the numerical ip address to dyn?  Do I use ftp as a prefix or http or what?  How do I make this access anonymous and not have to somehow add a username and password into the code?… 

I tried testing it with a godaddy server.  No luck.  I created a webpage and somehow, I once was able to use it, through a php file, to upload a picture that was sent to the godaddy server.  I have not been able to do it again.  The directories all have 0777 permissions.

I’m sorry if I’m coming off as very ignorant to all of this and seem to have ridiculously high ambitions along with that.  I am probably your worste nightmare, but I really need help right now as I have been teaching myself everything.  And I am extremely determined to get this to work!  If I had the money I would pay someone to help me.  I’m really hoping someone out there can give me at least a limited understanding to help me figure the rest out.

I will provide the code for the app bellow.  The link in my app.js (which I blotted out for forum’s sake) was my attempt to try and upload the file to my godaddy server.  I have no idea if it was correct at all.  In that directory (to access by the www web address or as it appears on cPanel: ”/home/username/public_html/…/” I have no idea if or how i would even begin to use that) is also the php file I was using before with the website I created to test with, which is as follows:

<?php $target_dir = "http://www...com/…/“; move_uploaded_file($_FILES["file"]["tmp_name"], "$target_dir"); ?>

Here is the rest of my code so far for the app:

index. html

Video Upload

<link href="css/ionic.app.css" rel="stylesheet">
--&gt;

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

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

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

    <ion-footer-bar class="bar-stable">
      
      <div class="row">
      
          <div class="col"><div class="buttons">
          
         <!-- FOR ANDROID
          <button id="takeVideo" class="button icon icon-top ion-videocamera">Record</button> -->
    <button id="takeVideo" class="button button-icon">
                        <i class="icon ion-ios-videocam"></i> 
                        <span>Record</span></button>

          </div></div>
          
          <div class="col"></div>
          
          <div class="col"><div align="right" class="buttons" ng-click="doSomething()">
          
          <!-- FOR ANDROID
          <button id="rightButton" class="button icon icon-top ion-android-film">Album</button>
          -->

Album

          </div></div>
          
      </div>
      
      
  </ion-footer-bar>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires’
var app = angular.module(‘starter’, [‘ionic’, ‘ngCordova’])

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {

  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})

document.addEventListener(“deviceready”, init, false);
function init() {

document.querySelector("#takeVideo").addEventListener("touchend", function() {
    console.log("Take video");
    navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 600, saveToPhotoAlbum: true,});
}, true);

}

function captureError(e) {
console.log("capture error: "+JSON.stringify(e));
}

function captureSuccess(s) {
console.log(“Success”);
console.dir(s[0]);
var v = “”;
v += “”;
v += “”;
document.querySelector("#videoArea").innerHTML = v;
{upload();};
example.controller(“ExampleController”, function($scope, $cordovaFileTransfer) {

$scope.upload = function() {
    var options = {
        fileKey: "avatar",
        fileName: "filename.mp4",
        chunkedMode: false,
        mimeType: "video/mp4"
    };
    $cordovaFileTransfer.upload("http://www...com/…”, "file:/storage/....mp4", options).then(function(result) {
        console.log("SUCCESS: " + JSON.stringify(result.response));
    }, function(err) {
        console.log("ERROR: " + JSON.stringify(err));
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
    }, function (progress) {
        // constant progress updates
    });
}

});
}

——————————————————————————————————————

Please help me! I am in deep over my head…

myk410 · April 9, 2016, 12:45am

So far I’ve got the button working that records a video and sends it to my server. The 2 problems I’m having now are I can’t access the Album yet and the video that records doesn’t save to the device.

Here’s my code:

github.com

myk410/Enue_Upload/blob/master/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"
    name="viewport">
    <meta content=
    "default-src *; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *; style-src &apos;self&apos; &apos;unsafe-inline&apos; *"
    http-equiv="Content-Security-Policy">
    <title>Enue Upload</title>
    <link href="css/ionic.app.css" rel="stylesheet">
    --&gt; 
    
    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <!-- cordova script (this will be a 404 during development) -->
     <!--<script src="js/ng-cordova.min.js"></script>-->
    <script src="js/ng-cordova.min.js"> </script> 
    <script src="cordova.js"></script> 
    <!-- your app's js -->

This file has been truncated. show original

github.com

myk410/Enue_Upload/blob/master/app.js

// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova']).run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
		// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
		// for form inputs)
		if (window.cordova && window.cordova.plugins.Keyboard) {
			cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
			// Don't remove this line unless you know what you are doing. It stops the viewport
			// from snapping when text inputs are focused. Ionic handles this internally for
			// a much nicer keyboard experience.
			cordova.plugins.Keyboard.disableScroll(true);
		}
	});
})
document.addEventListener("deviceready", init, false);

function init() {

This file has been truncated. show original