JavaScript Cordova Video Upload funktioniert nicht

[Sithys]

BITTE BEITRAG NR. 8 BEACHTEN - Alles was hiernach kommt ist nicht mehr die aktuelle Problemstellung

Moin zusammen,
vorweg: Auch, wenn Euch Cordova bzw. Appprogrammierung im Allgemeinen nichts sagt, bitte nicht gleich weg klicken, es geht um Javascript .
Ich programmiere gerade eine App für iOS und Android mit Cordova und nutze dafür verschiedene Plugins

• VideoCapture Plus (Kamera mit Overlay)
• Cordova Camera
• Cordova File
• Cordova File-Transfer
• Cordova Splashscreen
• Cordova inAppBrowser
• Cordova Statusbar
• jQuery

Jetzt habe ich also die VideoCapture Funktion die aufgerufen wird, wenn ein User die dafür zugehörige Seite öffnet ->

<div data-role="page" id="capture">
    <script>
        $("#capture").on("pageshow" , function() {
         videoCapturePlusDemo(false,false,15);
    });
    </script>

Die beiden "false" stehen je einmal für Highquality und Frontcamera, also es soll Lowquality sein und die hintere Kamera. 15 Entspricht 15Sekunden nach denen das Video automatisch stoppt.

Der nächste Schritt ist jetzt das Video nachdem es aufgenommen wurde anzeigen zu lassen, verkleinert (150x80)

<div id="video_container"></div>

funktioniert auch sehr gut, der "video_container" kommt hierher:

function captureSuccess(mediaFiles) {
  var i, len;
  for (i = 0, len = mediaFiles.length; i < len; i++) {
    var mediaFile = mediaFiles[i];
    mediaFile.getFormatData(getFormatDataSuccess, getFormatDataError);

    var vid = document.createElement('video');
    vid.id = "theVideo";
    vid.width = "120";
    vid.height = "80";
    vid.controls = "controls";
    var source_vid = document.createElement('source');
    source_vid.id = "theSource";
    source_vid.src = mediaFile.fullPath;
    vid.appendChild(source_vid);
    document.getElementById('video_container').innerHTML = '';
    document.getElementById('video_container').appendChild(vid);
    document.getElementById('video_meta_container2').innerHTML = parseInt(mediaFile.size / 1000) + 'KB ' + mediaFile.type;
  }
}

Als nächstes wird ein Knopf gedrückt der das Video dann auf den Server laden soll. Die Funktion "uploadPhoto();" wird also per onclick aufgerufen und sieht so aus:

 function uploadPhoto(mediaURI) {
            alert(mediaFiles);
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=mediaURI.substr(mediaURI.lastIndexOf('/')+1);
            options.mimeType="video/mov";
            alert("lol2");
            options.chunkedMode = false;
    options.headers = {
               Connection: "close"
            };

            var params = {};
            params.fullpath = mediaURI;
            params.name = options.fileName;
            options.params = params;
            alert("lol3");
            var ft = new FileTransfer();
            ft.upload(mediaURI, encodeURI("http://domain.com/upload.php"), win, fail, options);
}

function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
    alert(r.response);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

Also, dass war mein Standardcode. Ich habe versucht aus "vid" eine globale Variable zu machen. Das gleiche hab ich mit dem String "parseInt(mediaFile..." versucht und die Upload-Funktion (mediaURI) entsprechend abgeändert aber nichts hat geholfen, das script zum Laufen zu bekommen. Jedes mal hält das Upload-Script beim ersten alert an (alert (mediaFiles)) und macht nicht weiter.

Ich hoffe, jemand kann mir helfen

 

[John Reese]

Du kannst doch mit LogCat sicher debuggen? Benutzt du Eclipse mit dem ADT Plugin zum Entwickeln?
Wenn ja, dann kannst du auf das Konsolentab gehen und siehst dort Fehlermeldungen.

Cordova müsste dann ja JS-Fehler ausspucken (klingt nämlich nach einem solchen).

 

[Sithys]

Jo Cry und danke erstmal für den Tipp. Ich programmiere aber auf einem Mac in XCode und erstelle mir später aus der iOS Version den Android Ableger. Die Console in XCode spuckt aber leider mal gar nichts aus. Eclipse mit ADT Plugin wäre auch eine gute Idee (Logcat) aber das kann ich erst heute abend teste.

 

[T0a5tbr0t]

Kannst die App einfach per Browser debuggen, denn Cordova ist im Grunde ja ein Browser im Container. Auf iOS mit Safari und auf Android mit Chrome (da aber erst ab Android 4.4 mit dem neuen Chrome WebView). Einfach mal nach remote bebugging für den entsprechenden Browser googlen. Man muss es meistens erst auf den Geräten (bzw. im Emulator) aktivieren, dann kann man die Seite mit den Browser-Entwicklertools untersuchen. Das ist dann fast wie auf einer normalen Website mit richtiger Konsole, JavaScript debugger, HTML Elemente untersuchen etc.
Die Tools sind da heutzutage deutlich besser als noch vor ein paar Jahren.

Edit: Auf Android kann man console.log Kram direkt über Logcat sehen, auf iOS braucht gibt es ein Plugin, damit es in XCode landet: http://plugins.cordova.io/#/package/org.apache.cordova.console
Hab ich aber noch nie verwendet, denn die Browsertools sind deutlich besser.

 

