Cannot subscribe to event listener on filter

I have the following code taken from the angular example with a bit of modification :

initPublisher(targetElement: string | HTMLElement, properties: PublisherProperties): Publisher {
		let filters = new Filter( "YoloModule",  {}); 
		let p = filters.addEventListener('StageDetected', (filterEvent) =>{
		this.log.d("Stage Detected:" + p);
		//let filters = new Filter("GStreamerFilter",  {"command": "videoflip method=vertical-flip"}); 
		p.then(()=> {this.log.d("stage detected is initialised")})
		properties = { publishAudio: false, filter : filters
		this.log.d('Initializing publisher with properties: ', properties);
		const publisher = this.OV.initPublisher(targetElement, properties);
		publisher.subscribeToRemote(true); //returns the filtered image to the caller client
		// this.localUsersSrv.setWebcamPublisher(publisher);
		publisher.once('streamPlaying', () => {
		//"YoloModule", {}).then(filter=> { filter.addEventListener("StageDetected", FilterEvent => {this.log.d(})}) 
		return publisher;

I cannot however see the data coming from the filter at all and the browser side says:

“filter”:{“handlers”:{},“type”:“YoloModule”,“options”:{}}," Is there meant to be a handler initialised if everything is working as intended?

I am getting the following error: [OpenViduWebRTCService] The reason is TypeError: is undefined on adding the event listener.

Filters may only be applied after the Publisher object has been successfully published to the Session.
Filters are applied at the server-side. You must call Session.publish(publisher) and wait for the operation to successfully complete before calling the applyFilter method over its Stream.

await session.publish(publisher); );
1 Like

I know this probably isn’t ideal at all but I’ve tried the following:
in openvidu-webrtc.service.ts

	if (this.webcamSession?.capabilities?.publish) {
			const publisher = this.localUsersSrv.getWebcamPublisher();
			if (!!publisher) {
				let pub = await this.webcamSession.publish(publisher);
				(await"YoloModule",{})).addEventListener("StageDetected", (FilterEvent) => {
				return pub;

and that works! I’m working on the angular app( I’m going to be honest here I’m not all that familiar with typescript + angular) say I wanted to add a button to the UI that enabled and disabled this filter and maybe its events as well, how would I then get access to the publisher object in the context of room-config.components.ts

Just in case this helps anyone else out in the future:

in →

 getPublisher(): Publisher{
		const publisher = this.localUsersSrv.getWebcamPublisher();
		return publisher; 

I did this on toggle mic just as a quick and dirty test:
in video-room.component.ts →

toggleMic() {
			this.openViduWebRTCService.getPublisher().stream.applyFilter("YoloModule", {}); 
			this.openViduWebRTCService.getPublisher().stream.removeFilter(); //how to get streams need to figure out how to get streams from publish
		if (this.localUsersService.isWebCamEnabled()) {
			this.log.e("Toggled Mic");
			this.yoloEnabled =!this.yoloEnabled;