1

I have build a uploading Video process in my ionic 5 Angular 12 project. The process works fine, the video is uploading and show a corrupted video file as in the photo i attached.

I want to make a preview of the video that the user has uploaded, but the video url seems to be broker and doesn't show the file as i've shown the attached screenshot.

enter image description here

here is my code

html BUTTON TO START THE UPLADING <ion-fab-button color="danger" (click)="chooseVideo()"

 HTML5 VIDEO TAG TO SHOW THE UPLOADED VIDEO
<video webkit-playsinline="true" playsinline="true" class="cover-video" controls id="video" (click)="toggleVideo()" 
    webkit-playsinline #videoPlayer preload="auto">
        <source [src]="video_url" [type]="'video/webm'" *ngIf="checkExtension(video_url,'webm')">
        <source [src]="video_url" [type]="'video/mp4'"  *ngIf="checkExtension(video_url,'mp4')">
        <source [src]="video_url" [type]="'video/ogg'"  *ngIf="checkExtension(video_url,'ogg')">
    </video>

.ts

video_url: string = '';

async chooseVideo() {
    const actionSheet = await this.actionSheetCtrl.create({
        header: this.translation.select_video_source,
        cssClass: 'actionSheetButton',
        buttons: [
            {
                text: this.translation.Use_Camera,
                cssClass: 'uploadVideoButton',
                handler: () => {
                    this.captureVideo();
                }
            },
            {
                text: this.translation.Cancel,
                role: 'cancel'
            }
        ]
    });
    actionSheet.present();
}

checkExtension(file: string, type: string) {
    return this.userData.getFileExtension(file) === type;
  }

FUNCTION TO CAPTURE VIDEO FROM CAMERA

captureVideo() {
    const options: CaptureVideoOptions = {
        limit: 1,
        duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
        let capturedFile = res[0];
        this.video_url = capturedFile.fullPath;
    }, (err: CaptureError) => console.error(err));

}

function to play video_url

playVideo() {
    let options: StreamingVideoOptions = {
        successCallback: () => { },
        errorCallback: (e) => { console.log('Error streaming') },
        orientation: 'landscape'
    };
    this.streamingMedia.playVideo(this.video_url, options);
}

Problem:

Is it possible I am doing something wrong with path? Shouldn't video_url show the video file?

This is the error I am getting after console.log(res[0]) :

Not allowed to load local resource: file:///storage/emulated/0/DCIM/Camera/VID_20221205_130100.mp4

Other useful log details :

MediaFile   {
                name: 'VID_20221205_130100.mp4', 
                localURL: 'cdvfile://localhost/sdcard/DCIM/Camera/VID_20221205_130100.mp4', 
                type: 'video/mp4', 
                lastModified: null, 
                lastModifiedDate: 1670238065000, 
                …
                
            }
            
            end: 0
            fullPath: "file:///storage/emulated/0/DCIM/Camera/VID_20221205_130100.mp4"
            lastModified: null
            lastModifiedDate: 1670238065000
            localURL: "cdvfile://localhost/sdcard/DCIM/Camera/VID_20221205_130100.mp4"
            name: "VID_20221205_130100.mp4"
            size: 7316613
            start: 0
            type: "video/mp4"
            
            [[Prototype]]: File
            app/tablinks/upload:1

Thanks

VC.One
  • 14,790
  • 4
  • 25
  • 57
SimonIoa
  • 117
  • 9
  • **(1)** Use `console.log` to check what data type you've got in `res[0]` or even in `res` itself. **(2)** I don't use Angular but for path try `this.video_url = (window.URL || window.webkitURL).createObjectURL( res );` (adjust as needed, maybe it's actually `( res[0] )` to use? In Javascript the **res** part would be an array of video bytes or a user-selected file – VC.One Dec 05 '22 at 07:42
  • PS: See [my JS-based Answer](https://stackoverflow.com/questions/74577040/add-authentication-headers-to-native-video-element/74649975#74649975) but it should give you a starting idea. Let me know the result of point **(1)** from the above comment – VC.One Dec 05 '22 at 07:46
  • Thanjks VC One. I updated to show the error i am getting after console.log(res[0]) – SimonIoa Dec 05 '22 at 11:04
  • **(1)** Can you get away with using : `cdvfile://localhost/sdcard/DCIM/Camera/VID_20221205_130100.mp4` as the video url? **(2)** See if [these Answers](https://stackoverflow.com/q/23784480/2057709) help you to load a local file... **(3)** The problem is you cannot use `file://` with HTML Media Elements. You have to find a way to get the data before it's written as file (while it is inside app memory) and then play it as a "blob" object, if it is already saved then the user must first select the file (thru some file-browser popup) to show they give permission for file access. – VC.One Dec 05 '22 at 16:39
  • No it seems that you cannot use cdvfile://localhost/sdcard/DCIM/Camera/VID_20221205_130100.mp4. Do you have an example of what to use in my case? – SimonIoa Dec 06 '22 at 09:42
  • Try the [File-Transfer plugin](https://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-file-transfer/). See the first example code, it loads a text file from `cdvfile://localhost...etc`. See if it can load your MP4, so do a console log of the array size (`myArray.length`) after loading to confirm you have some bytes. Then you can try my top comment (just replace `res` with your array) – VC.One Dec 09 '22 at 20:03
  • PS: The [download link](https://github.com/apache/cordova-plugin-file-transfer). Even though it says deprecated, try to install it somehow because the newer replacement ([XMLHttpRequest](https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html)) won't load local files. You can even see the HTTP in the name. – VC.One Dec 09 '22 at 20:18

0 Answers0