This app implements a two-player video chat for oTree in which participants communicate in real time using their webcam and microphone. Participants are automatically paired and can interact for a fixed duration before continuing to the next stage of the experiment.
The interface displays both participants’ video streams and a countdown timer indicating the remaining discussion time. The communication is implemented using WebRTC with STUN/TURN servers to ensure reliable connections across different networks.
Participants first enter their name or pseudonym, which is then displayed during the video discussion.
How it works
Participants are grouped in pairs when the session starts.
Each participant first enters a name or pseudonym. This identifier is displayed during the discussion so that each participant can see who they are speaking with.
When both participants are ready, they are connected through a WebRTC peer-to-peer video call. The interface shows:
the participant’s own video stream
the partner’s video stream
a countdown timer indicating the remaining discussion time
When the timer reaches zero, the discussion automatically ends and the page submits.
Duration of the discussion
The duration of the discussion is controlled by the constant: DISCUSSION_DURATION.
This parameter determines how many seconds the discussion lasts.
Setting up STUN/TURN servers
The video chat relies on WebRTC to establish a direct peer-to-peer connection between participants. In many cases, especially when participants are located on different networks or behind firewalls, WebRTC requires STUN and TURN servers to successfully establish the connection. STUN servers help browsers discover their public network address, while TURN servers relay media traffic when a direct peer-to-peer connection cannot be established.
To ensure reliable connections across different networks, you must configure STUN/TURN servers in the MainChat.html file.
Example configuration:
In the function makePeerConnection() in the MainChat.html file,
const configuration = {
iceServers: [
{
urls: "stun:stun.relay.metered.ca:80",
},
{
urls: "turn:global.relay.metered.ca:80",
username: "YOUR_USERNAME",
credential: "YOUR_CREDENTIAL",
},
{
urls: "turn:global.relay.metered.ca:80?transport=tcp",
username: "YOUR_USERNAME",
credential: "YOUR_CREDENTIAL",
},
{
urls: "turn:global.relay.metered.ca:443",
username: "YOUR_USERNAME",
credential: "YOUR_CREDENTIAL",
},
{
urls: "turns:global.relay.metered.ca:443?transport=tcp",
username: "YOUR_USERNAME",
credential: "YOUR_CREDENTIAL",
}
]
};
You can obtain TURN credentials from a TURN server provider such as Metered (https://www.metered.ca)
After inserting your credentials in the configuration above, the video chat will work reliably even when participants are on different networks (home networks, campus Wi-Fi, or mobile connections).
In practice: How to make it run?
Download chat.zip from this repository
Places the files in your oTree project
Add the chat folder to your otree main folder
Add the following configuration to the SESSION_CONFIGS list in your settings.py file:
dict(
name='chat',
display_name="Two-player audio/video chat",
app_sequence=['chat'],
num_demo_participants=2,
),