Scorm Content showing Error initializing communications with LMS

Question

`I use 'scorm-again' javascript library in my angular 16 application to display SCORM content. SCORM API initialized successfully then I am getting an error: DisplayError, strMessage=Error initializing communications with LMS. My LMS running in localhost. always SCORM content showing in a popup window. but I am using and it should display in a parent template. rather then popup window.

// scorm.component.ts

import { Component, OnInit } from '@angular/core';
declare var Scorm12API;

declare global {
  interface Window {
    API: typeof Scorm12API; 
  }
}

@Component({
  selector: 'app-scorm-again-player',
  templateUrl: './scorm-again-player.component.html',
  styleUrls: ['./scorm-again-player.component.scss']
})
export class ScormAgainPlayerComponent implements OnInit {
  externalUrl:string = "assets/scorm/dummy_scorm/dummy_scorm/scormdriver/indexAPI.html";  

  constructor() {}

  ngOnInit() {
    const settings={commitUrl:'http://localhost:4200'}
    
    window.API = new Scorm12API(settings);
    window.API.LMSInitialize();
  }

}

// scorm.component.html

<iframe [src]="externalUrl | safe" height="600" width="1000" title="" id="scormIframe"></iframe>

SCORM API initialized successfully and it's showing error to play SCORM content.

enter image description here`