Shaka player custom text displayer

[charTechAccountant]

Have you read the Tutorials?
Yes

Have you read the FAQ and checked for duplicate open issues?
Yes

If the question is related to FairPlay, have you read the tutorial?

NA

What version of Shaka Player are you using?
4.8+

What browser and OS are you using?
Chrome, Android/windows

Please ask your question
I need to add custom texts on shaka player. I think "Class: shaka.text.Cue" or "Configuring text displayer" would help me with this, but I am not a tech person, and I am stuck. Looking for help. I have a fully functional player that plays drm protected video which I have set up. i need to add text elements in it.

Any proper documentations or suggestions would really help

Regards

[avelad]

The default displayers (UITextDisplayer or SimpleTextDisplayer) are not working for you?

[charTechAccountant]

I dont know how to use them

[charTechAccountant]

I am writing js in bubble.io's plugin builder. ChatGpt says I cant use interfaces in bubble.io's plugin builder. I am completely lost.

[avelad]

https://shaka-player-demo.appspot.com/docs/api/tutorial-text-displayer.html

[charTechAccountant]

Yes, i went through this document earlier. Could not make anything out of it. Sorry for sounding dumb, I am a noob.
But I can tell I have exposure in shaka, I implemented drm part completely on my own looking at the same documentation

[charTechAccountant]

In the drm part, I could see clear implementation guidelines. In the text displayer, I can not see anything

[charTechAccountant]

https://shaka-player-demo.appspot.com/docs/api/tutorial-text-displayer.html

Will really really be very nice if I could get some guidance on this sir. I mean no disrespect when I say I am happy to pay if you would charge for this

[tykus160]

Hey @charTechAccountant
Can you elaborate what do you mean by adding custom texts? Do you have subtitles associated with your streams or you want attach something else?

By default shaka will use SimpleTextDisplayer which uses native renderer.
If you set HTML container for the player by player.setVideoContainer() shaka will use UITextDisplayer which uses DOM elements instead.
If both of them are not suitable for your needs for any reason, you'll have to implement TextDisplayer interface and register your implementation by calling:

player.configure({
  textDisplayFactory: () => new MyCustomTextDisplayer(),
});

I agree tutorial you've linked is not that helpful, we'll try to improve it.

[charTechAccountant]

Hey, thank you for your response.
I play videos which are viewable only to subscribers. So, if any subscriber is recording his screen, I want the details of the subscriber to be displayed on the screen when he records.
Recording can be screen recorder, or using another device's camera to record the video screen.
I have collected the details like IP adress, phone number and emails of the users.
I want a way to display it onto the screen when the video loads/plays.

Rn, I can do it by adding normal html elements, but as soon as shaka player enters full screen, these html elements gets hidden.

So, one of the ways I thought I can display info is through text displayers of shaka.

If u can guide me on how to proceed, it will be very helpful

[tykus160]

Personally I'd not use text displayer for that case. Instead I would prepare my custom HTML element with necessary info and lay it over the container. I guess this is what you are trying to achieve, but you're putting wrong element to fullscreen.

Alternatively, you might want to play around with player.addTextTrackAsync() API and create dummy VTT text track with info you need, but that would be hacky.

[avelad]

@tykus160 maybe #7877 ?

[tykus160]

Yeah, that would be cool for this case indeed (assuming @charTechAccountant uses shaka UI)! It's not released yet though, right?

[avelad]

Yeah, that would be cool for this case indeed (assuming @charTechAccountant uses shaka UI)! It's not released yet though, right?

Not yet, maybe this week

[charTechAccountant]

@tykus160 @avelad

Personally I'd not use text displayer for that case. Instead I would prepare my custom HTML element with necessary info and lay it over the container. I guess this is what you are trying to achieve, but you're putting wrong element to fullscreen.

Alternatively, you might want to play around with player.addTextTrackAsync() API and create dummy VTT text track with info you need, but that would be hacky.

I kind of created a text element and displayed user details. It is working fine in normal screen mode. When shaka enters full screen, it disappears from the screen. I tried to play with the zIndex, but it did not help.
Creating a vtt text track will be tricky and lengthy process. Each user would have different credentials, will have to create multiple vtt tracks and store it on cloud(costly), and also, lot of work involved in displaying the items dynamically.-Eg, If I display data only in top right corner, it can be blurred out by the person recording the video. Hence, the data should keep jumping from one place to other on screen every 10-15 seconds, so that we increase the trouble of the video recorded to blur out the details.

I think the case #7877 that was mentioned addresses my issue. If it is in the upcoming version, I will wait for it.
I am currently not using shaka.UI, but I will start using it.

Will update here if I face any issues.

Thank you so much guys!

[avelad]

We have released version 4.13 today with the mentioned change.