webrtc: close WebRTC sessions when closing browser tabs (#4477) (#4849)

This should decrease the delay before WebRTC sessions are marked as closed.

internal/servers/webrtc/publish_index.html

@@ -161,6 +161,7 @@ const video = document.getElementById('video');
 const controls = document.getElementById('controls');
 const message = document.getElementById('message');
 const publishButton = document.getElementById('publish-button');
+let publisher = null;
 
 const videoForm = {
   device: document.getElementById('video-device'),
@@ -185,7 +186,7 @@ const setMessage = (str) => {
 const onStream = (stream) => {
   video.srcObject = stream;
 
-  new MediaMTXWebRTCPublisher({
+  publisher = new MediaMTXWebRTCPublisher({
     url: new URL('whip', window.location.href) + window.location.search,
     stream,
     videoCodec: videoForm.codec.value,
@@ -421,6 +422,12 @@ window.addEventListener('load', () => {
   populateOptions();
 });
 
+window.addEventListener('beforeunload', () => {
+  if (publisher !== null) {
+    publisher.close();
+  }
+});
+
 </script>
 
 </body>

internal/servers/webrtc/read_index.html

@@ -49,6 +49,7 @@ html, body {
 const video = document.getElementById('video');
 const message = document.getElementById('message');
 let defaultControls = false;
+let reader = null;
 
 const setMessage = (str) => {
   if (str !== '') {
@@ -83,7 +84,7 @@ const loadAttributesFromQuery = () => {
 window.addEventListener('load', () => {
   loadAttributesFromQuery();
 
-  new MediaMTXWebRTCReader({
+  reader = new MediaMTXWebRTCReader({
     url: new URL('whep', window.location.href) + window.location.search,
     onError: (err) => {
       setMessage(err);
@@ -95,6 +96,12 @@ window.addEventListener('load', () => {
   });
 });
 
+window.addEventListener('beforeunload', () => {
+  if (reader !== null) {
+    reader.close();
+  }
+});
+
 </script>
 
 </body>