Ionic convert Video URI to File object for upload to Firebase









up vote
0
down vote

favorite












I want to convert video path URI to file object to Upload to Filebase storage. But after I selected video and call



window.resolveLocalFileSystemURL(...)



it's never alert File and uploadToFirebase() not call. So, I don't know how to do it.



doGetPicture() 

// TODO:
// get picture from camera

const options: CameraOptions =
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
mediaType: this.camera.MediaType.VIDEO,


this.camera.getPicture(options).then((_imagePath) =>
alert('got image path ' + _imagePath);

window.resolveLocalFileSystemURL(_imagePath, function (fileEntry)
fileEntry.file(function (file)
alert('got file! '+file);
console.log('File__++ ', file);
);
);

);




uploadToFirebase(file)

// Create the file metadata
var metadata =
contentType: 'video/mp4'
;

// Upload file and metadata to the object 'videos/test.mp4'
this.fbRef.child('videos/' + file.name).put(file, metadata);




Thank you



PS. I'm using Ionic v.4










share|improve this question

























    up vote
    0
    down vote

    favorite












    I want to convert video path URI to file object to Upload to Filebase storage. But after I selected video and call



    window.resolveLocalFileSystemURL(...)



    it's never alert File and uploadToFirebase() not call. So, I don't know how to do it.



    doGetPicture() 

    // TODO:
    // get picture from camera

    const options: CameraOptions =
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    mediaType: this.camera.MediaType.VIDEO,


    this.camera.getPicture(options).then((_imagePath) =>
    alert('got image path ' + _imagePath);

    window.resolveLocalFileSystemURL(_imagePath, function (fileEntry)
    fileEntry.file(function (file)
    alert('got file! '+file);
    console.log('File__++ ', file);
    );
    );

    );




    uploadToFirebase(file)

    // Create the file metadata
    var metadata =
    contentType: 'video/mp4'
    ;

    // Upload file and metadata to the object 'videos/test.mp4'
    this.fbRef.child('videos/' + file.name).put(file, metadata);




    Thank you



    PS. I'm using Ionic v.4










    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I want to convert video path URI to file object to Upload to Filebase storage. But after I selected video and call



      window.resolveLocalFileSystemURL(...)



      it's never alert File and uploadToFirebase() not call. So, I don't know how to do it.



      doGetPicture() 

      // TODO:
      // get picture from camera

      const options: CameraOptions =
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      mediaType: this.camera.MediaType.VIDEO,


      this.camera.getPicture(options).then((_imagePath) =>
      alert('got image path ' + _imagePath);

      window.resolveLocalFileSystemURL(_imagePath, function (fileEntry)
      fileEntry.file(function (file)
      alert('got file! '+file);
      console.log('File__++ ', file);
      );
      );

      );




      uploadToFirebase(file)

      // Create the file metadata
      var metadata =
      contentType: 'video/mp4'
      ;

      // Upload file and metadata to the object 'videos/test.mp4'
      this.fbRef.child('videos/' + file.name).put(file, metadata);




      Thank you



      PS. I'm using Ionic v.4










      share|improve this question













      I want to convert video path URI to file object to Upload to Filebase storage. But after I selected video and call



      window.resolveLocalFileSystemURL(...)



      it's never alert File and uploadToFirebase() not call. So, I don't know how to do it.



      doGetPicture() 

      // TODO:
      // get picture from camera

      const options: CameraOptions =
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      mediaType: this.camera.MediaType.VIDEO,


      this.camera.getPicture(options).then((_imagePath) =>
      alert('got image path ' + _imagePath);

      window.resolveLocalFileSystemURL(_imagePath, function (fileEntry)
      fileEntry.file(function (file)
      alert('got file! '+file);
      console.log('File__++ ', file);
      );
      );

      );




      uploadToFirebase(file)

      // Create the file metadata
      var metadata =
      contentType: 'video/mp4'
      ;

      // Upload file and metadata to the object 'videos/test.mp4'
      this.fbRef.child('videos/' + file.name).put(file, metadata);




      Thank you



      PS. I'm using Ionic v.4







      typescript firebase ionic-framework ionic3






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 15:17









      Ittiwut Wongsawat

      63




      63






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          You could use ionic-native MediaCapture & File Plugins and record the video like this:



          recordVid() {
          let options: CaptureVideoOptions = limit: 1, duration: 5
          this.mediaCap.captureVideo(options).then((data: MediaFile) =>
          let capturedVid = data[0];
          let localVideoPath = capturedVid.fullpath;
          let directoryPath = localVideoPath.substr(0, localVideoPath.lastIndexOf('/'));
          let fileName = localVideoPath.substr(localVideoPath.lastIndexOf('/') + 1);
          this.file.readAsArrayBuffer(directoryPath, fileName).then((result) =>
          console.log(result);
          let blob = new Blob([result], type: "video/mp4" );
          //then upload the blob to firebase storage
          this.uploadToFirebase(blob);
          );
          //catch errors here and maybe add a function to play video in frontend



          The UploadTask itself is described here:
          Upload Video Blob to firebase






          share|improve this answer




















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240333%2fionic-convert-video-uri-to-file-object-for-upload-to-firebase%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            You could use ionic-native MediaCapture & File Plugins and record the video like this:



            recordVid() {
            let options: CaptureVideoOptions = limit: 1, duration: 5
            this.mediaCap.captureVideo(options).then((data: MediaFile) =>
            let capturedVid = data[0];
            let localVideoPath = capturedVid.fullpath;
            let directoryPath = localVideoPath.substr(0, localVideoPath.lastIndexOf('/'));
            let fileName = localVideoPath.substr(localVideoPath.lastIndexOf('/') + 1);
            this.file.readAsArrayBuffer(directoryPath, fileName).then((result) =>
            console.log(result);
            let blob = new Blob([result], type: "video/mp4" );
            //then upload the blob to firebase storage
            this.uploadToFirebase(blob);
            );
            //catch errors here and maybe add a function to play video in frontend



            The UploadTask itself is described here:
            Upload Video Blob to firebase






            share|improve this answer
























              up vote
              0
              down vote













              You could use ionic-native MediaCapture & File Plugins and record the video like this:



              recordVid() {
              let options: CaptureVideoOptions = limit: 1, duration: 5
              this.mediaCap.captureVideo(options).then((data: MediaFile) =>
              let capturedVid = data[0];
              let localVideoPath = capturedVid.fullpath;
              let directoryPath = localVideoPath.substr(0, localVideoPath.lastIndexOf('/'));
              let fileName = localVideoPath.substr(localVideoPath.lastIndexOf('/') + 1);
              this.file.readAsArrayBuffer(directoryPath, fileName).then((result) =>
              console.log(result);
              let blob = new Blob([result], type: "video/mp4" );
              //then upload the blob to firebase storage
              this.uploadToFirebase(blob);
              );
              //catch errors here and maybe add a function to play video in frontend



              The UploadTask itself is described here:
              Upload Video Blob to firebase






              share|improve this answer






















                up vote
                0
                down vote










                up vote
                0
                down vote









                You could use ionic-native MediaCapture & File Plugins and record the video like this:



                recordVid() {
                let options: CaptureVideoOptions = limit: 1, duration: 5
                this.mediaCap.captureVideo(options).then((data: MediaFile) =>
                let capturedVid = data[0];
                let localVideoPath = capturedVid.fullpath;
                let directoryPath = localVideoPath.substr(0, localVideoPath.lastIndexOf('/'));
                let fileName = localVideoPath.substr(localVideoPath.lastIndexOf('/') + 1);
                this.file.readAsArrayBuffer(directoryPath, fileName).then((result) =>
                console.log(result);
                let blob = new Blob([result], type: "video/mp4" );
                //then upload the blob to firebase storage
                this.uploadToFirebase(blob);
                );
                //catch errors here and maybe add a function to play video in frontend



                The UploadTask itself is described here:
                Upload Video Blob to firebase






                share|improve this answer












                You could use ionic-native MediaCapture & File Plugins and record the video like this:



                recordVid() {
                let options: CaptureVideoOptions = limit: 1, duration: 5
                this.mediaCap.captureVideo(options).then((data: MediaFile) =>
                let capturedVid = data[0];
                let localVideoPath = capturedVid.fullpath;
                let directoryPath = localVideoPath.substr(0, localVideoPath.lastIndexOf('/'));
                let fileName = localVideoPath.substr(localVideoPath.lastIndexOf('/') + 1);
                this.file.readAsArrayBuffer(directoryPath, fileName).then((result) =>
                console.log(result);
                let blob = new Blob([result], type: "video/mp4" );
                //then upload the blob to firebase storage
                this.uploadToFirebase(blob);
                );
                //catch errors here and maybe add a function to play video in frontend



                The UploadTask itself is described here:
                Upload Video Blob to firebase







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 26 at 15:44









                Mind R

                13




                13



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240333%2fionic-convert-video-uri-to-file-object-for-upload-to-firebase%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                    Syphilis

                    Darth Vader #20