The demos can be used in two ways depending on your workflow. You can run it instantly on JT by simply
clicking 'View Demo', which opens the page directly in your browser with no setup required. Alternatively,
if you want to test or modify the demo in your own environment, click 'Download Demo' to save the HTML file
locally. You can then upload it to your localhost server and run it there, giving you full control to
experiment, debug, and integrate it with your own setup.
To begin, open Browser Developer Tools (DevTools) which is essentially an entire debugging suite built into
web browsers; you can typically open it with 'Ctrl + Shift + I'. We will use DevTools to inspect the browser
console logs for some demo sections.
This exercise will demonstrate how to setup a basic transmitter which will listen to requests from a receiver. Enter any value for the Room Identifier, Local Peer Identifier, and the Local File Identifier. After you have entered IDs for each of these, enter a password for the transmitter which must be at least 14 characters in length. Click the button 'Register Transmitter'; this will register the transmitter on the signalling server. Also click the button 'Store JSON'; this will store the JSON message (displayed in the textarea) into IndexedDB as a file, which the receiver in the next section will attempt to fetch.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Pull Transmitter</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Add the UI elements to the page -->
<div>
<textarea id = "text-area-1" rows = "5" cols = "35" placeholder = "Json message"></textarea>
</div>
<div style = "margin-top: 7px;">
<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 = "Local File Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-4" size = "35" type = "text" placeholder = "Transmitter Password">
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Register Transmitter</button>
<button id = "button-2">Store JSON</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 textArea1 = document.getElementById('text-area-1');
const input1 = document.getElementById('input-1');
const input2 = document.getElementById('input-2');
const input3 = document.getElementById('input-3');
const input4 = document.getElementById('input-4');
const button1 = document.getElementById('button-1');
const button2 = document.getElementById('button-2');
// Initialize a shorter prefix for referencing.
const jws = window.javaika.webStream;
const jwp = window.javaika.webPersist;
// Initialize the textarea and input values.
const defaultJsonObject = {message: "Hello world", type: "demo"};
textArea1.value = JSON.stringify(defaultJsonObject, null, 2);
// 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, input4.value // Parse the credentials.
);
});
// Listener for button click event.
button2.addEventListener('click', () => {
const key = {
'roomId': input1.value, 'peerId': input2.value, 'fileId': input3.value
};
const options = {
'storeName': 'web-stream', 'source': 'local'
};
jwp.storeJsonRecord(key, JSON.parse(textArea1.value), options);
});
// 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);
}
// Json record stored callback handler.
function onJsonRecordStored(event)
{
console.log('[Web Persist] Json record stored callback:', event);
}
// File record fetched callback handler.
function onFileRecordFetched(event)
{
const key = event.detail.key; const file = event.detail.file;
const remoteId = event.detail.options.remoteId; // Remote id.
jws.realtimeTransmitter.sendFile(key, file, remoteId);
console.log('[Web Persist] File record fetched callback:', event);
}
// File requested callback handler.
function onFileRequested(event)
{
const key = event.detail.key;
const remoteId = event.detail.remoteId;
const options = {
'storeName': 'web-stream', 'remoteId': remoteId
};
jwp.fetchFileRecord(key, options);
console.log('[Web Stream] File requested 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);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webStream.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webStream.initialized', onInitialized
);
// Callback event after json record stored.
document.addEventListener
(
'javaika.webPersist.jsonRecordStored', onJsonRecordStored
);
// Callback event after file record fetched.
document.addEventListener
(
'javaika.webPersist.fileRecordFetched', onFileRecordFetched
);
// Callback event after file requested.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.fileRequested', onFileRequested
);
// Callback event after stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.streamLoaded', onStreamLoaded
);
// Callback event after transmitter registered.
document.addEventListener
(
'javaika.webStream.realtimeTransmitter.transmitterRegistered', onTransmitterRegistered
);
</script>
</body>
</html>
Next capability: Discuss how receivers subscribe to transmitter streams.