naimi/yass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Replace video.js library with a native HTML5 video element for screen sharing playback.

Browse Source
This commit is contained in:
Kibi Kelburton
2026-02-23 03:07:58 +01:00
parent 2a6be8d757
commit 610ad6d661
3 changed files with 13 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
public/style.css
View File

@@ -179,55 +179,18 @@ video.active {
overflow: hidden; overflow: hidden;
} }
.video-wrapper { .viewer-container video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain;
border-radius: 0;
border: none;
margin: 0;
display: none; display: none;
} }
.video-wrapper.active { .viewer-container video.active {
display: block; display: block;
animation: fadeIn 0.5s ease forwards;
}
/* Custom Video.js Overrides for Premium Glass Look */
.video-js {
width: 100% !important;
height: 100% !important;
background-color: transparent !important;
}
.video-js .vjs-tech {
object-fit: contain;
}
.vjs-theme-city .vjs-control-bar {
background: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(8px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
height: 50px !important;
padding: 0 10px !important;
}
.vjs-theme-city .vjs-play-progress,
.vjs-theme-city .vjs-volume-level {
background: var(--accent-color) !important;
}
.vjs-theme-city .vjs-big-play-button {
background: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 50% !important;
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
transition: all 0.3s ease !important;
}
.vjs-theme-city .vjs-big-play-button:hover {
background: var(--accent-color) !important;
transform: scale(1.1) !important;
} }
.overlay { .overlay {

18
public/viewer.html
View File

@@ -6,7 +6,6 @@
<title>Screenshare - Viewer</title> <title>Screenshare - Viewer</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="viewer-container"> <div class="viewer-container">
@@ -17,23 +16,8 @@
<span>Connecting to Broadcaster</span> <span>Connecting to Broadcaster</span>
</div> </div>
</div> </div>
<div class="video-wrapper" id="videoWrapper"> <video id="remoteVideo" autoplay playsinline controls></video>
<video
id="remoteVideo"
class="video-js vjs-theme-city vjs-big-play-centered"
controls
preload="auto"
playsinline
>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div> </div>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="viewer.js"></script> <script src="viewer.js"></script>
</body> </body>

45
public/viewer.js
View File

@@ -1,19 +1,6 @@
const socket = io(); const socket = io();
const remoteVideo = document.getElementById('remoteVideo');
const overlay = document.getElementById('overlay'); const overlay = document.getElementById('overlay');
const videoWrapper = document.getElementById('videoWrapper');
// Initialize video.js player
const player = videojs('remoteVideo', {
controls: true,
autoplay: true,
preload: 'auto',
fluid: true,
controlBar: {
volumePanel: { inline: false },
fullscreenToggle: true,
pictureInPictureToggle: true
}
});
let peerConnection; let peerConnection;
const config = { const config = {
@@ -31,27 +18,9 @@ socket.on('offer', (id, description) => {
peerConnection = new RTCPeerConnection(config); peerConnection = new RTCPeerConnection(config);
peerConnection.ontrack = event => { peerConnection.ontrack = event => {
// Need to set srcObject on the raw video element inside video.js remoteVideo.srcObject = event.streams[0];
const videoElement = document.querySelector('#remoteVideo_html5_api'); remoteVideo.classList.add('active');
if (videoElement) { overlay.classList.add('hidden');
videoElement.srcObject = event.streams[0];
// Notify video.js of the media change
player.trigger('loadstart');
player.trigger('loadedmetadata');
player.trigger('loadeddata');
player.trigger('canplay');
player.trigger('playing');
videoWrapper.classList.add('active');
overlay.classList.add('hidden');
// Force play after stream is attached
setTimeout(() => {
player.muted(true); // Ensure autoplay policies don't block visuals
player.play().catch(e => console.error("Autoplay prevented:", e));
}, 100);
}
}; };
peerConnection.onicecandidate = event => { peerConnection.onicecandidate = event => {
@@ -85,10 +54,8 @@ socket.on('disconnectPeer', () => {
peerConnection.close(); peerConnection.close();
peerConnection = null; peerConnection = null;
} }
remoteVideo.classList.remove('active');
videoWrapper.classList.remove('active'); remoteVideo.srcObject = null;
const videoElement = document.querySelector('#remoteVideo_html5_api');
if (videoElement) videoElement.srcObject = null;
overlay.classList.remove('hidden'); overlay.classList.remove('hidden');
overlay.querySelector('h1').innerText = 'Stream Ended'; overlay.querySelector('h1').innerText = 'Stream Ended';