diff --git a/squashkiwi-streaming/config/web/webrtc.html b/squashkiwi-streaming/config/web/webrtc.html
index 3e93efe..13abd13 100644
--- a/squashkiwi-streaming/config/web/webrtc.html
+++ b/squashkiwi-streaming/config/web/webrtc.html
@@ -39,6 +39,23 @@
height: 0;
background: black;
}
+ .play-overlay {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 0, 0, 0.7);
+ color: white;
+ padding: 20px 40px;
+ border-radius: 10px;
+ cursor: pointer;
+ font-size: 1.2rem;
+ z-index: 10;
+ display: none;
+ }
+ .play-overlay:hover {
+ background: rgba(0, 0, 0, 0.9);
+ }
video {
position: absolute;
top: 0;
@@ -115,7 +132,8 @@
@@ -160,6 +178,29 @@
pc.ontrack = (event) => {
console.log('Got track:', event.track.kind);
video.srcObject = event.streams[0];
+ const playOverlay = document.getElementById('playOverlay');
+
+ // Ensure autoplay works
+ video.play().then(() => {
+ console.log('Video playback started automatically');
+ playOverlay.style.display = 'none';
+ }).catch(e => {
+ console.log('Autoplay was blocked, user interaction may be required:', e);
+ // Show play overlay
+ playOverlay.style.display = 'block';
+
+ // Add click handlers to both overlay and video
+ const startPlayback = () => {
+ video.play().then(() => {
+ playOverlay.style.display = 'none';
+ });
+ video.onclick = null;
+ playOverlay.onclick = null;
+ };
+
+ video.onclick = startPlayback;
+ playOverlay.onclick = startPlayback;
+ });
updateStatus(true);
};