Cannot subscribe to event listener on filter

Issues developing apps
1

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(filterEvent.data);
		 });
		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', () => {
			(<HTMLElement>publisher.videos[0].video).parentElement.classList.remove('custom-class');
		});
		//publisher.stream.applyFilter("YoloModule", {}).then(filter=> { filter.addEventListener("StageDetected", FilterEvent => {this.log.d(FilterEvent.data)})}) 
		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?

2

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

3

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);
publisher.stream.applyFilter(...... );
1 Like
4

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 publisher.stream.applyFilter("YoloModule",{})).addEventListener("StageDetected", (FilterEvent) => {
					this.log.d(FilterEvent.data);
				}); 
				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

5

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

in openvidu-webrtc.services.ts → 

 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() {
		if(this.yoloEnabled)
			this.openViduWebRTCService.getPublisher().stream.applyFilter("YoloModule", {}); 
        if(!this.yoloEnabled)
			this.openViduWebRTCService.getPublisher().stream.removeFilter(); //how to get streams need to figure out how to get streams from publish
	
		if (this.localUsersService.isWebCamEnabled()) {
			this.openViduWebRTCService.publishWebcamAudio(!this.localUsersService.hasWebcamAudioActive());
			this.log.e("Toggled Mic");
			this.yoloEnabled =!this.yoloEnabled; 
			//this.openViduWebRTCService.getWebcamSess().siontreamManagers[0].stream
			return;
		}
this.openViduWebRTCService.publishScreenAudio(!this.localUsersService.hasScreenAudioActive());
	}