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

public/viewer.js

@@ -1,19 +1,6 @@
 const socket = io();
+const remoteVideo = document.getElementById('remoteVideo');
 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;
 const config = {
@@ -31,27 +18,9 @@ socket.on('offer', (id, description) => {
     peerConnection = new RTCPeerConnection(config);
     
     peerConnection.ontrack = event => {
-        // Need to set srcObject on the raw video element inside video.js
-        const videoElement = document.querySelector('#remoteVideo_html5_api');
-        if (videoElement) {
-            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);
-        }
+        remoteVideo.srcObject = event.streams[0];
+        remoteVideo.classList.add('active');
+        overlay.classList.add('hidden');
     };
 
     peerConnection.onicecandidate = event => {
@@ -85,10 +54,8 @@ socket.on('disconnectPeer', () => {
         peerConnection.close();
         peerConnection = null;
     }
-    
-    videoWrapper.classList.remove('active');
-    const videoElement = document.querySelector('#remoteVideo_html5_api');
-    if (videoElement) videoElement.srcObject = null;
+    remoteVideo.classList.remove('active');
+    remoteVideo.srcObject = null;
     
     overlay.classList.remove('hidden');
     overlay.querySelector('h1').innerText = 'Stream Ended';