[Sithys]

hey Toasti und danke für den Tipp,
das Problem ist nur, dass der Upload ja erst funktioniert, nachdem ein Video aufgenommen wurde und ... eine Kamera hat mein Monitor leider nicht

Aber gute Idee!

 

[John Reese]

Ich denke nicht, dass er das im Browser einfach so testen kann, da der Video Upload (u.a.) ja über die Cordova JS Bibliothek gelöst wird, die dann Low-Level-Funktionen aufruft (also Schnittstelle JS <=> Betriebssystem [Android, iOS])...

 

[T0a5tbr0t]

Jo, sowas ohne Gerät zu testen ist manchmal schwer. Kannst ja versuchen mal eine Testdatei vom Dateisystem hochzuladen. Wenn das geht, muss der Fehler wohl bei der Aufnahme sitzen.
Spuckt die Konsole nix aus?
Vllt. mal einfach per Debugger Zeile für Zeile durchgehen und gucken ob die API's die richtigen Daten bekommen.
Wenn du in das Dateisystem der Geräte gucken willst: Für Android gibt es den Android Debug Monitor (ist im SDK enthalten). Damit kann man auch Dateien aufs Gerät schieben / runterladen.
Auf iOS kann man irgendwie mit XCode ins Dateisystem, mehr kann ich da spontan nicht sagen

@CryNickSystems
Das geht ganz wunderbar.
In die nativen Teile kann man damit natürlich nicht gucken, aber da liegen auch selten Bugs. Es ist interessanter was man der API an Daten füttert ob das korrekt ist. Und bis zu der "Brücke" auf die native Seite ist ja alles JS.
Das kann vor allem kompliziert werden, da die ganzen Schnittstellen asynchron sind und man schnell mit sehr vielen Callbacks zu kämpfen hat.

 

[Sithys]

Es gibt Neuigkeiten und...die sind wirklich bescheuert, sowas hab ich noch nicht gesehen

Zunächst aktueller Stand:
Plugins ->

• VideoCapture Plus (Kamera mit Overlay)
• Cordova Camera
• Cordova File
• Cordova File-Transfer
• Cordova Splashscreen
• Cordova inAppBrowser
• Cordova Statusbar
• jQuery

Die Videocapturefunktion beim Seitenaufruf ist geblieben ->

<div data-role="page" id="capture">
    <script>
        $("#capture").on("pageshow" , function() {
         videoCapturePlusDemo(false,false,15);
    });
    </script>

Das ist das neue VideoCapture Script und anbei die Upload Funktion ->

var my_vid_path = "";

function captureSuccess(mediaFiles) {
  var i, len;
  for (i = 0, len = mediaFiles.length; i < len; i++) {
    var mediaFile = mediaFiles[i];
    mediaFile.getFormatData(getFormatDataSuccess, getFormatDataError);

    var vid = document.createElement('video');
    vid.id = "theVideo";
    vid.width = "120";
    vid.height = "80";
    vid.controls = "controls";
    var source_vid = document.createElement('source');
    source_vid.id = "theSource";
    source_vid.src = mediaFile.fullPath;
    vid.appendChild(source_vid);
    my_vid_path = source_vid.src;
    document.getElementById('video_container').innerHTML = '';
    document.getElementById('video_container').appendChild(vid);
    document.getElementById('video_meta_container2').innerHTML = parseInt(mediaFile.size / 1000) + 'KB ' + mediaFile.type;
  }
}

function uploadPhoto() {
		alert("test");
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=my_vid_path.substr(my_vid_path.lastIndexOf('/')+1);
        options.mimeType="video/mov";
        
        options.chunkedMode = false;
        options.headers = {
            Connection: "close"
        };
        alert("test2");
        var params = {};
        params.fullpath = my_vid_path;
        params.name = options.fileName;
        options.params = params;
        alert("test3");
        var ft = new FileTransfer();
        alert("test4");
        ft.upload(my_vid_path, encodeURI("http://some.server.com/upload.php"), win, fail, options);
        alert(my_vid_path);
    }
    
    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
        alert(r.response);
    }
    
    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

So und jetzt wirds total bescheuert

Ich komme auf die Seite, nehme das Video auf, welches hinterher im video_container div landet. Ich klicke auf "Senden" und erhalte meine alerts test/1/2/3/4 und my_vid_path - DAS WARS

Jetzt klicke ich das kleine Video an, das mir in meinem video_container div angezeigt wird. Es öffnet sich, spielt sich nicht automatisch ab. Ich klicke 1x (!!!) auf play, das Video startet immer noch nicht ABER: In diesem Moment startet der Upload Prozess nach ca. 5 Sekunden erhalte ich von meiner funktion die r.response zurück, in meinem Fall das Array meiner upload.php. Die Datei ist auf dem Server angekommen und kann von dort aus nun auch abgerufen werden

Ich kapier es nicht, wie geht sowas und... wie kann ich das abändern, dass das Script in eins durch läuft?

 

[T0a5tbr0t]

Klingt wie eine komische Race Condition oder ein geblockter Thread irgendwo im System. Schon mal alle altert's gegen console.log ausgetauscht? altert's blocken den main-thread im Browser solange sie offen sind. Vllt. erzeugt das ein Problem?
Zum debuggen am besten den Code aufteilen und in kleinen Schritten aufrufen, damit man sich an das Problem herantastet.