cycjimmy/jsmpeg-player

I am trying to use it with Angular but always getting error like A.match is not a function. I gave it a div element but still throws error.

Aditya-Ace opened this issue · 3 comments

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Code:
@ViewChild('streamContainer', { static: true, read: ElementRef })
streamContainer: ElementRef;
ngAfterViewInit(): void {
// Setup the WebSocket connection and start the player
const client = new WebSocket('ws://localhost:9999/');
new JSMpeg.VideoElement(this.streamContainer.nativeElement, client);
}
It does not work...

Code:
@ViewChild('streamContainer', { static: true, read: ElementRef })
streamContainer: ElementRef;
ngAfterViewInit(): void {
// Setup the WebSocket connection and start the player
const client = new WebSocket('ws://localhost:9999/');
new JSMpeg.VideoElement(this.streamContainer.nativeElement, client);
}
It does not work...

The second parameter supports a URL. you can directly use the address of WebSocket.

...
- const client = new WebSocket('ws://localhost:9999/');
- new JSMpeg.VideoElement(this.streamContainer.nativeElement, client);
+ const url = 'ws://localhost:9999/';
+ new JSMpeg.VideoElement(this.streamContainer.nativeElement, url);
...

Thank you so much for your response:
Now I am trying the process in a lil different way:

iPstreaming = () => {
const url = environment.webSocketApi;
new JSMpeg.VideoElement(this.canvas1.nativeElement, url);
// const player = new jsmpeg(client, {
// canvas: this.canvas1.nativeElement,
// autoplay: true,
// loop: true,
// });
const stream = this.canvas1.nativeElement.captureStream(30);
this.ipVideoElement.nativeElement.srcObject = stream;
this.window.nativeWindow.stream = stream;
this.startIPCamRecordingBtn.nativeElement.removeAttribute('disabled');
};

the frame keeps on loading, no visuals