add picture in picture

public/chat.html

@@ -112,6 +112,12 @@
         </button>
         <div class="HoverState">Open Chat</div>
     </div>
+    <div class="buttonContainer">
+        <button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}">
+            <i class="fas fa-external-link-alt fa-xs"></i>
+        </button>
+        <div class="HoverState" id="pip-text">Enter Picture in Picture</div>
+    </div>
 </div>
 
 

public/js/chat.js

@@ -590,6 +590,39 @@ socket.on('chat message', function (msg) {
 // Chat
 
 
+//Picture in picture
+const pipVideo = document.getElementById('remote-video');
+function togglePictureInPicture() {
+    if ('pictureInPictureEnabled' in document) {
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture()
+                .catch(error => {
+                    logIt("Error exiting pip.");
+                    logIt(error);
+                })
+        } else {
+            pipVideo.requestPictureInPicture()
+                .catch(error => {
+                    logIt("Error entering pip.");
+                    logIt(error);
+                });
+        }
+    } else {
+        alert("Picture in picture is not supported in your browser. Consider using Chrome.")
+    }
+}
+
+
+pipVideo.addEventListener('enterpictureinpicture', () => {
+    $('#pip-text').text("Exit Picture in Picture");
+});
+
+pipVideo.addEventListener('leavepictureinpicture', () => {
+    $('#pip-text').text("Enter Picture in Picture");
+});
+//Picture in picture
+
+
 // auto get media
 VideoChat.requestMediaStream();