Uploading video


#1

Is there a way to upload video files to a server in nativescript? For anything related to uploads in nativescript, I’m usually directed to the nativescript-background-http plugin (https://www.npmjs.com/package/nativescript-background-http), but it only has examples for images. I’m not even sure if it supports video. None of the code I adapt from the examples for video work either.

Am I missing something here, or is there just no good way to do this yet? Is there a different way to do it without using this particular plugin? Also, I made a stack overflow about the issue in case anyone wanted more details about my specific struggle with this: (http://stackoverflow.com/questions/42013187/how-do-you-upload-a-video-to-a-node-js-server-in-nativescript).


#2

@bradwaynemartin I would assume your video plugin would work? Can you weigh in? :slight_smile:


#3

The video player only handles playing video files. I’ve not tried uploading a video file in any way with nativescript yet. Sounds like something fun to work on. Might have to try it out


#4

I would imagine you could use the file system to manage it. I do a lot of file uploading using Firebase, so that for sure works well. It even gives you a series of pings of percentage complete as the upload is occurring.


#5

I am using the nativescript-videorecorder plugin to record my video and that works great. The problem I run into being able to upload it to my server (or any server really). The request doesn’t even get sent out to the server.


#6

I really want to make a demo doing this and dig in. I might have time late next week, if you’re still stuck ping me on here so I can remember to try something out :thumbsup:


#7

Any help you could give us would be amazing! We’ve been stuck on this problem for over a week and we’ve tried a bunch of things, but haven’t been able to figure out how to upload videos from our Nativescript App to an S3 Bucket on Amazon Web Services. Any help you could give us in pointing us in the right direction, would be amazing. Thanks!


#8

Does anyone have a somewhat working sample of what they’ve tried so I can avoid the setup of an app to try something :smile: Of course remove any private info and give me the important stuff and I’ll take a quick try at this soon. Curious to see what everyone is trying.


#9

I made a public git repository that has a very simple app with the stuff I’ve been trying to get working. Feel free to clone it and mess around. This particular setup gives me issues with crypto. If you uncomment all the AWS stuff in upload-view-model.js, you’ll see the error. The other code on stackoverflow (mentioned in my first comment) tries to use the nativescript-background-http plugin to no avail. Anything you could figure out would be immensely helpful. It doesn’t matter to me whether it goes directly to S3 or whether it gets routed to another server that handles the upload on the backend. It just needs to get the video somewhere.

https://kitsune7@bitbucket.org/kitsune7/nativescript-video-upload.git


#10

Awesome, I’ll try to clone this soon and tinker with it. Hopefully can figure out something to get the video uploaded :thumbsup:


#11

@kitsune - Reviewed your code the other night. Couldn’t get an error to throw in the readSync() like you experienced.

I have also uploaded a video to my server running a C# Web Api using FormData.

import { VideoRecorder } from 'nativescript-videorecorder';
import {  knownFolders } from 'file-system';
import * as http from 'http';

   public onTap() {
        let opts = {
            saveToGallery: true, // default false | optional
            duration: 30, // (seconds) default no limit | optional
            size: 10, // (MB) default none | optional #android
            hd: true, // default  false low res | optional
            explanation: "Why do i need this permission" // optional on api 23 #android
        };
        this._videoRecorder.record(opts).then((result) => {

            let videoFile = knownFolders.documents().getFile(result.file);

            let formdata: FormData = new FormData();
            formdata.append("file0", videoFile);

            http.request({
                url: "https://api.testing.com/api/whatever/uploadfiles",
                method: "POST",
                content: formdata
            }).then((response) => {
                console.log(response.content.toString());
            }, (err) => {
                console.log(err);
            });
        }, (err) => {
            console.log(err);
        });
    }

cc @balexr


#12

Is there something special you have to do server-side? When I send out my request the way you did, it sends without an error, but it only sends the text “file0: [object Object]”.

When I expand the object to look at before I send it I get this:

{
    "_path": "/data/user/0/org.nativescript.Lifey/files/storage/emulated/0/Movies/videoCapture_1488407193128.mp4",
    "_name": "videoCapture_1488407193128.mp4",
    "_extension": ".mp4"
}

#13

I can look into the server side a bit more but with a C# dotnet Api - I use this approach on web projects with uploading images by passing the file in FormData(). On the Api, I use the FormDataCollection class to get the object and it works with images. So I’m assuming this would work with the File being a video from the NS http post.

I can try sending the bytes and let you know how that works later this week possibly.


#14

is there any update ? i also facing same problem.it only sends the text “file0: [object Object]”.


#15

I never had time to circle back around to this. It’s on my to do list but not anytime soon :pensive:


#16

I haven’t gotten anything on this yet either. I had to put the project I was working on aside because of this issue, but I plan on returning to this as soon as I can get some solid info on how to get this thing to work.


#17

Do you have an angular sample to do it, In examples given I didn’t find a way to do it in angular ?


#18

Hi, you should use ‘Content-Type’: ‘application/octet-stream’ in a header of your POST request. Then on the server side you should get data from the stream. In PHP I use

$fileData = file_get_contents(‘php://input’);

In C# you can use StreamReader


#19

Is there a way to compress video file? The generated file is getting very large with plugin nativescript-videorecorder. I need to leave it smaller to send to the server.
Any Idea?
Thanks!!!


#20

Try reducing the quality of video, if you prefer to keep the quality high but still compress there are no ready made plugins available yet.