How to solve variables getting undefined in Ionic when working with loops

@ThaminduDilshan wrote:

I’m developing an ionic app which records a video, divide video into frames and then upload each frame to a server.

Below getDurationandFrame() method extract the video into frames. capturing and framing works fine. Then I want to upload each frame into a server. But before uploading, I want to convert images into Base64 format. Here readFile() function read a given image and returns the base64 string. upload() function sends the given string to the server.

Inside getDurationandFrame() function, I want to do base64 conversion and uploading as stated in the comment. Problem is this ‘res’ (return value) is undefined for next operations. It throws error when splitting. Also anyhow if splitting execute correctly, then base64 variable get undefined for upload() function. How can I solve this issue. I think there may be a synchronous execution problem.

    this.videoEditor.createThumbnail(option).then(res=>{
        console.log('Thumbnail result: ' + (this.thumbnailPath = res));

        // IN HERE I WANT TO CONVERT IMAGE INTO BASE64 AND THEN SEND TO SERVER
        // 'res' VARIABLE CONTAINS IMAGE PATH

    }).catch(err=>{
        console.log("Framing Error", err)
    });

Here are my function definitions.
getDurationandFrames()

    getDurationandFrame() {
        this.isVideoSelected = true;
        this.videoDuration = event.target.duration;
        this.noOfFrames = 0;

          for(var i=0; i<=Number(this.videoDuration); i++) {
    
            var option: CreateThumbnailOptions = {
              fileUri: this.pathToBeFramed,
              outputFileName: 'capture'+i,
              atTime: i,        // frame-rate (1 s)
              // width: 320,
              // height: 480,
              quality: 100
            };
            
            console.log("framing at "+i+"s");
            
            this.videoEditor.createThumbnail(option).then(res=>{
                console.log('Thumbnail result: ' + res);
                this.thumbnailPath = res;
                // example for return value "res" : '/storage/emulated/0/Android/data/io.ionic.starter/files/files/videos/capture0.jpg'
                var arr = res.split('/').pop();   // pop to remove 'capture0.jpg'
                var path = '';
                for(var i=1; i<arr.length; i++) {
                  path = path + '/' + arr[i];
                }
                path = path + '/';
    
                var img_name = 'capture' + i;
                var base64 = this.readFile(path, img_name);
                this.upload(base64, img_name);
            }).catch(err=>{
              console.log("Framing Error", err)
            });
      
            this.noOfFrames += 1;
      
          }
      }

readFile()

    readFile(filepath, filename) {
        this.base64.encodeFile(filepath+'/'+filename+'.jpg').then((base64String: string) => {
          let imageSrc = base64String.split(",");
          console.log("---Splitted image string 1 ----", imageSrc[1]);
          return imageSrc[1];
        });
        
      }

upload()

    upload(image, image_name) {
        let headers = new Headers(
          { 'Content-Type' : 'application/json' }
        );
    
        let data = JSON.stringify(
          {
            client_id: this.client_id,
            image: image,
            image_name: image_name
          }
        );
    
        let options = new RequestOptions({headers: headers});
    
        return new Promise((resolve, reject) => {
          this.http.post('http://32.231.461.84:80/predict', data, options).toPromise().then(
            (res) => {
              console.log('API Response : ', res.json());
              resolve(res.json());
            }
          ).catch(
            (err) => {
              console.log('API Error : ', JSON.stringify(err));
              reject(err.json());
            }
          );
        });
    
      }

Posts: 1

Participants: 1

Read full topic