I want to build a React Native app for iOS and Android (preferably using Expo managed workflow). The app lets the user to use the phone camera to live into their Facebook Live. In addition, I want to have a feature which allows my app user to add some texts (e.g. their company name), some count down timer, some graphics or images (e.g. their company's Logo) onto their live stream in real time. So the audiences of their Facebook Live will see those texts, graphics or images. Something similar to what Switcher Studio (https://www.switcherstudio.com/) has in offer.
I found some articles which explain how to add a layer (on top of the Video stream) and render something on this layer. But, this way the Audiences will not see this effect.
My question is how can I do that?
Here's what I have found:1). I will need NodeMediaClient to encode my the stream from my camera into RTMP (something like this guy has here https://www.syntx.io/react-native/video-live-streaming-with-react-native/).2). Then I can feed this RTMP stream into Facebook Live API. Something similar to this post: https://developers.facebook.com/docs/live-video-api/getting-started.
But, I don't know how can I add any texts, images or graphics onto this Camera stream in real time before encoding it to RTMP.
Please correct me if what I've found is incorrect? and please help me out on how to add texts, images or graphics onto Camera stream in real time.