In this exercise we'll setup a transmitter that sends an audio stream 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 audio 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>Audio 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: true});
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)
{
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 audio streams from transmitters.