This exercise will demonstrate how to setup the receiver for receiving and persisting files into IndexedDB
send by a transmitter. Enter the same Room Identifier used for the transmitter and also enter a Local Peer
Identifier for the receiver which much match the Remote Peer Identifier on the transmitter side. Also enter
the Remote Peer Identifier which must match the Local Peer Identifier specified on the transmitter. Enter
the password for the receiver which must match the transmitter password. Next, click the button 'Register
Receiver' to register the receiver on the signalling server. Then click 'Load Stream' to connect
(or subscribe) the receiver to the transmitter stream.
If you return to the transmitter in the last section and click 'Send File', you should observe the file
being sent to the receiver and persisted into IndexedDB on the receiver side. Additionally, the JSON
message on the transmitter end should be displayed inside the textarea on the receiver end.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Push Receiver</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 = "Remote Peer Identifier (ID)">
</div>
<div style = "margin-top: 14px;">
<input id = "input-4" size = "35" type = "text" placeholder = "Receiver Password">
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Register Receiver</button>
<button id = "button-2">Load 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 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 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.realtimeReceiver.registerReceiver
(
input1.value, input2.value, [input4.value] // Parse the credentials.
);
});
// Listener for button click event.
button2.addEventListener('click', () => {
jws.realtimeReceiver.loadStream(input3.value);
});
// 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);
}
// File record stored callback handler.
async function onFileRecordStored(event)
{
const file = event.detail.file; const text = await file.text();
textArea1.value = JSON.stringify(JSON.parse(text), null, 2);
console.log('[Web Persist] File record stored callback:', event);
}
// File received callback handler.
function onFileReceived(event)
{
const key = event.detail.key; const file = event.detail.file;
const options = {
'storeName': 'web-stream', 'source': 'remote'
};
jwp.storeFileRecord(key, file, options);
console.log('[Web Stream] File Received callback:', event);
}
// Stream loaded callback handler.
function onStreamLoaded(event)
{
console.log('[Web Stream] Stream loaded callback:', event);
}
// Receiver registered callback handler.
function onReceiverRegistered(event)
{
console.log('[Web Stream] Receiver 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 file record stored.
document.addEventListener
(
'javaika.webPersist.fileRecordStored', onFileRecordStored
);
// Callback event after file received.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.fileReceived', onFileReceived
);
// Callback event after stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.streamLoaded', onStreamLoaded
);
// Callback event after receiver registered.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.receiverRegistered', onReceiverRegistered
);
</script>
</body>
</html>
Next capability: Discuss how transmitters can send audio streams.