How to show closed captions in JITSI MEET UI

Hi guys,

I have piped in my own speech to text and have the live data available in conference.js. How do I pass this data down and show it in the UI for jitsi meet. I’ve ben looking through the code and I see a UI.js file where I think I need to first pass the data to and then somehow send it to the user interface but I don’t know how or where I should write code to do this.

Any guidance would be really helpful!

Edit: I found the file where I want the captions to show up. Its in the Filmstrip.js file. Now the question is how do I get the data from conference.js to this file and then show it in the UI??

Here are where captions are received from jigasi: https://github.com/jitsi/jitsi-meet/blob/master/react/features/subtitles/middleware.js#L53
They are received as json xmpp messages.
If you can construct same json message and wire them like this: https://github.com/jitsi/jitsi-meet/blob/master/conference.js#L2123

<message from='damencho@conference.mydomain/43356927'
         to='f6ac171a-3c28-488f-a134-63317cc045a8@mydomain/u59OvcDz'
         xmlns='jabber:client' type='groupchat' id='A6BVq-17637921'>
    <json-message xmlns='http://jitsi.org/jitmeet'>{&quot;transcript&quot;:[{&quot;confidence&quot;:0.8293744921684265,&quot;text&quot;:&quot;1  2 3 4 5&quot;}],&quot;is_interim&quot;:false,&quot;language&quot;:&quot;en-US&quot;,&quot;message_id&quot;:&quot;741e4775-ace3-41ab-a09b-611800a58843&quot;,&quot;event&quot;:&quot;SPEECH&quot;,&quot;type&quot;:&quot;transcription-result&quot;,&quot;participant&quot;:{&quot;id&quot;:&quot;f6ac171a&quot;},&quot;stability&quot;:0,&quot;timestamp&quot;:&quot;2020-04-27T03:51:37.070Z&quot;}
    </json-message>
    <x xmlns='jabber:x:event'>
        <offline/>
        <composing/>
    </x>
</message>

So the json should be like:

{
    "transcript": [
        {
            "confidence": 0.8293744921684265,
            "text": "1 2 3 4 5"
        }
    ],
    "is_interim": false,
    "language": "en-US",
    "message_id": "741e4775-ace3-41ab-a09b-611800a58843",
    "event": "SPEECH",
    "type": "transcription-result",
    "participant": {
        "id": "f6ac171a"
    },
    "stability": 0,
    "timestamp": "2020-04-27T03:51:37.070Z"
}

@damencho thanks for your reply but I don’t think I need to do all the stuff you said.

I am getting the raw string data of the captions in my conference.js file. I want to send this string caption data to my user interface (specifically to my Filmstrip component in the front end). Basically, how can I pass data from conference.cs file, to Filmstrip.js file. What are the steps to get data from this conference.js file to filmstrip.js file?

In normal react, this data would be passed down as a prop in the component. Where is the Filmstrip component being called, I think I’ll have to send the data there and then pass it down as a prop or something…any tips here would help!