Angular 8 - Unable to fetch the recorded Video URL from the session storage

Question

I am developing an application where one of the features is to record a video through the webcam. I am using the RecordRTC library for this. Once recorded, I assigned the blob() to the video URL, and I am able to view the video. As I stop the recording, I am storing the video URL in session storage. The problem occurs when I try to go back to the component to view the video. I am getting the data from Session storage using the oninit() function. But this is where I am facing the problem. I am getting the error :5701/[object%20Object]:1 Failed to load resource: the server responded with a status of 404 (Not Found).

This is the logic where I stop the recording:

stopRecording() {
    if (this.recordRTC) {
      this.recordRTC.stopRecording(() => {
        this.isRecording = false;
        this.recordedVideo = this.recordRTC.getBlob();
        const blobUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.recordedVideo));
        const videoUrl = blobUrl;
        const videoName = 'captured_video_' + Date.now();
        const capturedVideoObj: FLOW.VideoData = {
          name: videoName,
          url: videoUrl
        };

        // Run change detection explicitly
        this.cdr.detectChanges();

        this.subprocessList.forEach(element => {
          if (element.id == this.data.id) {
            element.media.video.push(capturedVideoObj);
          }
          this.capturedVideos = element.media.video;
          this.count = this.capturedVideos.length;
        });
        // this.processData.subprocess = this.subprocessList;
        AppSharedFunction.setsessionStorageItem(GlobalConstant.processFlow, JSON.stringify(this.processData));
      })
    }
  }

This is how I am showing the video in HTML

 <video class="gallery-video" *ngFor="let video of capturedVideos"
  #recordedVideo controls [src]="video.url"></video>

and this is the oninit logic where I am getting the data from session storage

ngOnInit() {
    this.getDataFromSessionStorage();

    if (this.subprocessList.length > 0) {
      this.subprocessList.forEach(ele => {
        if (ele.id == this.data.id) {
          this.capturedVideos = ele.media.video;          
          }
        })
      })
    }

I am guessing it has something to do with sanitization. I can't really figure out what.

This is the data I am retrieving from the session storage

GetDataFromSessionStorage() {
    var datafromSessionStorage = JSON.parse(AppSharedFunction.getItemFromsessionStorage(GlobalConstant.processFlow));
    if (datafromSessionStorage != null || datafromSessionStorage != undefined) {
      return datafromSessionStorage;
    }
  }

//process data object
{
    "id": "PR03",
    "name": "Process Three",
    "description": "Process Three description",
    "subprocess": [
        {
            "id": "PR03SP1",
            "name": "",
            "description": "",
            "predecessor": [],
            "successor": [],
            "media": {
                "audio": [],
                "video": [],
                "image": []
            }
        }
    ]
}