I’m trying to integrate the VirtualBackground extension on the sample videocall example app in reactjs.
I’m using this tutorial for setting up the basic videocall app:
https://medium.com/agora-io/how-to-build-a-real-time-video-web-app-with-react-11056318ef4d
How do I integrate this example with the virtual background feature?
I already installed the extension and passed the localCameraTrack with
const { localCameraTrack } = useLocalCameraTrack(cameraOn);
instead the agoraContext since I don’t need it for the moment.
I receive no errors and from the logs seems the processors is enabled correctly:
… LiveVideo.tsx:185 20:08:30:24 Agora-Extension [INFO]:
[VirtualBackgroundProcessor-1ef1a3] init LiveVideo.tsx:186
20:08:30:283 Agora-Extension [INFO]:
[VirtualBackgroundProcessor-1ef1a3] onTrack LiveVideo.tsx:187
20:08:30:283 Agora-Extension [INFO]:
[VirtualBackgroundProcessor-1ef1a3] Set options:
{“type”:”color”,”color”:”#00ff00″} LiveVideo.tsx:188 20:08:30:286
Agora-Extension [INFO]: VirtualBackgroundProcessor-1ef1a3 enabled