In this exercise, a receiver will be setup to receive the video stream from the transmitter in the previous section. Set the Room Identifier and Local Peer Identifier for the receiver; the Room Identifier must match the transmitter. Also enter the Remote Peer Identifier which must match the Local Peer Identifier of the transmitter. Enter the password for the receiver which must match the transmitter password. Next, click 'Register Receiver' followed by 'Load Stream', and then click 'Attach Stream'. The 'Load Stream' action establishes a connection with the transmitter whereas the 'Attach Stream' action binds the video stream to the 'video' element on the receiver side. You should now observe reception of the video 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>Video Receiver</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Add the UI elements to the page -->
<div>
<video id = "video-1" width = "320" height = "180" autoplay playsinline></video>
</div>
<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 = "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>
<button id = "button-3">Attach Stream</button>
</div>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-stream@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
const video1 = document.getElementById('video-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');
const button3 = document.getElementById('button-3');
// Initialize a shorter prefix for referencing.
const jws = window.javaika.webStream;
// 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);
});
// Listener for button click event.
button3.addEventListener('click', () => {
jws.realtimeReceiver.attachRemoteStream(video1, 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);
}
// 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 stream loaded.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.streamLoaded', onStreamLoaded
);
// Callback event after receiver registered.
document.addEventListener
(
'javaika.webStream.realtimeReceiver.receiverRegistered', onReceiverRegistered
);
</script>
</body>
</html>