Requirements

Before getting started, please check the VideoCall Web Requirements section.

Setup VideoCall in your knowledge base

To use video calls in a web environment, create a WebPanel, and then drag and drop the user control from the toolbox:

User control must be configured using the 'Properties grid':

Properties

API Key

The provider application key, that will be passed to the SDK.

It can be set on runtime, but only before the SDK is initialized (start or refresh events)

This property has to be obtained from Sinch portal.

Check Platform for more details.

Call Mode

Define how the user control will behave.

• Call: control only makes calls, it cannot receive calls.
• Answer: control only receives calls.
• Call and Answer: control can place and receive calls.

Is Voice Only

Define whether the user control will support video or voice-only calling.

Disable Built-In Sounds

This property can be used to disable the user control default sounds (the "ring tone" )

Local User

This property is used to define the local user ID, which is used to reference the current user. 

If the user is passed by default, the user control will use "Sinch Auth JS SDK" to authenticate the user. This requires the user to enable the "Auth JS" option in the Sinch dashboard.

To enable local authentication, which is the recommended option, the user must first create a token using the local user ID. This can be accomplished by invoking the "VCGetAuthTicket" procedure.

Event Start 
     &CallSessionId = VCGetAuthTicket(&RemoteClientId, SINCH_APP_KEY, SINCH_APP_SECRET) 
     ... 
EndEvent

Recording Session

This property is used to configure the video call recording

Remote User

This property can be used in runtime to obtain the remote user after a Call was stablished.

Methods

callUser(remoteUserId)

The user control will try to call the indicated user.

If the remote user is valid and is currently initialized, it will fire the 'incomingCall' event on the remote client.

If the call can't be performed, or the remote user does not answer the call, the 'onCallended' event will be fired.

answer()

If the user has an incoming call, the 'answer' method will answer and establish the call.

StartRecording()/StopRecording()

These methods must be used in order to record the video call. Please check 'video call recording' for more details.

mute(boolean)

This method will mute or unmute the local call. Mute/unmute only applies to the local microphone, meaning, the remote client will not receive your audio, but the local user will receive the remote audio (unless the remote client also mutes its microphone).

By default, the local microphone is enabled (not muted).

shareLocalCamera(boolean)

This method will share or stop sharing the local video feed. As its name indicates, 'shareLocalCamera' only applies to the local video camera, meaning, the remote client will not receive your video images, but the local user will receive the remote video (unless the remote client also stops sharing its video camera)

By default, the local video camera is shared.

Custom UI

To customize the look & feel of the control, the user can program any UI or behavior that is required, using GeneXus theme classes, buttons, and controls, and interfacing with the user control using the user control "methods" and "events".

Events:

Event Start
    // Remote Client identifier
    &ClientId = !"DVELOP_CLIENT"
    // Create a authentication ticket using the name of the local user
    &CallSessionId = VCGetAuthTicket(&CallSessionId, SINCH_APP_KEY, SINCH_APP_SECRET)
    
    BtnAnswer.Visible = false
    BtnHangUp.Visible = false
    
    UCStatus.Caption = "Client is initializing"
EndEvent

Event DVSinchClientWeb1.onCallReceived
    UCStatus.Caption = "Incoming call received. Answer or hang up call"    
    
    BtnAnswer.Visible = true
    BtnHangUp.Visible = true
    BtnCall.Visible = false
EndEvent

Event DVSinchClientWeb1.onCallEnded
    UCStatus.Caption = format("Call finished '%1'", DVSinchClientWeb1.LastMessage)
    
    BtnAnswer.Visible = false
    BtnHangUp.Visible = false
    BtnCall.Visible = true
    
    Msg(format("Call finished %1", DVSinchClientWeb1.LastMessage))        
EndEvent

Event DVSinchClientWeb1.onCallEstablished
    UCStatus.Caption = "Video call established and started."
    
    BtnHangUp.Visible = true
    BtnCall.Visible = false    
EndEvent

Event DVSinchClientWeb1.onCallProgressing
    UCStatus.Caption = "Calling remote client"
    
    BtnHangUp.Visible = true
EndEvent

Event DVSinchClientWeb1.onClientStart
    UCStatus.Caption = "SDK is ready to receive or place calls"
EndEvent

Event DVSinchClientWeb1.onError
    Log.Error(DVSinchClientWeb1.LastMessage)
    UCStatus.Caption = format("ERROR %1", DVSinchClientWeb1.LastMessage)
EndEvent

Event 'Answer'
    DVSinchClientWeb1.answer()
Endevent

Event 'Hangup'
    DVsinchClientWeb1.hangup()
    
    BtnAnswer.Visible = false
    BtnHangUp.Visible = false
Endevent

Event 'PlaceCall'
    DVSinchClientWeb1.callUser(&ClientId)
Endevent

Predefined UI Customizations

In order to simplify some common UI customization, a couple of predefined properties can be used:

• Video 100%
• Local camera position (top-left, bottom-right, etc)

To use these predefined customizations, the user must manually create one of the following classes, and set it as the user control's "Cell Class"

• Videocall100x100: Videocall will take 100% of the available space
• VideocallOutBottomLeft: Local camera is placed at the bottom-left corner
• VideocallOutBottomRight: Local camera is placed at the bottom-right corner
• VideocallOutTopLeft: Local camera is placed at the top-left corner