Connecting to a Session

The connect function is responsible for creating a connection between the clients.

function connect() {
	let displayed_name = document.getElementById('display_name').value
	let streamingToken = document.getElementById('session_token').value

	if(!displayed_name || !streamingToken)
		alert('Display name and token is empty or invalid! Please check and try again!')

	WTSDK.Session.connect(
		streamingToken,
		displayed_name
	);
}

The onConnected function is used to define a callback that will be called when the local user's media stream is created. This callback can be used to perform various operations on the stream, such as displaying it in a video element.

WTSDK.SessionListeners.onConnected(() => {
	...
	document.getElementById('config_dialog').style.display = 'none';

	const videos = document.getElementsByTagName('video')

	//On participant connect to the Session
	WTSDK.ParticipantListeners.onParticipantSpeaking(() => {
		// On participant speaking event
	});
	WTSDK.ParticipantListeners.onParticipantStopSpeaking(() => {
		// On participant stop speaking event
	});

	WTSDK.ReconnectListeners.onLocalConnectionResumed(() => {
		Array.from(videos).forEach(video => {
			video.parentElement.remove();
		})
	})

	WTSDK.SessionListeners.onStreamCreated(participant => {
		const { local, stream, participantId } = participant;

		const node = document.getElementById(participantId);

		if(node) {
			node.srcObject = participant.stream;
		} else {
			const div = document.createElement("div")
			div.setAttribute("class", "video-container");

			const video = document.createElement("video");
			video.id = participantId;
			video.className = local ? "local" : "";
			video.autoplay = true;
			video.muted = local;
			video.srcObject = stream;
			video.playsInline = true;
			video.disablePictureInPicture = true;

			div.appendChild(video)

			const container = document.querySelector("#gallery");
			container.appendChild(div);
			recalculateLayout();
		}
	});

	WTSDK.ParticipantListeners.onParticipantLeft(({participantId}) => {
		const el = document.getElementById(participantId);
		el.parentElement.remove();
		recalculateLayout();
	});
});

The onParticipantSpeaking and onParticipantStopSpeaking functions can be used to visually highlight the current speaker in a call.