In the previous exercise we discussed how to receive mono audio streams from a transmitter. In this
exercise a transmitter will be configured to send stereo audio to a receiver. To begin, set the Room
Identifier and Local Peer Identifier of the transmitter. Enter a password for the transmitter
which must be at least 14 characters in length. Next, click 'Register Transmitter' followed
by 'Start User Media', and then click 'Start Stream'.
In the next section we'll setup a receiver to receive the stereo stream from the transmitter.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Stereo Transmitter</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Add the UI elements to the page -->
<div>
<input id = "input-1" size = "35" type = "text" placeholder = "Room Identifier (ID)">
</div>
<div style = "margin-top: 7px;">
<input id = "input-2" size = "35" type = "text" placeholder = "Local Peer Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-3" size = "35" type = "text" placeholder = "Transmitter Password">
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Register Transmitter</button>
<button id = "button-2">Start User Media</button>
<button id = "button-3">Start Stream</button>
</div>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-stream@main/api.js"></script>
<script type = "module" src = "https://www.javaika.com/frame/web-persist@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
const input1 = document.getElementById('input-1');
const input2 = document.getElementById('input-2');
const input3 = document.getElementById('input-3');
const button1 = document.getElementById('button-1');
const button2 = document.getElementById('button-2');
const button3 = document.getElementById('button-3');
// Initialize a shorter prefix for referencing.
const jws = window.javaika.webStream;
// Initialize the transmitter media stream.
let stream = undefined;
// Initialize the developer token endpoint.
jws.init({
tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
});
// Authenticate before using the framework.
jws.requestToken({
framework: "web_stream" // Specify the framework for token issuance.
});
// Listener for button click event.
button1.addEventListener('click', () => {
jws.realtimeTransmitter.registerTransmitter
(
input1.value, input2.value, input3.value // Parse the credentials.
);
});
// Listener for button click event.
button2.addEventListener('click', () => {
jws.mediaCapture.setUserMediaJson({audio: {
channelCount: {exact: 2}, // Required to force stereo
echoCancellation: false, // Required to prevent mono downmixing
noiseSuppression: false, // Required to protect music frequencies
autoGainControl: false // Required to keep original dynamics
}});
jws.mediaCapture.startUserMediaStream();
});
// Listener for button click event.
button3.addEventListener('click', () => {
jws.realtimeTransmitter.startStream(stream);
});
// Authenticate callback handler.
function onAuthenticate(event)
{
jws.refreshToken(); // Refresh the authentication token.
console.log('[Web Stream] Authentication received callback:', event);
}
// Initialized callback handler.
function onInitialized(event)
{
jws.realtimeTransmitter.setStereoEnabled(true); // Enable stereo.
console.log('[Web Stream] Framework initialized callback:', event);
}
// Stream loaded callback handler.
function onStreamLoaded(event)
{
console.log('[Web Stream] Stream loaded callback:', event);
}
// Transmitter registered callback handler.
function onTransmitterRegistered(event)
{
console.log('[Web Stream] Transmitter registered callback:', event);
}
// User media stream initialized callback handler.
function onUserMediaStreamInitialized(event)
{
stream = event.detail.userMediaStream; // Initialize stream.
console.log('[Web Stream] User media stream initialized callback:', event);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webStream.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webStream.initialized', onInitialized
);
// Callback event after stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.streamLoaded', onStreamLoaded
);
// Callback event after transmitter registered.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.transmitterRegistered', onTransmitterRegistered
);
// Callback event after user media stream initialized.
document.addEventListener
(
'javaika.webStream.mediaCapture.userMediaStreamInitialized', onUserMediaStreamInitialized
);
</script>
</body>
</html>
Next capability: Discuss how receivers can receive stereo streams from transmitters.