Add a React example to the subscriber - how to use event listener with subscriber

[orgar]

Hi,
I want to add to my subscriber event listeners.

1. Video-subscibers - the subscriber works, but I can't find a way to listen to the events.
2. Video-subscriber - I can see the ways to use the listener. I failed to subscribe, firstUpdate first eun is with an empty stream and it is not subscribed due to it.

How can I activate the subscriber with react

[conshus]

Hi @orgar

I want to add to my subscriber event listeners.

Are you referring to < video-subscriber >? What events do you want to listen to? Hmmmm... no one has asked for this before. Just wanted to know when it was subscribed or unsubscribed. Could probably make it to where you can pass in an array with the events you'd like to listen to. How does that sound?

Video-subscribers - the subscriber works, but I can't find a way to listen to the events.

What kind of events are you trying to listen to? < video-subscribers > is intended just to be the place where all the session subscribers show up and leave. There aren't any events to listen for. You could listen for "streamCreated" and "streamDestroyed" on the session to know if a subscriber was added or removed.

I failed to subscribe,

Can you tell us what happened? Make sure that you are listening for a "streamCreated" event.

How can I activate the subscriber with react

Not sure what you mean by activate. Also are you referring to < video-subscribers > or < video-subscriber >?
For < video-subscrbers >, there's nothing to activate. When someone joins the session, they get appended to the "area" automatically.
For < video-subscriber >, I guess to "activate" (add it to the DOM), you'll have to listen for the "streamCreated" on the session and then add the with the properties passed it so it can connect to the session.

[orgar]

I need to subscribe and show the video:
I used opentok-react
<OTPublisher key={'video-audio'} session={session} properties={props} onPublish={onPublish} eventHandlers={publisherEventHandlers} onError={onError} onInit={onInit} />
As you can see I used: onPublish={onPublish} eventHandlers={publisherEventHandlers} onError={onError} onInit={onInit}
and log all the meeting data for my data team.
There are 2 options to replace the OTPublisher:

1. video-subscriber: This run the firstUpdate before the session initiated and due to this the subscribe not happends.
   firstUpdated() { if (this.stream) { this.subscriber = this.session.subscribe(
2. video-subscriber: The video subscriber use update function, it partially works with react and fails in the update due to lit changeProperties. I needed to add subscriber.current.session = null in the teardown of the effect for this to work. I fail to find how do I log all the events.
   Can you send me an example of react that uses: onPublish={onPublish} eventHandlers={publisherEventHandlers} onError={onError} onInit={onInit}?
   Does video-subscriber suits for react? if not, I think video-subscribers should send event with its subscriber(same as the publisher) for using the events.
   Thanks

[conshus]

There are 2 options to replace the OTPublisher

Why couldn't you use < video-publisher > ? That's the closest thing to OTPublisher. Right now, you can listen for published and error events because those were requested. If you want to set Publisher events to listen for, I can add a listeners property that you can pass in an Array of strings of the event names you want to listen for in your application. The Web Component can then dispatch a custom event of the same name with the event details as payload. How's that?

log all the meeting data

Do you mean the Publisher events?

1. video-subscriber: This run the firstUpdate before the session initiated and due to this the subscribe not happens.

Are you placing the < video-subscriber > without having a stream for it?
With opentok-react, you had to wrap OTSubscriber with OTStreams and OTSession, use sessionHelper.streams.map, or directly call OT.initSession and listen to streamCreated events.
Since the Web Components aren't React-specific, you'll have to use the last option of listening to streamCreated events.

The video subscriber use update function, it partially works with react and fails in the update due to lit changeProperties.

Can you be more specific in what you mean by "partially works" and "fails"?

I needed to add subscriber.current.session = null in the teardown of the effect for this to work.

If you are using < video-subscriber >, it's because you want more control over where your subscriber elements show up and behave, so you are then responsible for adding and removing them from the DOM.

I fail to find how do I log all the events.

Currently, for < video-subscriber >, you can listen for error, subscribed and unsubscribed events. If you'd like to add more, we can do the same thing I suggested earlier with the listeners property.

Can you send me an example of react that uses

Do you mean, how do you listen for Web Component events in React? Web Component events work the same regardless of framework/library. You get a reference to the Web Component and then you attach an event listener. Each framework/library may have its own implementations and can sometimes change, so we leave that up to the developer.

Currently, in React, you can do something like:
publisher.current.addEventListener('published', handlePublished);

Does video-subscriber suits for react?

I don't understand what this means? Can you use < video-subscriber > in React? Yes. Does it suit your specific use case? I don't know. So far, you've just asked about listening for specific events which we can add with the listeners property I mentioned before.

if not, I think video-subscribers should send event with its subscriber(same as the publisher) for using the events.

< video-subscribers > is meant to be the easier way of having all subscribers show up in a place without worrying about listening for streamCreated and adding the elements to the DOM. Anything above that, you'll probably want to use < video-subscriber >.

Let me know what you think.