Has anyone integrated Agora.io video chat into Web Core.

WEB TMS WEB Core
1

Has anyone integrated Agora.io video chat into Web Core. I have been attempting to do just that but cannot get the live video to play in any of the Web Core components such as a TWebPanel. The connections work to the back end, but the video will not display even though I specify an element ID of the Web Core component. I can get it to work in a TWebBrowser component using only javascript, html but I would like it better integrated into the application.

2

I had a quick peek. Bit of trouble tracking down what exactly would work with TMS WEB Core, but eventually landed on this page: https://agorawebsdktutorialenusmain.gtsb.io/

Is this what you're working with? Or something else? There are many different SDKs and versions, it would be helpful to know where you're starting from? There's likely to be a fair bit of JavaScript work, regardless of your approach, given the nature of how their Web API/SDK is delivered.

3

Andrew,
Thanks for the quick response. I am using this sample code that I found as a starting point. https://codeload.github.com/divanov11/group-video-chat/zip/refs/heads/master
Basically, I created the function in pascal and they contain the javascript encapsulated by asm blocks. It works except for getting the live video to display in a web core component. Tried a few different things. Something like this.
// part of form class
FVideoClient: TJSObject;
FLocalTracks: TJSArray;
FRemoteUsers: TJSArray;

// in on create
asm
this.FVideoClient = AgoraRTC.createClient({mode:'rtc', codec:'vp8'});
end;

procedure TChatForm.joinAndDisplayLocalStream;
var
app_id: string;
token: string;
channel: string;
begin

app_id := '89a9241b4f199e6bb5aafca44335deee';
token := '007eJxTYBB7WXLpzLzl78ovnfWYZiJ2IljqHV0MjFMMkkztDRJNUtKMk1MTEtONDExNjZNMbVMEfv5IrkhkJHhyONnTIwMEAjiczIUlxXk5+Vk5qUyMAAAl5IkZQ==';
channel := 'svponline';
{$IFDEF WEBLIB}
asm
this.FVideoClient.on('user-published', this.handleUserJoined);

this.FVideoClient.on('user-left', this.handleUserLeft);

let UID = await this.FVideoClient.join(app_id, channel, token, null);

this.FLocalTracks = await AgoraRTC.createMicrophoneAndCameraTracks();
let player = `<div class="video-container" id="user-container-${UID}">
                    <div class="video-player" id="user-${UID}"></div>
              </div>`

// this.WebPanel2.ElementID = "user-" + UID;
// this.WebPanel2.ElementClassName = "video-player";
// this.DivVideoChat.HTML = '

';
document.getElementById('video-streams').insertAdjacentHTML('beforeend', player)
// element id of WebPanel2 is video-stream
this.FLocalTracks[1].play(user-${UID});

await this.FVideoClient.publish([this.FLocalTracks[0], this.FLocalTracks[1]]);

end;
{$ENDIF}
end;