1. HTML with JavaScript example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StreamPixel Full-Screen Stream with Loading Screen</title>
<style>
/* Reset and full-height settings for consistent coverage */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* Loading screen styling */
#loadingScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
display: flex;
justify-content: center;
align-items: center;
z-index: 100; /* Highest layer */
}
#loadingScreen img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Stretch and crop the image to cover the viewport */
}
/* Buttons container */
#controls {
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
color: white;
padding: 10px;
z-index: 10; /* Above iframe but below loading screen */
position: fixed;
width: 100%;
top: 0;
}
#controls button {
margin: 0 10px;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
transition: background-color 0.3s;
}
#controls button:hover {
background-color: #0056b3;
}
/* Fullscreen iframe */
iframe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
z-index: 1; /* Below everything else */
}
</style>
</head>
<body>
<!-- Loading Screen -->
<div id="loadingScreen">
<img src="your-image.jpg" alt="Loading...">
</div>
<!-- Button Controls -->
<div id="controls">
<button onclick="sendCommand()">Send Test Message</button>
<button onclick="muteAudio()">Mute Audio</button>
<button onclick="unMuteAudio()">Unmute Audio</button>
<button onclick="terminateSession()">Terminate Session</button>
</div>
<!-- Fullscreen Iframe -->
<iframe
id="streamPixelIframe"
src="your stream link"
allow="microphone; camera"
title="StreamPixel Stream"
></iframe>
<script>
const iframe = document.getElementById('streamPixelIframe');
const loadingScreen = document.getElementById('loadingScreen');
// Function to send a test message to the iframe
function sendCommand() {
const message = { message: 'test' };
iframe.contentWindow.postMessage(message, '*');
}
// Function to mute audio
function muteAudio() {
const message = { message: 'muteAudio' };
iframe.contentWindow.postMessage(message, '*');
}
// Function to unmute audio
function unMuteAudio() {
const message = { message: 'unMuteAudio' };
iframe.contentWindow.postMessage(message, '*');
}
// Function to terminate the session
function terminateSession() {
const message = { message: 'terminateSession' };
iframe.contentWindow.postMessage(message, '*');
}
// Listen for messages from the iframe
window.addEventListener('message', (event) => {
console.log('Message received:', event.data);
if (event.data === 'loadingComplete') {
// Remove the loading screen when loading is complete
loadingScreen.style.display = 'none';
console.log('Stream loading complete');
}
});
// Fallback: Remove the loading screen if iframe takes too long to respond
setTimeout(() => {
if (loadingScreen.style.display !== 'none') {
loadingScreen.style.display = 'none';
console.warn('Fallback: Loading screen removed due to timeout.');
}
}, 15000); // 15 seconds timeout
</script>
</body>
</html>
2. React example
import React, { useEffect, useRef, useState } from 'react';
const StreamPixel = () => {
const iframeRef = useRef(null); // Reference to the iframe
const [loading, setLoading] = useState(true); // State to manage the loading screen
// Function to send a test message to the iframe
const sendCommand = () => {
const message = { message: 'test' };
if (iframeRef.current) {
iframeRef.current.contentWindow.postMessage(message, '*');
}
};
// Function to mute audio
const muteAudio = () => {
const message = { message: 'muteAudio' };
if (iframeRef.current) {
iframeRef.current.contentWindow.postMessage(message, '*');
}
};
// Function to unmute audio
const unMuteAudio = () => {
const message = { message: 'unMuteAudio' };
if (iframeRef.current) {
iframeRef.current.contentWindow.postMessage(message, '*');
}
};
// Function to terminate the session
const terminateSession = () => {
const message = { message: 'terminateSession' };
if (iframeRef.current) {
iframeRef.current.contentWindow.postMessage(message, '*');
}
};
// Listen for messages from the iframe
useEffect(() => {
const handleMessage = (event) => {
console.log('Message received:', event.data);
if (event.data === 'loadingComplete') {
// Remove the loading screen when loading is complete
setLoading(false);
console.log('Stream loading complete');
}
};
window.addEventListener('message', handleMessage);
// Cleanup the event listener on unmount
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
// Fallback: Remove the loading screen if iframe takes too long to respond
useEffect(() => {
const timeout = setTimeout(() => {
if (loading) {
setLoading(false);
console.warn('Fallback: Loading screen removed due to timeout.');
}
}, 15000); // 15 seconds timeout
return () => clearTimeout(timeout); // Clear timeout on unmount
}, [loading]);
return (
<div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
{/* Loading Screen */}
{loading && (
<div
id="loadingScreen"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.9)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 100,
}}
>
<img
src="your-image.jpg"
alt="Loading..."
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
</div>
)}
{/* Button Controls */}
<div
id="controls"
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'rgba(0, 0, 0, 0.7)',
color: 'white',
padding: '10px',
zIndex: 10,
position: 'fixed',
width: '100%',
top: 0,
}}
>
<button onClick={sendCommand} style={buttonStyle}>Send Test Message</button>
<button onClick={muteAudio} style={buttonStyle}>Mute Audio</button>
<button onClick={unMuteAudio} style={buttonStyle}>Unmute Audio</button>
<button onClick={terminateSession} style={buttonStyle}>Terminate Session</button>
</div>
{/* Fullscreen Iframe */}
<iframe
ref={iframeRef}
id="streamPixelIframe"
src="your-stream-link"
allow="microphone; camera"
title="StreamPixel Stream"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 'none',
zIndex: 1,
}}
></iframe>
</div>
);
};
// Button styling
const buttonStyle = {
margin: '0 10px',
padding: '10px 20px',
fontSize: '14px',
cursor: 'pointer',
border: 'none',
backgroundColor: '#007bff',
color: 'white',
borderRadius: '5px',
transition: 'background-color 0.3s',
};
export default StreamPixel;
Next steps
Stream control commands
Reference of every command you can wire to your buttons.
Frontend and application communication
Learn the postMessage patterns used in these samples.