From 16924a5ff55992cb17ff21ef2d4d333c21033bf3 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sun, 30 Mar 2025 13:50:01 -0700
Subject: [PATCH] Refactor WebRTC and Webcam Feature into Vue Mixin

* Move all WebRTC and webcam-related functionality from App.vue into an
  external Vue mixin.
* Centralize the stand-alone functions videoIconClass and
  videoButtonClass into the new WebRTC mixin, which is called by
  WhoListRow and MessageBox.
---
 src/App.vue                   | 1787 +------------------------------
 src/components/MessageBox.vue |   40 +-
 src/components/WhoListRow.vue |   40 +-
 src/lib/WebRTC.js             | 1890 +++++++++++++++++++++++++++++++++
 4 files changed, 1906 insertions(+), 1851 deletions(-)
 create mode 100644 src/lib/WebRTC.js

diff --git a/src/App.vue b/src/App.vue
index b38b6d3..0561796 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,7 @@
 <script>
-import interact from 'interactjs';
-import FloatingVue from 'floating-vue';
 import 'floating-vue/dist/style.css';
 import { Mentionable } from 'vue-mention';
 import EmojiPicker from 'vue3-emoji-picker';
-import hark from 'hark';
 
 import AlertModal from './components/AlertModal.vue';
 import LoginModal from './components/LoginModal.vue';
@@ -23,41 +20,16 @@ import StatusMessage from './lib/StatusMessage';
 import { SoundEffects, DefaultSounds } from './lib/sounds';
 import WatermarkImage from './lib/watermark';
 
-// WebRTC configuration.
-const configuration = {
-    iceServers: TURN.URLs.map(val => {
-        let row = {
-            urls: val,
-        };
-
-        if (val.indexOf('turn:') === 0) {
-            row.username = TURN.Username;
-            row.credential = TURN.Credential;
-        }
-
-        return row;
-    })
-};
+import WebRTC from './lib/WebRTC.js';
 
 const FileUploadMaxSize = 1024 * 1024 * 8; // 8 MB
 const DebugChannelID = "barertc-debug";
 const ReactNudgeNsfwMessageID = -451;
 
-// Webcam sizes: ideal is 640x480 as this is the most friendly for end users, e.g. if everyone
-// broadcasted at 720p users on weaker hardware would run into problems sooner.
-const WebcamWidth = 640,
-    WebcamHeight = 480;
-
-// For webcams that can not transmit at 640x480 (e.g. ultra widescreen), allow them to choose
-// the nearest resolution but no more than 720p.
-const WebcamMaxWidth = 1280,
-    WebcamMaxHeight = 720;
-
 export default {
     name: 'BareRTC',
     components: {
         // Third party components
-        FloatingVue,
         Mentionable,
         EmojiPicker,
 
@@ -72,6 +44,9 @@ export default {
         ProfileModal,
         MessageHistoryModal,
     },
+    mixins: [
+        WebRTC.getMixin(),
+    ],
     data() {
         return {
             // busy: false, // TODO: not used
@@ -145,6 +120,7 @@ export default {
             typingNotifDebounce: null,
             status: "online", // away/idle status
             StatusMessage: StatusMessage,
+            VideoFlag: VideoFlag,
 
             // Emoji picker visible for messages
             showEmojiPicker: false,
@@ -177,126 +153,6 @@ export default {
                 debug: false,        // enable debugging features
             },
 
-            // My video feed.
-            webcam: {
-                busy: false,
-                active: false,
-                elem: null,   // <video id="localVideo"> element
-                stream: null, // MediaStream object
-                muted: false, // our outgoing mic is muted, not by default
-                autoMute: false, // mute our mic automatically when going live (user option)
-                nsfw: false,  // user has flagged their camera to be NSFW
-                mutual: false, // user wants viewers to share their own videos
-                mutualOpen: false, // user wants to open video mutually
-                nonExplicit: false, // user prefers not to see explicit cameras
-                vipOnly: false, // only show camera to fellow VIP users
-                rememberExpresslyClosed: true,  // remember cams we expressly closed
-                autoMuteWebcams: false, // auto-mute other cameras' audio channels
-
-                // My watermark image for screen recording protection.
-                // Set after login in setWatermark.
-                watermark: null,
-
-                // Who all is watching me? map of users.
-                watching: {},
-
-                // Scaling setting for the videos drawer, so the user can
-                // embiggen the webcam sizes so a suitable size.
-                videoScale: "",
-                videoScaleOptions: [
-                    ["", "Default size"],
-                    ["x1", "50% larger videos"],
-                    ["x2", "2x larger videos"],
-                    ["x3", "3x larger videos"],
-                    ["x4", "4x larger videos (not recommended)"],
-                ],
-
-                // Available cameras and microphones for the Settings modal.
-                gettingDevices: false, // busy indicator for refreshing devices
-                videoDevices: [],
-                videoDeviceID: null,
-                audioDevices: [],
-                audioDeviceID: null,
-
-                // Advanced: automatically share your webcam when the page loads.
-                autoshare: false,
-
-                // After we get a device selected, remember it (by name) so that we
-                // might hopefully re-select it by default IF we are able to enumerate
-                // devices before they go on camera the first time.
-                preferredDeviceNames: {
-                    video: null,
-                    audio: null,
-                },
-
-                // Detect dark video streams.
-                darkVideo: {
-                    canvas: null,    // <canvas> element to screenshot video into
-                    ctx: null,       // Canvas context2d
-                    interval: null,  // interval loop
-                    lastImage: null, // data: uri of last screenshot taken
-                    lastAverage: [], // last average RGB color
-                    lastAverageColor: "rgba(255, 0, 255, 1)",
-                    tooDarkFrames: 0,  // frame counter for dark videos
-                    tooDarkFramesLimit: 4, // frames in a row of too dark before cut
-
-                    // Configuration thresholds: how dark is too dark? (0-255)
-                    // NOTE: 0=disable the feature.
-                    threshold: 10,
-                },
-            },
-
-            // Video flag constants (sync with values in messages.go)
-            VideoFlag: VideoFlag,
-
-            // WebRTC sessions with other users.
-            WebRTC: {
-                // Streams per username.
-                streams: {},
-                muted: {}, // muted bool per username
-                booted: {}, // booted bool per username
-                poppedOut: {}, // popped-out video per username
-                speaking: {}, // speaking boolean per username
-
-                // RTCPeerConnections per username.
-                pc: {},
-
-                // Video stream freeze detection.
-                frozenStreamInterval: {}, // map usernames to intervals
-                frozenStreamDetected: {}, // map usernames to bools
-
-                // Debounce connection attempts since now every click = try to connect.
-                debounceOpens: {}, // map usernames to bools
-
-                // Timeouts for open camera attempts. e.g.: when you click to view
-                // a camera, the icon changes to a spinner for a few seconds to see
-                // whether the video goes on to open.
-                openTimeouts: {}, // map usernames to timeouts
-
-                // Map of usernames whose cameras were expressly closed by us.
-                // Example: we have mutualOpen enabled, someone opens our cam
-                // so we open theirs back, and then we expressly 'X' out and
-                // close their camera. If they close and re-open ours, we don't
-                // want to auto-open their cam back because we had previously
-                // closed out of it manually.
-                //
-                // Usernames are added when we 'X' out of their video,
-                // and usernames are removed when we expressly re-open their
-                // video (e.g., by clicking their Who List video button).
-                expresslyClosed: {},  // bool per username
-
-                // Rate limit pre-emptive boots: to avoid a user coming thru the entire Who List
-                // and kicking everyone off their cam when they aren't even watching yet.
-                preemptBootRateLimit: {
-                    counter: 0,       // how many people have they booted so far
-                    cooldownAt: null, // Date for cooldown once they reach the threshold
-
-                    // Configuration settings:
-                    maxFreeBoots: 10, // first 10 are free
-                    cooldownTTL: 60, // then must wait this number of seconds before each boot
-                }
-            },
-
             // Chat history.
             channels: {
                 // There will be values here like:
@@ -404,7 +260,7 @@ export default {
             messageHistoryModal: {
                 visible: false,
             },
-        }
+        };
     },
     mounted() {
         this.setupConfig(); // localSettings persisted settings
@@ -491,13 +347,6 @@ export default {
         }
     },
     watch: {
-        "webcam.videoScale": function () {
-            document.querySelectorAll(".video-feeds > .feed").forEach(node => {
-                node.style.width = null;
-                node.style.height = null;
-            });
-            LocalStorage.set('videoScale', this.webcam.videoScale);
-        },
         whoSort() {
             LocalStorage.set('whoSort', this.whoSort);
         },
@@ -530,66 +379,6 @@ export default {
             document.title = this.pageTitleUnreadPrefix + this.pageTitle;
         },
 
-        // Webcam preferences that the user can edit while live.
-        "webcam.nsfw": function () {
-            this.webcam.wasServerNSFW = false;
-            LocalStorage.set('videoExplicit', this.webcam.nsfw);
-            if (this.webcam.active) {
-                this.sendMe();
-            }
-
-            // Respect users who have the NonExplicit cam setting checked, and close
-            // their cameras when you toggle to red.
-            this.unWatchNonExplicitVideo();
-        },
-        "webcam.mutual": function () {
-            LocalStorage.set('videoMutual', this.webcam.mutual);
-            if (this.webcam.active) {
-                this.sendMe();
-            }
-        },
-        "webcam.mutualOpen": function () {
-            LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
-            if (this.webcam.active) {
-                this.sendMe();
-            }
-        },
-        "webcam.nonExplicit": function () {
-            LocalStorage.set('videoNonExplicit', this.webcam.nonExplicit);
-
-            // Turn off NSFW if this is on.
-            if (this.webcam.nonExplicit && this.webcam.nsfw) {
-                // Note: this toggle will also sendMe().
-                this.webcam.nsfw = false;
-            } else if (this.webcam.active) {
-                this.sendMe();
-            }
-        },
-        "webcam.vipOnly": function () {
-            LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
-            if (this.webcam.active) {
-                this.sendMe();
-            }
-
-            // If we have toggled this while already connected to people:
-            // Hang up on any that have a mutual viewership requirement, if
-            // they can not see our VIP-only camera.
-            for (let username of Object.keys(this.WebRTC.pc)) {
-                if (this.whoMap[username] != undefined && this.isVideoNotAllowed(this.whoMap[username])) {
-                    this.closeVideo(username);
-                }
-            }
-        },
-        "webcam.rememberExpresslyClosed": function () {
-            LocalStorage.set('rememberExpresslyClosed', this.webcam.rememberExpresslyClosed);
-        },
-        "webcam.autoMuteWebcams": function () {
-            LocalStorage.set('autoMuteWebcams', this.webcam.autoMuteWebcams);
-        },
-        "webcam.autoshare": function () {
-            LocalStorage.set('videoAutoShare', this.webcam.autoshare);
-        },
-
         // Misc preference watches
         "prefs.joinMessages": function () {
             LocalStorage.set('joinMessages', this.prefs.joinMessages);
@@ -620,7 +409,7 @@ export default {
         },
         "prefs.theme": function() {
             LocalStorage.set('theme', this.prefs.theme);
-        },
+        }
     },
     computed: {
         connected() {
@@ -776,27 +565,6 @@ export default {
             // Returns if the current user has VIP rights.
             return this.jwt.claims.vip;
         },
-        myVideoFlag() {
-            // Compute the current user's video status flags.
-            let status = 0;
-            if (!this.webcam.active) return 0; // unset all flags if not active now
-            if (this.webcam.active) status |= this.VideoFlag.Active;
-            if (this.webcam.muted) status |= this.VideoFlag.Muted;
-            if (this.webcam.nsfw && this.config.permitNSFW) status |= this.VideoFlag.NSFW;
-            if (this.webcam.mutual) status |= this.VideoFlag.MutualRequired;
-            if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen;
-            if (this.webcam.nonExplicit) status |= this.VideoFlag.NonExplicit;
-            if (this.webcam.vipOnly && this.isVIP) status |= this.VideoFlag.VipOnly;
-            return status;
-        },
-        anyVideosOpen() {
-            // Return if any videos are open.
-            return this.webcam.active || this.numVideosOpen > 0;
-        },
-        numVideosOpen() {
-            // Return the count of other peoples videos we have open.
-            return Object.keys(this.WebRTC.streams).length;
-        },
         activeChannels() {
             // List of current channels, unread indicators etc.
             let result = [];
@@ -906,70 +674,6 @@ export default {
                     result = result.reverse();
             }
 
-            // Default ordering from ChatServer = a-z
-            return result;
-        },
-        sortedWatchingList() {
-            let result = [];
-            for (let username of Object.keys(this.webcam.watching)) {
-                let user = this.getUser(username);
-                result.push(user);
-            }
-
-            switch (this.whoSort) {
-                case "broadcasting":
-                    result.sort((a, b) => {
-                        return (b.video & this.VideoFlag.Active) - (a.video & this.VideoFlag.Active);
-                    });
-                    break;
-                case "nsfw":
-                    result.sort((a, b) => {
-                        let left = (a.video & (this.VideoFlag.Active | this.VideoFlag.NSFW)),
-                            right = (b.video & (this.VideoFlag.Active | this.VideoFlag.NSFW));
-                        return right - left;
-                    });
-                    break;
-                case "blue":
-                    result.sort((a, b) => {
-                        let left = (a.video & this.VideoFlag.Active) ? (a.video & this.VideoFlag.NSFW ? 1 : 2) : 0,
-                            right = (b.video & this.VideoFlag.Active) ? (b.video & this.VideoFlag.NSFW ? 1 : 2) : 0;
-                        return right - left;
-                    });
-                    break;
-                case "status":
-                    result.sort((a, b) => {
-                        if (a.status === b.status) return 0;
-                        return b.status < a.status ? -1 : 1;
-                    });
-                    break;
-                case "op":
-                    result.sort((a, b) => {
-                        return b.op - a.op;
-                    });
-                    break;
-                case "emoji":
-                    result.sort((a, b) => {
-                        if (a.emoji === b.emoji) return 0;
-                        return a.emoji < b.emoji ? -1 : 1;
-                    })
-                    break;
-                case "login":
-                    result.sort((a, b) => {
-                        return b.loginAt - a.loginAt;
-                    });
-                    break;
-                case "gender":
-                    result.sort((a, b) => {
-                        if (a.gender === b.gender) return 0;
-                        let left = a.gender || 'z',
-                            right = b.gender || 'z';
-                        return left < right ? -1 : 1;
-                    })
-                    break;
-                case "z-a":
-                    result = result.reverse();
-            }
-
             // Default ordering from ChatServer = a-z
             return result;
         },
@@ -1579,36 +1283,6 @@ export default {
             }
         },
 
-        // Send a video request to access a user's camera.
-        sendOpen(username) {
-            this.DebugChannel(`[WebRTC] Sending "open" message to ask to connect to: ${username}`);
-            this.client.send({
-                action: "open",
-                username: username,
-            });
-        },
-        sendBoot(username) {
-            this.client.send({
-                action: "boot",
-                username: username,
-            });
-        },
-        sendUnboot(username) {
-            this.client.send({
-                action: "unboot",
-                username: username,
-            });
-        },
-        onOpen(msg) {
-            // Response for the opener to begin WebRTC connection.
-            this.DebugChannel(`[WebRTC] Received "open" echo from chat server to connect to: ${msg.username}`);
-            this.startWebRTC(msg.username, true);
-        },
-        onRing(msg) {
-            // Request from a viewer to see our broadcast.
-            this.DebugChannel(`[WebRTC] Received "ring" message from chat server to share my video with: ${msg.username}`);
-            this.startWebRTC(msg.username, false);
-        },
         onUserExited(msg) {
             // A user has logged off the server. Clean up any WebRTC connections.
             this.closeVideo(msg.username);
@@ -1773,292 +1447,6 @@ export default {
             }
         },
 
-        /**
-         * WebRTC concerns.
-         */
-
-        // Start WebRTC with the other username.
-        startWebRTC(username, isOfferer) {
-            // this.ChatClient(`Begin WebRTC with ${username}.`);
-            let pc = new RTCPeerConnection(configuration);
-
-            // Store uni-directional PeerConnections:
-            // - If we are reading video from the other (offerer)
-            // - If we are sending video to the other (answerer)
-            if (this.WebRTC.pc[username] == undefined) {
-                this.WebRTC.pc[username] = {};
-            }
-            if (isOfferer) {
-                this.WebRTC.pc[username].offerer = pc;
-            } else {
-                this.WebRTC.pc[username].answerer = pc;
-            }
-
-            this.DebugChannel(`[WebRTC] Starting WebRTC with: ${username} (I am the: ${isOfferer ? 'offerer' : 'answerer'})`);
-
-            // Keep a pointer to the current channel being established (for candidate/SDP).
-            this.WebRTC.pc[username].connecting = pc;
-
-            // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
-            // message to the other peer through the signaling server.
-            pc.onicecandidate = event => {
-                if (event.candidate) {
-                    this.client.send({
-                        action: "candidate",
-                        username: username,
-                        candidate: JSON.stringify(event.candidate),
-                    });
-                }
-            };
-
-            // If the user is offerer let the 'negotiationneeded' event create the offer.
-            if (isOfferer) {
-                pc.onnegotiationneeded = () => {
-                    pc.createOffer().then(this.localDescCreated(pc, username)).catch(this.ChatClient);
-                };
-            }
-
-            // When a remote stream arrives.
-            pc.ontrack = event => {
-                // If we were not expecting to receive this video (e.g. somebody is requesting our
-                // cam and sending their video on the offer, but we don't want to auto-open their
-                // video, so don't use it)
-                if (!isOfferer && !this.webcam.mutualOpen) {
-                    this.DebugChannel(`[WebRTC] The offerer ${username} gave us a video, but we don't auto-open their video.`);
-                    return;
-                }
-
-                const stream = event.streams[0];
-
-                // Had we expressly closed this user's cam before? e.g.: if we have auto-open their
-                // video enabled, and we 'X' out, and they reopen ours - we may be receiving their
-                // video right now. If we had expressly closed it, do not accept their video
-                // and hang up the connection.
-                if (this.WebRTC.expresslyClosed[username] && this.webcam.rememberExpresslyClosed) {
-                    if (!isOfferer) {
-                        return;
-                    }
-                }
-
-                // A booted admin?
-                if (this.isBootedAdmin(username)) {
-                    return;
-                }
-
-                // We've received a video! If we had an "open camera spinner timeout",
-                // clear it before it expires.
-                if (this.WebRTC.openTimeouts[username] != undefined) {
-                    clearTimeout(this.WebRTC.openTimeouts[username]);
-                    delete (this.WebRTC.openTimeouts[username]);
-                }
-
-                // Do we already have it?
-                // this.ChatClient(`Received a video stream from ${username}.`);
-                if (this.WebRTC.streams[username] == undefined ||
-                    this.WebRTC.streams[username].id !== stream.id) {
-                    this.WebRTC.streams[username] = stream;
-                }
-
-                window.requestAnimationFrame(() => {
-                    let $ref = document.getElementById(`videofeed-${username}`);
-                    $ref.srcObject = stream;
-
-                    // Are we muting their videos by default?
-                    if (this.webcam.autoMuteWebcams) {
-                        this.WebRTC.muted[username] = true;
-                        $ref.muted = true;
-                    }
-
-                    // Set up the speech detector.
-                    this.initSpeakingEvents(username, $ref);
-                });
-
-                // Inform them they are being watched.
-                this.sendWatch(username, true);
-
-                // Set a mute video handler to detect freezes.
-                stream.getVideoTracks().forEach(videoTrack => {
-                    let freezeDetected = () => {
-                        this.DebugChannel("[WebRTC] A video freeze was detected from:", username);
-                        // Wait some seconds to see if the stream has recovered on its own
-                        setTimeout(() => {
-                            // Flag it as likely frozen.
-                            if (videoTrack.muted) {
-                                this.WebRTC.frozenStreamDetected[username] = true;
-                            }
-                        }, 7500); // 7.5s
-                    };
-
-                    videoTrack.onmute = freezeDetected;
-
-                    // Double check for frozen streams on an interval.
-                    if (this.WebRTC.frozenStreamInterval[username]) {
-                        // Clear the existing interval (e.g. audio+video track sets up the
-                        // interval twice right now, don't overwrite and lose the interval)
-                        clearInterval(this.WebRTC.frozenStreamInterval[username]);
-                    }
-                    this.WebRTC.frozenStreamInterval[username] = setInterval(() => {
-                        if (videoTrack.muted) freezeDetected();
-                    }, 3000);
-                });
-            };
-
-            // ANSWERER: add our video to the connection so that the offerer (the one who
-            // clicked on our video icon to watch us) can receive it.
-            if (!isOfferer && this.webcam.active) {
-                this.DebugChannel(`[WebRTC] Answerer: attaching my video to the connection with: ${username}`);
-                let stream = this.webcam.stream;
-                stream.getTracks().forEach(track => {
-                    pc.addTrack(track, stream)
-                });
-            }
-
-            // OFFERER: If we were already broadcasting our own video, and the answerer
-            // has the "auto-open your video" setting enabled, attach our video to the initial
-            // offer right now.
-            if (isOfferer) {
-                let shouldOfferVideo = (
-                    (this.whoMap[username].video & this.VideoFlag.MutualOpen) // They auto-open us
-                    && this.webcam.active             // Our camera is active (to add it)
-                    && !this.isBooted(username)       // We had not booted them off ours before
-                    && !this.isMutedUser(username)    // We had not muted them before
-
-                    // If our webcam is NSFW and the viewer prefers not to see explicit,
-                    // do not send our camera on this offer.
-                    && (!this.webcam.nsfw || !(this.whoMap[username].video & this.VideoFlag.NonExplicit))
-                );
-
-                // Attach our video on the outgoing offer, so that on the answerer's side our
-                // local video pops up on their screen.
-                if (shouldOfferVideo) {
-                    this.DebugChannel(`[WebRTC] Offerer: I am attaching my video to the connection with: ${username}`)
-                    let stream = this.webcam.stream;
-                    stream.getTracks().forEach(track => {
-                        pc.addTrack(track, stream)
-                    });
-                } else {
-                    // We aren't offering video, but still want to receive audio/video. Add a receive-only
-                    // transceiver to this offer. NOTE: in the legacy WebRTC API we could put offerToReceiveVideo
-                    // and offerToReceiveAudio in the createOffer() call later, but the modern WebRTC has removed
-                    // those options and Safari only supports the modern way. Adding a receive-only transceiver
-                    // here is the modern way to do it that Safari will be happy with.
-                    this.DebugChannel(`[WebRTC] Offer: I am attaching a receive-only video/audio transceiver to the connection with: ${username}`);
-                    pc.addTransceiver('video', { direction: 'recvonly' });
-                    pc.addTransceiver('audio', { direction: 'recvonly' });
-                }
-            }
-
-            // If we are the offerer, begin the connection.
-            if (isOfferer) {
-                this.DebugChannel(`[WebRTC] Offerer: create the offer and send it to ${username}`);
-                pc.createOffer({
-                    offerToReceiveVideo: true,
-                    offerToReceiveAudio: true,
-                }).then(this.localDescCreated(pc, username)).catch(this.ChatClient);
-            }
-        },
-
-        // Common handler function for
-        localDescCreated(pc, username) {
-            return (desc) => {
-                pc.setLocalDescription(desc).then(() => {
-                    this.DebugChannel(`[WebRTC] Local description created; sending SDP message to ${username}:<br><br>${JSON.stringify(pc.localDescription)}`);
-                    this.client.send({
-                        action: "sdp",
-                        username: username,
-                        description: JSON.stringify(pc.localDescription),
-                    });
-                }).catch(e => {
-                    console.error(`Error sending WebRTC negotiation message (SDP): ${e}`);
-                });
-            };
-        },
-
-        // Handle inbound WebRTC signaling messages proxied by the websocket.
-        onCandidate(msg) {
-            if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
-                return;
-            }
-            let pc = this.WebRTC.pc[msg.username].connecting;
-
-            // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
-            // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
-            // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
-            // about at all). Re-parse the JSON stringified object here.
-            let candidate = JSON.parse(msg.candidate);
-
-            this.DebugChannel(`[WebRTC] ICE candidate from ${msg.username}:<br><br>${msg.candidate}`);
-
-            // Add the new ICE candidate.
-            pc.addIceCandidate(candidate).catch(e => {
-                console.error(`addIceCandidate: ${e}`);
-            });
-        },
-        onSDP(msg) {
-            if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
-                return;
-            }
-            let pc = this.WebRTC.pc[msg.username].connecting;
-
-            this.DebugChannel(`[WebRTC] Received SDP message from ${msg.username}:<br><br>${msg.description}`);
-
-            // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
-            // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
-            // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
-            // about at all). Re-parse the JSON stringified object here.
-            let message = JSON.parse(msg.description);
-
-            // Add the new ICE candidate.
-            pc.setRemoteDescription(new RTCSessionDescription(message)).then(() => {
-                this.DebugChannel(`[WebRTC] <strong>setRemoteDescription</strong> called back OK!<br>Our pc.remoteDescription.type is: ${pc.remoteDescription.type}`);
-                // When receiving an offer let's answer it.
-                if (pc.remoteDescription.type === 'offer') {
-                    this.DebugChannel(`[WebRTC] Answerer: create SDP answer message for ${msg.username}`);
-                    pc.createAnswer().then(this.localDescCreated(pc, msg.username)).catch(this.ChatClient);
-                } else {
-                    this.DebugChannel(`[WebRTC] pc.remoteDescription.type was not 'offer', we do not need to create an SDP Answer message.`);
-                }
-            }).catch(this.DebugChannel);
-        },
-        onWatch(msg) {
-            // The user has our video feed open now.
-            if (this.isBootedAdmin(msg.username)) return;
-
-            // Notify in chat if this was the first watch (viewer may send multiple per each track they received)
-            if (this.prefs.watchNotif && this.webcam.watching[msg.username] != true) {
-                this.ChatServer(
-                    `<strong>${msg.username}</strong> is now watching your camera.`,
-                );
-            }
-
-            this.webcam.watching[msg.username] = true;
-            this.playSound("Watch");
-        },
-        onUnwatch(msg) {
-            // The user has closed our video feed.
-            delete (this.webcam.watching[msg.username]);
-            this.playSound("Unwatch");
-            this.cleanupPeerConnections();
-        },
-        sendWatch(username, watching) {
-            // Send the watch or unwatch message to backend.
-            this.client.send({
-                action: watching ? "watch" : "unwatch",
-                username: username,
-            });
-        },
-        isWatching(username) {
-            // Is the current user watching this target user?
-            if (this.WebRTC.pc[username] != undefined && this.WebRTC.streams[username] != undefined) {
-                return true;
-            }
-            return false;
-        },
-        isWatchingMe(username) {
-            // Return whether the user is watching your camera
-            return this.webcam.watching[username] === true;
-        },
-
         /**
          * Front-end web app concerns.
          */
@@ -2209,14 +1597,6 @@ export default {
             if (!username) return false;
             return this.whoMap[username] != undefined && this.whoMap[username].dnd;
         },
-        isUsernameCamNSFW(username) {
-            // returns true if the username is broadcasting and NSFW, false otherwise.
-            // (used for the color coding of their nickname on their video box - so assumed they are broadcasting)
-            if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.NSFW) {
-                return true;
-            }
-            return false;
-        },
         leaveDM(channel) {
             // Validate we're in a DM currently.
             if (channel.indexOf("@") !== 0) return;
@@ -2278,1126 +1658,6 @@ export default {
             return false;
         },
 
-        // Start broadcasting my webcam.
-        // - force=true to skip the NSFW modal prompt (this param is passed by the button in that modal)
-        // - changeCamera=true to re-negotiate WebRTC connections with a new camera device (invoked by the Settings modal)
-        startVideo({ force = false, changeCamera = false }) {
-            if (this.webcam.busy) return;
-
-            // Is a moderation rule in place?
-            if (this.jwt.rules.IsNoBroadcastRule) {
-                return this.modalAlert({
-                    title: "Broadcasting video is not allowed for you",
-                    message: this.config.strings.ModRuleErrorNoBroadcast || "A chat room moderation rule is currently in place which restricts your ability to broadcast your webcam.\n\nPlease contact a chat operator for more information.",
-                });
-            }
-
-            // Before they go on cam the first time, ATTEMPT to get their device names.
-            // - If they had never granted permission, we won't get the names of
-            //   the devices and no big deal.
-            // - If they had given permission before, we can present a nicer experience
-            //   for them and enumerate their devices before they go on originally.
-            if (!changeCamera && !force) {
-                // Initial broadcast: did they select device IDs?
-                this.getDevices();
-            }
-
-            // Show the broadcast settings modal the first time.
-            if (!force) {
-                this.nsfwModalCast.visible = true;
-                return;
-            }
-
-            let mediaParams = {
-                audio: true,
-                video: {
-                    width: { ideal: WebcamWidth, max: WebcamMaxWidth },
-                    height: { ideal: WebcamHeight, max: WebcamMaxHeight },
-                },
-            };
-
-            // Name the specific devices chosen by the user.
-            if (this.webcam.videoDeviceID) {
-                mediaParams.video.deviceId = { exact: this.webcam.videoDeviceID };
-            }
-            if (this.webcam.audioDeviceID) {
-                mediaParams.audio = {
-                    deviceId: { exact: this.webcam.audioDeviceID },
-                };
-            }
-
-            this.webcam.busy = true;
-            navigator.mediaDevices.getUserMedia(mediaParams).then(stream => {
-                this.webcam.active = true;
-                this.webcam.elem.srcObject = stream;
-                this.webcam.stream = stream;
-
-                // Save our mutuality prefs.
-                LocalStorage.set('videoMutual', this.webcam.mutual);
-                LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
-                LocalStorage.set('videoAutoMute', this.webcam.autoMute);
-                LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
-                LocalStorage.set('videoExplicit', this.webcam.nsfw);
-
-                // Auto-mute our camera? Two use cases:
-                // 1. The user marked their cam as muted but then changed video device,
-                //    so we set the mute to match their preference as shown on their UI.
-                // 2. The user opted to auto-mute their camera from the get to on their
-                //    NSFW broadcast modal popup.
-                if (this.webcam.muted || this.webcam.autoMute) {
-                    // Mute their audio tracks.
-                    this.webcam.stream.getAudioTracks().forEach(track => {
-                        track.enabled = false;
-                    });
-
-                    // Set their front-end mute toggle to match (in case of autoMute).
-                    this.webcam.muted = true;
-                }
-
-                // If we started as Explicit, hang up on any NonExplicit camera we had open.
-                this.unWatchNonExplicitVideo();
-
-                // Tell backend the camera is ready.
-                this.sendMe();
-
-                // Record the selected device IDs.
-                this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId;
-                this.webcam.audioDeviceID = stream.getAudioTracks()[0].getSettings().deviceId;
-
-                // For debugging: log to the debug channel what the chosen resolution is for the user.
-                let videoSettings = stream.getVideoTracks()[0].getSettings();
-                this.DebugChannel(`navigator.getUserMedia(): chosen video resolution is ${videoSettings.width}x${videoSettings.height}`);
-
-                // Collect video and audio devices to let the user change them in their settings.
-                this.getDevices().then(() => {
-                    // Store their names on localStorage in case we can reselect them by name
-                    // on the user's next visit.
-                    this.storePreferredDeviceNames();
-                });
-
-                // If we have changed devices, reconnect everybody's WebRTC channels for your existing watchers.
-                if (changeCamera) {
-                    this.updateWebRTCStreams();
-                }
-
-                // Begin dark video detection as soon as the video is ready to capture frames.
-                this.webcam.elem.addEventListener("canplaythrough", this.initDarkVideoDetection);
-
-                // Begin monitoring for speaking events.
-                this.initSpeakingEvents(this.username, this.webcam.elem);
-            }).catch(err => {
-                this.ChatClient(`Webcam error: ${err}<br><br>Please see the <a href="/about#troubleshooting">troubleshooting guide</a> for help.`);
-            }).finally(() => {
-                this.webcam.busy = false;
-            })
-        },
-        getDevices() {
-            // Collect video and audio devices.
-            if (!navigator.mediaDevices?.enumerateDevices) {
-                console.log("enumerateDevices() not supported.");
-                return;
-            }
-
-            this.webcam.gettingDevices = true;
-
-            return navigator.mediaDevices.enumerateDevices().then(devices => {
-                this.webcam.videoDevices = [];
-                this.webcam.audioDevices = [];
-                devices.forEach(device => {
-                    // If we can't get the device label, disregard it.
-                    // It can happen if the user has not yet granted permission.
-                    if (!device.label) {
-                        return;
-                    };
-
-                    if (device.kind === 'videoinput') {
-                        // console.log(`Video device ${device.deviceId} ${device.label}`);
-                        this.webcam.videoDevices.push({
-                            id: device.deviceId,
-                            label: device.label,
-                        });
-                    } else if (device.kind === 'audioinput') {
-                        // console.log(`Audio device ${device.deviceId} ${device.label}`);
-                        this.webcam.audioDevices.push({
-                            id: device.deviceId,
-                            label: device.label,
-                        });
-                    }
-                });
-
-                // If we don't have the user's current active device IDs (e.g., they have
-                // not yet started their video the first time), see if we can pre-select
-                // by their preferred device names.
-                if (!this.webcam.videoDeviceID && this.webcam.preferredDeviceNames.video) {
-                    for (let dev of this.webcam.videoDevices) {
-                        if (dev.label === this.webcam.preferredDeviceNames.video) {
-                            this.webcam.videoDeviceID = dev.id;
-                        }
-                    }
-                }
-                if (!this.webcam.audioDeviceID && this.webcam.preferredDeviceNames.audio) {
-                    for (let dev of this.webcam.audioDevices) {
-                        if (dev.label === this.webcam.preferredDeviceNames.audio) {
-                            this.webcam.audioDeviceID = dev.id;
-                        }
-                    }
-                }
-            }).catch(err => {
-                this.ChatClient(`Error listing your cameras and microphones: ${err.name}: ${err.message}`);
-            }).finally(() => {
-                // In the settings modal, let the spinner spin for a moment.
-                setTimeout(() => {
-                    this.webcam.gettingDevices = false;
-                }, 500);
-            })
-        },
-        storePreferredDeviceNames() {
-            // This function looks up the names of the user's selected video/audio device.
-            // When they come back later, IF we are able to enumerate devices before they
-            // go on for the first time, we might pre-select their last device by name.
-            // NOTE: on iOS apparently device IDs shuffle every single time so only names
-            // may be reliable!
-            if (this.webcam.videoDeviceID) {
-                for (let dev of this.webcam.videoDevices) {
-                    if (dev.id === this.webcam.videoDeviceID && dev.label) {
-                        this.webcam.preferredDeviceNames.video = dev.label;
-                    }
-                }
-            }
-
-            if (this.webcam.audioDeviceID) {
-                for (let dev of this.webcam.audioDevices) {
-                    if (dev.id === this.webcam.audioDeviceID && dev.label) {
-                        this.webcam.preferredDeviceNames.audio = dev.label;
-                    }
-                }
-            }
-
-            // Put them on localStorage.
-            LocalStorage.set('preferredDeviceNames', this.webcam.preferredDeviceNames);
-        },
-
-        // The 'Explicit' button at the top of the page: toggle the user's NSFW setting but
-        // with some smarts in case the user was just marked NSFW by an admin.
-        topNavExplicitButtonClicked() {
-            if (this.webcam.wasServerNSFW) {
-                this.webcam.wasServerNSFW = false;
-                this.ChatClient(
-                    `Notice: your webcam was already marked as "Explicit" recently by the chat server.<br><br>` +
-                    `If you were recently notified that a chat moderator has marked your camera as 'explicit' (red) for you, then ` +
-                    `you do not need to do anything: your camera is marked Explicit already. Please leave it as Explicit if you are ` +
-                    `being sexual on camera.<br><br>` +
-                    `If you really mean to <strong>remove</strong> the Explicit label (and turn your camera 'blue'), then click on the ` +
-                    `Explicit button at the top of the page one more time to confirm.`,
-                );
-                return;
-            }
-            this.webcam.nsfw = !this.webcam.nsfw;
-        },
-
-        // Replace your video/audio streams for your watchers (on camera changes)
-        updateWebRTCStreams() {
-            console.log("Re-negotiating video and audio channels to your watchers.");
-            for (let username of Object.keys(this.WebRTC.pc)) {
-                let pc = this.WebRTC.pc[username];
-                if (pc.answerer != undefined) {
-                    let oldTracks = pc.answerer.getSenders();
-                    let newTracks = this.webcam.stream.getTracks();
-
-                    // Remove and replace the tracks.
-                    for (let old of oldTracks) {
-                        if (old.track.kind === 'audio') {
-                            for (let replace of newTracks) {
-                                if (replace.kind === 'audio') {
-                                    old.replaceTrack(replace);
-                                }
-                            }
-                        }
-                        else if (old.track.kind === 'video') {
-                            for (let replace of newTracks) {
-                                if (replace.kind === 'video') {
-                                    old.replaceTrack(replace);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        },
-
-        // Begin connecting to someone else's webcam.
-        openVideoByUsername(username, force) {
-            if (this.whoMap[username] != undefined) {
-                this.openVideo(this.whoMap[username], force);
-                return;
-            }
-            this.ChatClient("Couldn't open video by username: not found.");
-        },
-        setSkipNSFWModal() {
-            // Set the "don't show again" on NSFW modal.
-            LocalStorage.set("skip-nsfw-modal", true);
-        },
-        openVideo(user, force) {
-            // Close the NSFW warning modal if it was open.
-            this.nsfwModalView.visible = false;
-
-            if (user.username === this.username) {
-                this.ChatClient("You can already see your own webcam.");
-                return;
-            }
-
-            // Operator safety when hidden.
-            if (this.status === 'hidden') {
-                this.ChatClient("Your chat status is currently set to 'hidden' and you would break the illusion by opening this camera.");
-                return;
-            }
-
-            // A chat moderation rule?
-            if (this.jwt.rules.IsNoVideoRule) {
-                return this.modalAlert({
-                    title: "Videos are not available to you",
-                    message: this.config.strings.ModRuleErrorNoVideo || "A chat room moderation rule is currently in place which restricts your ability to watch webcams.\n\n" +
-                        "Please contact a chat operator for more information.",
-                });
-            }
-
-            // If we have muted the target, we shouldn't view their video.
-            if (this.isMutedUser(user.username) && !this.isOp) {
-                this.ChatClient(`You have muted <strong>${user.username}</strong> and so should not see their camera.`);
-                return;
-            }
-
-            // If we have booted the target off our cam, we shouldn't view their video.
-            if (this.isBooted(user.username) && !this.isOp) {
-                this.ChatClient(`You had kicked <strong>${user.username}</strong> off your camera and so it wouldn't be right to still watch their camera.`);
-                return;
-            }
-
-            // Is the target user NSFW? Go thru the modal.
-            let dontShowAgain = LocalStorage.get("skip-nsfw-modal") === true;
-            if ((user.video & this.VideoFlag.NSFW) && !dontShowAgain && !force) {
-                this.nsfwModalView.user = user;
-                this.nsfwModalView.visible = true;
-                return;
-            }
-
-            // If the local user had expressly closed this user's camera before, forget
-            // this action because the user now is expressly OPENING this camera on purpose.
-            delete (this.WebRTC.expresslyClosed[user.username]);
-
-            // Debounce so we don't spam too much for the same user.
-            if (this.WebRTC.debounceOpens[user.username]) return;
-            this.WebRTC.debounceOpens[user.username] = true;
-            setTimeout(() => {
-                delete (this.WebRTC.debounceOpens[user.username]);
-            }, 5000);
-
-            // Camera is already open? Then disconnect the connection.
-            if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.pc[user.username].offerer != undefined) {
-                this.DebugChannel(`OpenVideo(${user.username}): already had a connection open, closing it first.`);
-                this.closeVideo(user.username, "offerer");
-            }
-
-            // If this user is NonExplicit and your camera is red...
-            let theirVideo = this.whoMap[user.username].video;
-            if (this.webcam.active && this.webcam.nsfw && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NonExplicit)) {
-                this.ChatClient(
-                    `<strong>${user.username}</strong> prefers not to have Explicit cammers watch their video, and your camera is currently marked as Explicit.`
-                );
-                return;
-            }
-
-            // Conversely: if we are NonExplicit we should not open NSFW videos.
-            if (this.webcam.active && this.webcam.nonExplicit && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NSFW)) {
-                this.ChatClient(
-                    `You have said you do not want to see Explicit videos and <strong>${user.username}</strong> has an Explicit camera.`
-                );
-                return;
-            }
-
-            // If this user requests mutual viewership...
-            if (this.isVideoNotAllowed(user) && !this.isOp) {
-                this.ChatClient(
-                    `<strong>${user.username}</strong> has requested that you should share your own camera too before opening theirs.`
-                );
-                return;
-            }
-
-            // Set a timeout: the video icon becomes a spinner and we wait a while
-            // to see if the connection went thru. This gives the user feedback and we
-            // can avoid a spammy 'ChatClient' notification message.
-            if (this.WebRTC.openTimeouts[user.username] != undefined) {
-                clearTimeout(this.WebRTC.openTimeouts[user.username]);
-                delete (this.WebRTC.openTimeouts[user.username]);
-            }
-            this.WebRTC.openTimeouts[user.username] = setTimeout(() => {
-                this.ChatClient(
-                    `There was an error opening <strong>${user.username}</strong>'s camera.`,
-                );
-                delete (this.WebRTC.openTimeouts[user.username]);
-            }, 10000);
-
-            // Send the ChatServer 'open' command.
-            this.sendOpen(user.username);
-
-            // Responsive CSS -> go to chat panel to see the camera
-            this.openChatPanel();
-        },
-        closeVideo(username, name) {
-            // Clean up any lingering camera freeze states.
-            delete (this.WebRTC.frozenStreamDetected[username]);
-            if (this.WebRTC.frozenStreamInterval[username]) {
-                clearInterval(this.WebRTC.frozenStreamInterval[username]);
-                delete (this.WebRTC.frozenStreamInterval[username]);
-            }
-
-            if (name === "offerer") {
-                // We are closing another user's video stream.
-                delete (this.WebRTC.streams[username]);
-                delete (this.WebRTC.muted[username]);
-                delete (this.WebRTC.poppedOut[username]);
-
-                // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
-                // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
-                // camera" option set, and our viewer sent their video on their open request, and they still have
-                // our camera open, do not close the connection so we don't freeze their side of the video.
-                if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].offerer != undefined) {
-                    if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
-                        console.log(`OFFERER(${username}): Close video locally only: do not hang up the connection.`);
-                    } else {
-                        this.WebRTC.pc[username].offerer.close();
-                        delete (this.WebRTC.pc[username]);
-                    }
-                }
-
-                // Inform backend we have closed it.
-                this.sendWatch(username, false);
-                this.cleanupPeerConnections();
-                return;
-            } else if (name === "answerer") {
-                // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
-                // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
-                // camera" option set, and our viewer sent their video on their open request, and they still have
-                // our camera open, do not close the connection so we don't freeze their side of the video.
-                if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].answerer != undefined) {
-                    if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
-                        console.log(`ANSWERER(${username}): Close video locally only: do not hang up the connection.`);
-                    } else {
-                        this.WebRTC.pc[username].answerer.close();
-                        delete (this.WebRTC.pc[username]);
-                    }
-                }
-                this.cleanupPeerConnections();
-                return;
-            }
-
-            // A user has logged off the server. Clean up any WebRTC connections.
-            delete (this.WebRTC.streams[username]);
-            delete (this.webcam.watching[username]);
-            if (this.WebRTC.pc[username] != undefined) {
-                if (this.WebRTC.pc[username].offerer) {
-                    this.WebRTC.pc[username].offerer.close();
-                }
-                if (this.WebRTC.pc[username].answerer) {
-                    this.WebRTC.pc[username].answerer.close();
-                }
-                delete (this.WebRTC.pc[username]);
-                delete (this.WebRTC.muted[username]);
-                delete (this.WebRTC.poppedOut[username]);
-            }
-
-            // Clean up any lingering camera freeze states.
-            delete (this.WebRTC.frozenStreamDetected[username]);
-            if (this.WebRTC.frozenStreamInterval[username]) {
-                clearInterval(this.WebRTC.frozenStreamInterval[username]);
-                delete (this.WebRTC.frozenStreamInterval[username]);
-            }
-
-            // Inform backend we have closed it.
-            this.sendWatch(username, false);
-            this.cleanupPeerConnections();
-        },
-        expresslyCloseVideo(username, name) {
-            // Like closeVideo but communicates the user's intent to expressly
-            // close the video for a user. e.g. they clicked the 'X' icon to
-            // close it out. As opposed to a user went off camera and were closed
-            // out automatically.
-            this.WebRTC.expresslyClosed[username] = true;
-            return this.closeVideo(username, name);
-        },
-        closeOpenVideos() {
-            // Close all videos open of other users.
-            for (let username of Object.keys(this.WebRTC.streams)) {
-                this.closeVideo(username, "offerer");
-            }
-        },
-        cleanupPeerConnections() {
-            // Helper function to check and clean up WebRTC PeerConnections.
-            //
-            // This is fired on Unwatch and CloseVideo events, to double check
-            // which videos the local user has open + who online is watching our
-            // video, to close out any lingering WebRTC connections.
-            for (let username of Object.keys(this.WebRTC.pc)) {
-                let pc = this.WebRTC.pc[username];
-
-                // Is their video on our screen?
-                if (this.WebRTC.streams[username] != undefined) {
-                    continue;
-                }
-
-                // Are they watching us?
-                if (this.isWatchingMe(username)) {
-                    continue;
-                }
-
-                // Are they an admin that we booted?
-                if (this.isBootedAdmin(username)) {
-                    continue;
-                }
-
-                // The WebRTC connections should be closed out.
-                if (pc.answerer != undefined) {
-                    console.log("Clean up WebRTC answerer connection with " + username);
-                    pc.answerer.close();
-                    delete (this.WebRTC.pc[username]);
-                }
-                if (pc.offerer != undefined) {
-                    console.log("Clean up WebRTC offerer connection with " + username);
-                    pc.offerer.close();
-                    delete (this.WebRTC.pc[username]);
-                }
-            }
-        },
-        muteAllVideos() {
-            // Mute the mic of all open videos.
-            let count = 0;
-            for (let username of Object.keys(this.WebRTC.streams)) {
-                if (this.WebRTC.muted[username]) continue;
-
-                // Find the <video> tag to mute it.
-                this.WebRTC.muted[username] = true;
-                let $ref = document.getElementById(`videofeed-${username}`);
-                if ($ref) {
-                    $ref.muted = this.WebRTC.muted[username];
-                }
-
-                count++;
-            }
-
-            if (count > 0) {
-                this.ChatClient(`You have muted the audio on ${count} video${count === 1 ? '' : 's'}.`);
-            }
-        },
-        unMutualVideo() {
-            // If we had our camera on to watch a video of someone who wants mutual cameras,
-            // and then we turn ours off: we should unfollow the ones with mutual video.
-            if (this.webcam.active) return;
-            for (let row of this.whoList) {
-                let username = row.username;
-                if ((row.video & this.VideoFlag.MutualRequired) && this.WebRTC.pc[username] != undefined) {
-                    this.closeVideo(username);
-                }
-            }
-        },
-        unWatchNonExplicitVideo() {
-            // If we are watching cameras with the NonExplicit setting, and our camera has become
-            // explicit, excuse ourselves from their watch list.
-            if (this.webcam.nsfw) {
-                for (let username of Object.keys(this.WebRTC.streams)) {
-                    let user = this.whoMap[username];
-
-                    // Our video is Explicit and theirs is NonExplicit.
-                    if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
-                        this.closeVideo(username);
-                    }
-                }
-            }
-
-            // Conversely: if we are NonExplicit we do not watch Explicit videos.
-            if (this.webcam.nonExplicit) {
-                for (let username of Object.keys(this.WebRTC.streams)) {
-                    let user = this.whoMap[username];
-
-                    if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
-                        this.closeVideo(username);
-                    }
-                }
-            }
-        },
-        webcamIconClass(user) {
-            // Return the icon to show on a video button.
-            // - Usually a video icon
-            // - May be a crossed-out video if isVideoNotAllowed
-            // - Or an eyeball for cameras already opened
-            // - Or a spinner if we are actively trying to open the video
-
-            // Current user sees their own self camera always.
-            if (user.username === this.username && this.webcam.active) {
-                return 'fa-eye';
-            }
-
-            // In spinner mode? (Trying to open the video)
-            if (this.WebRTC.openTimeouts[user.username] != undefined) {
-                return 'fa-spinner fa-spin';
-            }
-
-            // Already opened?
-            if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.streams[user.username] != undefined) {
-                return 'fa-eye';
-            }
-
-            if (this.isVideoNotAllowed(user)) return 'fa-video-slash';
-            return 'fa-video';
-        },
-        isUsernameOnCamera(username) {
-            return this.whoMap[username]?.video & VideoFlag.Active;
-        },
-        webcamButtonClass(username) {
-            // This styles the convenient video button that appears in the header bar
-            // of DM threads if your chat partner is on camera.
-            let video = this.whoMap[username].video;
-
-            if (!(video & VideoFlag.Active)) {
-                return "";
-            }
-
-            if (video & VideoFlag.NSFW) {
-                return "is-danger";
-            }
-
-            return "is-link";
-        },
-        isVideoNotAllowed(user) {
-            // Returns whether the video button to open a user's cam will be not allowed (crossed out)
-
-            // If the user is under the NoVideo rule, always cross it out.
-            if (this.jwt.rules.IsNoVideoRule) return true;
-
-            // Mutual video sharing is required on this camera, and ours is not active
-            if ((user.video & this.VideoFlag.Active) && (user.video & this.VideoFlag.MutualRequired)) {
-                // A nuance to the mutual video required: if we DO have our cam on, but ours is VIP only, and the
-                // user we want to watch can't see that our cam is on, then honor their wishes.
-                if (this.webcam.active && this.isVIP && this.webcam.vipOnly && this.whoMap[user.username] != undefined && !this.whoMap[user.username].vip) {
-                    // Our cam is active, but the non-VIP user won't see it on, so they won't expect
-                    // us to be able to open their camera.
-                    return true;
-                }
-
-                if (!this.webcam.active) {
-                    // Our cam is not broadcasting, but they requested it should be: not allowed.
-                    return true;
-                }
-            }
-
-            // We have muted them and it wouldn't be appropriate to still watch their video but not get their messages.
-            if (this.isMutedUser(user.username) || this.isBooted(user.username)) {
-                return true;
-            }
-
-            // This person is NonExplicit and our camera is Explicit.
-            if (this.webcam.active && this.webcam.nsfw && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
-                return true;
-            }
-
-            // Conversely: if we are NonExplicit we should not be able to watch Explicit videos.
-            if (this.webcam.active && this.webcam.nonExplicit && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
-                return true;
-            }
-
-            return false;
-        },
-
-        // Functions to help users 'nudge' each other into marking their cams as Explicit.
-        sendNudgeNsfw(username) {
-            // Send a nudge to the username. This is triggered by their profile modal: if the user is
-            // on blue camera, others on chat can anonymously nudge them into marking their camera as red.
-
-            // Nudges are a special kind of emoji reaction (so we could add this feature in frontend only without
-            // a server side deployment to support it).
-            this.client.send({
-                action: 'react',
-                msgID: ReactNudgeNsfwMessageID,
-                message: username,
-            });
-        },
-        onNudgeNsfw(msg) {
-            // Handler for a nudge NSFW react message.
-            if (msg.message !== this.username) {
-                return; // Not for us
-            }
-
-            // Sanity check that we are on blue camera.
-            if (!this.webcam.active || this.webcam.nsfw) {
-                return;
-            }
-
-            // Only show this if we have at least 2 watchers.
-            let watchers = Object.keys(this.webcam.watching).length;
-            if (watchers < 2) {
-                return;
-            }
-
-            // Show a nice message on chat.
-            this.ChatServer(
-                `<strong>Your webcam is <span class="has-text-danger">Hot!</span></strong> <i class="fa fa-fire has-text-danger"></i><br><br>` +
-                    `Somebody who is watching your camera thinks that your webcam should be tagged as <span class="has-text-danger"><i class="fa fa-fire mx-1"></i> Explicit</span>.<br><br>` +
-                    `In case you forgot to do so, please click on the '<i class="fa fa-fire has-text-danger"></i> Explicit' button at the top of the page to turn your camera 'red.' Thank you! <i class="fa fa-heart has-text-danger"></i>`,
-            );
-        },
-
-        // Show who watches our video.
-        showViewers() {
-            // TODO: for now, ChatClient is our bro.
-            let users = Object.keys(this.webcam.watching);
-            if (users.length === 0) {
-                this.ChatClient("There is currently nobody viewing your camera.");
-            } else {
-                this.ChatClient("Your current webcam viewers are:<br><br>" + users.join(", "));
-            }
-
-            // Also focus the Watching list.
-            this.whoTab = 'watching';
-
-            // TODO: if mobile, show the panel - this width matches
-            // the media query in chat.css
-            if (screen.width < 1024) {
-                this.openWhoPanel();
-            }
-        },
-
-        // Boot someone off your video.
-        bootUser(username) {
-            // Un-boot?
-            if (this.isBooted(username)) {
-                this.modalConfirm({
-                    title: "Unboot user",
-                    icon: "fa fa-user-xmark",
-                    message: `Allow ${username} to watch your webcam again?`
-                }).then(() => {
-                    this.sendUnboot(username);
-                    delete (this.WebRTC.booted[username]);
-                })
-                return;
-            }
-
-            // Check if they are currently rate limited from pre-emptive boots of folks
-            // who are not even watching their camera yet.
-            if (this.rateLimitPreemptiveBoots(username, false)) return;
-
-            // Boot them off our webcam.
-            this.modalConfirm({
-                title: "Boot user",
-                icon: "fa fa-user-xmark",
-                message: `Kick ${username} off your camera? This will also prevent them ` +
-                    `from seeing that your camera is active for the remainder of your ` +
-                    `chat session.`
-            }).then(() => {
-                // Ping their rate limiter.
-                if (this.rateLimitPreemptiveBoots(username, true)) return;
-
-                this.doBootUser(username);
-
-                this.ChatClient(
-                    `You have booted ${username} off your camera. They will no longer be able ` +
-                    `to connect to your camera, or even see that your camera is active at all -- ` +
-                    `to them it appears as though you had turned yours off.<br><br>This will be ` +
-                    `in place for the remainder of your time in chat, until you log off. ` +
-                    `<strong>Note:</strong> If you wish to undo this, you can allow them to watch again ` +
-                    `by opening their profile card.`
-                );
-            });
-        },
-        doBootUser(username) {
-            // Inner function to actually boot a user, bypassing any confirm or rate limit modals.
-            this.sendBoot(username);
-            this.WebRTC.booted[username] = true;
-
-            // Close the WebRTC peer connections.
-            if (this.WebRTC.pc[username] != undefined) {
-                this.closeVideo(username);
-            }
-
-            // Remove them from our list.
-            delete (this.webcam.watching[username]);
-        },
-        isBooted(username) {
-            return this.WebRTC.booted[username] === true;
-        },
-        isBootedAdmin(username) {
-            return (this.WebRTC.booted[username] === true || this.muted[username] === true) &&
-                this.whoMap[username] != undefined &&
-                this.whoMap[username].op;
-        },
-        rateLimitPreemptiveBoots(username, ping=false) {
-            // Rate limit abusive pre-emptive booting behavior: if the target is not even currently watching
-            // your camera, limit how many and how frequently you can boot them off.
-            //
-            // Returns true if limited, false otherwise.
-
-            let cooldownAt = this.WebRTC.preemptBootRateLimit.cooldownAt,
-                cooldownTTL = this.WebRTC.preemptBootRateLimit.cooldownTTL,
-                now = new Date().getTime();
-
-            if (!this.isWatchingMe(username)) {
-                // Within the 'free' boot limits?
-                if (this.WebRTC.preemptBootRateLimit.counter < this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
-                    if (!ping) return false;
-                    this.WebRTC.preemptBootRateLimit.counter++;
-                }
-
-                // Begin enforcing a cooldown TTL after a while.
-                if (this.WebRTC.preemptBootRateLimit.counter >= this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
-
-                    // Currently throttled?
-                    if (cooldownAt !== null) {
-                        if (now < cooldownAt) {
-                            let delta = cooldownAt - now;
-                            this.modalAlert({
-                                title: "You are doing that too often",
-                                message: "You have been pre-emptively booting an unusual number of people who weren't even watching your camera yet.\n\n" +
-                                    `Please wait ${cooldownTTL} seconds between any additional pre-emptive boots.\n\n` +
-                                    `You may try again after ${delta/1000} seconds.`,
-                            });
-                            return true;
-                        }
-                    }
-
-                    // Refresh the timer on pings.
-                    if (ping) {
-                        this.WebRTC.preemptBootRateLimit.cooldownAt = now + (cooldownTTL * 1000);
-                    }
-                }
-            }
-
-            return false;
-        },
-
-        // Stop broadcasting.
-        stopVideo() {
-            this.stopDarkVideoDetection();
-
-            // Close all WebRTC sessions.
-            for (let username of Object.keys(this.WebRTC.pc)) {
-                this.closeVideo(username, "answerer");
-            }
-
-            // Hang up on mutual cameras.
-            this.unMutualVideo();
-
-            // Close the local camera devices completely.
-            this.webcam.stream.getTracks().forEach(track => {
-                track.stop();
-            });
-
-            // Reset all front-end state.
-            this.webcam.elem.srcObject = null;
-            this.webcam.stream = null;
-            this.webcam.active = false;
-            this.webcam.muted = false;
-            this.whoTab = "online";
-
-            // Tell backend our camera state.
-            this.sendMe();
-        },
-
-        // Mute my microphone if broadcasting.
-        muteMe() {
-            this.webcam.muted = !this.webcam.muted;
-            this.webcam.stream.getAudioTracks().forEach(track => {
-                track.enabled = !this.webcam.muted;
-            });
-
-            // Communicate our local mute to others.
-            this.sendMe();
-        },
-        isSourceMuted(username) {
-            // See if the webcam broadcaster muted their mic at the source
-            if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.Muted) {
-                return true;
-            }
-            return false;
-        },
-        isMuted(username) {
-            return this.WebRTC.muted[username] === true;
-        },
-        muteVideo(username) {
-            this.WebRTC.muted[username] = !this.isMuted(username);
-
-            // Find the <video> tag to mute it.
-            let $ref = document.getElementById(`videofeed-${username}`);
-            if ($ref) {
-                $ref.muted = this.WebRTC.muted[username];
-            }
-        },
-        setVideoVolume(username, volume) {
-            // Set the volume on their video.
-            let $ref = document.getElementById(`videofeed-${username}`);
-            if ($ref) {
-                $ref.volume = volume / 100;
-            }
-        },
-
-        // Pop out a user's video.
-        popoutVideo(username) {
-            this.WebRTC.poppedOut[username] = !this.WebRTC.poppedOut[username];
-
-            // If not popped out, reset CSS positioning.
-            window.requestAnimationFrame(this.makeDraggableVideos);
-        },
-
-        // Outside of Vue, attach draggable video scripts to DOM.
-        makeDraggableVideos() {
-            let $panel = document.querySelector("#video-feeds");
-
-            interact('.popped-in').unset();
-
-            // Give popped out videos to the root of the DOM so they can
-            // be dragged anywhere on the page.
-            window.requestAnimationFrame(() => {
-                document.querySelectorAll('.popped-out').forEach(node => {
-                    // $panel.removeChild(node);
-                    document.body.appendChild(node);
-                });
-
-                document.querySelectorAll('.popped-in').forEach(node => {
-                    // document.body.removeChild(node);
-                    $panel.appendChild(node);
-                    node.style.top = null;
-                    node.style.left = null;
-                    node.setAttribute('data-x', 0);
-                    node.setAttribute('data-y', 0);
-                });
-            });
-
-            interact('.popped-out').draggable({
-                // enable inertial throwing
-                inertia: true,
-                // keep the element within the area of it's parent
-                modifiers: [
-                    interact.modifiers.restrictRect({
-                        restriction: 'parent',
-                        endOnly: true
-                    })
-                ],
-
-                listeners: {
-                    // call this function on every dragmove event
-                    move(event) {
-                        let target = event.target;
-                        let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
-                        let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
-
-                        target.style.top = `${y}px`;
-                        target.style.left = `${x}px`;
-
-                        target.setAttribute('data-x', x);
-                        target.setAttribute('data-y', y);
-                    },
-
-                    // call this function on every dragend event
-                    end(event) {
-                        console.log(
-                            'moved a distance of ' +
-                            (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
-                                Math.pow(event.pageY - event.y0, 2) | 0))
-                                .toFixed(2) + 'px')
-                    }
-                }
-            }).resizable({
-                edges: { left: true, right: true, bottom: true, right: true },
-                listeners: {
-                    move(event) {
-                        var target = event.target
-                        var x = (parseFloat(target.getAttribute('data-x')) || 0)
-                        var y = (parseFloat(target.getAttribute('data-y')) || 0)
-
-                        // update the element's style
-                        target.style.width = event.rect.width + 'px'
-                        target.style.height = event.rect.height + 'px'
-
-                        // translate when resizing from top or left edges
-                        x += event.deltaRect.left
-                        y += event.deltaRect.top
-
-                        target.style.top = `${y}px`;
-                        target.style.left = `${x}px`;
-
-                        target.setAttribute('data-x', x)
-                        target.setAttribute('data-y', y)
-                    }
-                },
-                modifiers: [
-                    // keep the edges inside the parent
-                    interact.modifiers.restrictEdges({
-                        outer: 'parent'
-                    }),
-
-                    // minimum size
-                    interact.modifiers.restrictSize({
-                        min: { width: 100, height: 50 }
-                    })
-                ],
-
-                inertia: true
-            })
-        },
-
-        // Webcam "is speaking" functions.
-        initSpeakingEvents(username, element) {
-            // element is the <video> element, with the video stream
-            // (whether from getUserMedia or WebRTC) on srcObject.
-
-            let stream = element.srcObject,
-                feedElem = element.closest('div.feed'),
-                options = {},
-                speechEvents = hark(stream, options);
-
-            speechEvents.on('speaking', () => {
-                feedElem.classList.add('is-speaking');
-                this.WebRTC.speaking[username] = true;
-            });
-
-            speechEvents.on('stopped_speaking', () => {
-                feedElem.classList.remove('is-speaking');
-                this.WebRTC.speaking[username] = false;
-            });
-        },
-
-        // Dark video detection.
-        initDarkVideoDetection() {
-            if (this.webcam.darkVideo.canvas === null) {
-                let canvas = document.querySelector("#darkVideoCanvas"),
-                    ctx = canvas.getContext('2d');
-                canvas.width = WebcamWidth;
-                canvas.height = WebcamHeight;
-                this.webcam.darkVideo.canvas = canvas;
-                this.webcam.darkVideo.ctx = ctx;
-            }
-
-            // Reset the dark frame counter.
-            this.webcam.darkVideo.tooDarkFrames = 0;
-
-            if (this.webcam.darkVideo.interval !== null) {
-                clearInterval(this.webcam.darkVideo.interval);
-            }
-            this.webcam.darkVideo.interval = setInterval(() => {
-                this.darkVideoInterval();
-            }, 5000);
-        },
-        stopDarkVideoDetection() {
-            if (this.webcam.darkVideo.interval !== null) {
-                clearInterval(this.webcam.darkVideo.interval);
-            }
-
-            // Remove the canplaythrough event, it will be re-added if the user restarts their cam.
-            this.webcam.elem.removeEventListener("canplaythrough", this.initDarkVideoDetection);
-        },
-        darkVideoInterval() {
-            if (!this.webcam.active) { // safety
-                this.stopDarkVideoDetection();
-                return;
-            }
-
-            // Take a screenshot from the user's local webcam.
-            let canvas = this.webcam.darkVideo.canvas,
-                ctx = this.webcam.darkVideo.ctx;
-            ctx.drawImage(this.webcam.elem, 0, 0, canvas.width, canvas.height);
-
-            // Debugging: export the screenshot to a data URI.
-            let img = canvas.toDataURL('image/jpeg');
-            this.webcam.darkVideo.lastImage = img;
-
-            // Get average RGB value.
-            let rgb = this.getAverageRGB(ctx);
-            if (rgb === null) {
-                return;
-            }
-
-            this.webcam.darkVideo.lastAverage = rgb;
-            this.webcam.darkVideo.lastAverageColor = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`;
-
-            // If they are exempt from the dark video rule, do not check their camera color.
-            if (this.jwt.rules.IsNoDarkVideoRule) return;
-
-            // If the average total color is below the threshold (too dark of a video).
-            let averageBrightness = Math.floor((rgb[0] + rgb[1] + rgb[2]) / 3);
-            if (averageBrightness < this.webcam.darkVideo.threshold) {
-
-                // Count for how many frames their camera is too dark.
-                this.webcam.darkVideo.tooDarkFrames++;
-
-                // After too long, cut their camera.
-                if (this.webcam.darkVideo.tooDarkFrames >= this.webcam.darkVideo.tooDarkFramesLimit) {
-                    this.stopVideo();
-                    this.ChatClient(`
-                        Your webcam was too dark to see anything and has been turned off.<br><br>
-                        <strong>Note:</strong> if your camera did not look dark to you and you believe there
-                        may have been an error, please
-                        <button type="button" onclick="SendMessage('/debug-dark-video')" class="button is-small is-link is-outlined">click here</button> to see
-                        diagnostic information and contact a chat room moderator for assistance.
-                    `);
-                }
-            } else {
-                this.webcam.darkVideo.tooDarkFrames = 0;
-            }
-        },
-        getAverageRGB(ctx) {
-            // Helper function to compute the average color of a <canvas>.
-            // Ref: https://stackoverflow.com/a/2541680
-            const blockSize = 16; // only visit every N pixels
-            let img = null,
-                rgb = [0, 0, 0];
-
-            try {
-                img = ctx.getImageData(0, 0, WebcamWidth, WebcamHeight);
-            } catch(e) {
-                // Not supported.
-                return null;
-            }
-
-            let length = img.data.length,
-                i = 0,
-                count = 0,
-                firstColor = [],
-                allSame = true;
-            while ((i += blockSize * 4) < length) {
-                count++;
-                let thisColor = [
-                    img.data[i],
-                    img.data[i+1],
-                    img.data[i+2]
-                ]
-
-                rgb[0] += thisColor[0];
-                rgb[1] += thisColor[1];
-                rgb[2] += thisColor[2];
-
-                // Also check whether every sampled pixel is THE SAME color,
-                // to detect users broadcasting a solid (bright) color.
-                if (firstColor.length === 0) {
-                    firstColor = [ rgb[0], rgb[1], rgb[2] ];
-                } else if (allSame) {
-                    if (firstColor[0] !== thisColor[0] ||
-                        firstColor[1] !== thisColor[1] ||
-                        firstColor[2] !== thisColor[2]
-                    ) {
-                        allSame = false;
-                    }
-                }
-            }
-
-            // If all sampled colors were the same solid image: red flag!
-            if (allSame) {
-                return [0, 0, 0];
-            }
-
-            rgb[0] = Math.floor(rgb[0]/count);
-            rgb[1] = Math.floor(rgb[1]/count);
-            rgb[2] = Math.floor(rgb[2]/count);
-
-            return rgb;
-        },
-
         initHistory(channel) {
             if (this.channels[channel] == undefined) {
                 this.channels[channel] = {
@@ -3758,35 +2018,6 @@ export default {
             }
         },
 
-        // Scale the video zoom setting up or down.
-        scaleVideoSize(bigger) {
-            // Find the current size index.
-            let currentSize = 0;
-            for (let option of this.webcam.videoScaleOptions) {
-                if (option[0] === this.webcam.videoScale) {
-                    break;
-                }
-                currentSize++;
-            }
-
-            // Adjust it.
-            if (bigger) {
-                currentSize++;
-            } else {
-                currentSize--;
-            }
-
-            // Constrain it.
-            if (currentSize < 0) {
-                currentSize = 0;
-            } else if (currentSize >= this.webcam.videoScaleOptions.length) {
-                currentSize = this.webcam.videoScale.length - 1;
-            }
-
-            // Set it.
-            this.webcam.videoScale = this.webcam.videoScaleOptions[currentSize][0];
-        },
-
         /**
          * Sound effect concerns.
          */
@@ -3808,7 +2039,9 @@ export default {
                 } else {
                     this.config.sounds.audioContext = window.AudioContext || window.webkitAudioContext;
                 }
-            } catch { }
+            } catch (e) {
+                console.error("setupSounds:", e);
+            }
 
             if (!this.config.sounds.audioContext) {
                 console.error("Couldn't set up AudioContext! No sound effects will be supported.");
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index 4597d41..41cfcb8 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -3,6 +3,7 @@ import EmojiPicker from 'vue3-emoji-picker';
 import LocalStorage from '../lib/LocalStorage';
 import ScamDetection from './ScamDetection.vue';
 import VideoFlag from '../lib/VideoFlag';
+import WebRTC from '../lib/WebRTC';
 import 'vue3-emoji-picker/css';
 
 export default {
@@ -118,45 +119,10 @@ export default {
 
         // TODO: make DRY, copied from WhoListRow.
         videoButtonClass() {
-            let result = "";
-
-            // VIP background if their cam is set to VIPs only
-            if ((this.user.video & VideoFlag.Active) && (this.user.video & VideoFlag.VipOnly)) {
-                result = "has-background-vip ";
-            }
-
-            // Colors and/or cursors.
-            if ((this.user.video & VideoFlag.Active) && (this.user.video & VideoFlag.NSFW)) {
-                result += "is-danger is-outlined";
-            } else if ((this.user.video & VideoFlag.Active) && !(this.user.video & VideoFlag.NSFW)) {
-                result += "is-link is-outlined";
-            } else if (this.isVideoNotAllowed) {
-                result += "cursor-notallowed";
-            }
-
-            return result;
+            return WebRTC.videoButtonClass(this.user, this.isVideoNotAllowed);
         },
         videoButtonTitle() {
-            // Mouse-over title text for the video button.
-            let parts = ["Open video stream"];
-
-            if (this.user.video & VideoFlag.MutualRequired) {
-                parts.push("mutual video sharing required");
-            }
-
-            if (this.user.video & VideoFlag.MutualOpen) {
-                parts.push("will auto-open your video");
-            }
-
-            if (this.user.video & VideoFlag.VipOnly) {
-                parts.push(`${this.vipConfig.Name} only`);
-            }
-
-            if (this.user.video & VideoFlag.NonExplicit) {
-                parts.push("prefers non-explicit video");
-            }
-
-            return parts.join("; ");
+            return WebRTC.videoButtonTitle(this.user);
         },
     },
     methods: {
diff --git a/src/components/WhoListRow.vue b/src/components/WhoListRow.vue
index 31f6991..ad11b60 100644
--- a/src/components/WhoListRow.vue
+++ b/src/components/WhoListRow.vue
@@ -1,5 +1,6 @@
 <script>
 import VideoFlag from '../lib/VideoFlag';
+import WebRTC from '../lib/WebRTC';
 
 export default {
     props: {
@@ -48,45 +49,10 @@ export default {
             return "";
         },
         videoButtonClass() {
-            let result = "";
-
-            // VIP background if their cam is set to VIPs only
-            if ((this.user.video & VideoFlag.Active) && (this.user.video & VideoFlag.VipOnly)) {
-                result = "has-background-vip ";
-            }
-
-            // Colors and/or cursors.
-            if ((this.user.video & VideoFlag.Active) && (this.user.video & VideoFlag.NSFW)) {
-                result += "is-danger is-outlined";
-            } else if ((this.user.video & VideoFlag.Active) && !(this.user.video & VideoFlag.NSFW)) {
-                result += "is-link is-outlined";
-            } else if (this.isVideoNotAllowed) {
-                result += "cursor-notallowed";
-            }
-
-            return result;
+            return WebRTC.videoButtonClass(this.user, this.isVideoNotAllowed);
         },
         videoButtonTitle() {
-            // Mouse-over title text for the video button.
-            let parts = ["Open video stream"];
-
-            if (this.user.video & VideoFlag.MutualRequired) {
-                parts.push("mutual video sharing required");
-            }
-
-            if (this.user.video & VideoFlag.MutualOpen) {
-                parts.push("will auto-open your video");
-            }
-
-            if (this.user.video & VideoFlag.VipOnly) {
-                parts.push(`${this.vipConfig.Name} only`);
-            }
-
-            if (this.user.video & VideoFlag.NonExplicit) {
-                parts.push("prefers non-explicit video");
-            }
-
-            return parts.join("; ");
+            return WebRTC.videoButtonTitle(this.user);
         },
         avatarURL() {
             if (this.user.avatar) {
diff --git a/src/lib/WebRTC.js b/src/lib/WebRTC.js
new file mode 100644
index 0000000..2cb571d
--- /dev/null
+++ b/src/lib/WebRTC.js
@@ -0,0 +1,1890 @@
+/*
+WebRTC and Webcam related functionality for BareRTC.
+
+Most methods here are called by App.vue with some funcs reused by sub-components, e.g.
+for showing the webcam video buttons on the Who List and other places.
+*/
+
+import interact from 'interactjs';
+import hark from 'hark';
+
+import VideoFlag from './VideoFlag.js';
+import LocalStorage from './LocalStorage.js';
+
+// WebRTC configuration.
+const configuration = {
+    iceServers: TURN.URLs.map(val => {
+        let row = {
+            urls: val,
+        };
+
+        if (val.indexOf('turn:') === 0) {
+            row.username = TURN.Username;
+            row.credential = TURN.Credential;
+        }
+
+        return row;
+    })
+};
+
+// Webcam sizes: ideal is 640x480 as this is the most friendly for end users, e.g. if everyone
+// broadcasted at 720p users on weaker hardware would run into problems sooner.
+const WebcamWidth = 640,
+    WebcamHeight = 480;
+
+// For webcams that can not transmit at 640x480 (e.g. ultra widescreen), allow them to choose
+// the nearest resolution but no more than 720p.
+const WebcamMaxWidth = 1280,
+    WebcamMaxHeight = 720;
+
+const ReactNudgeNsfwMessageID = -451;
+
+// An API surface layer of functions.
+class WebRTCController {
+    // The caller configures:
+    // - nsfw (bool): the BareRTC PermitNSFW setting, which controls some status options.
+    // - isAdmin (func): return a boolean if the current user is operator.
+    // - currentStatus (func): return the name of the user's current status.
+    constructor() {
+
+    }
+
+    // Vue mixin for the main App.vue
+    getMixin() {
+        return {
+            data: this.getData(),
+            watch: this.getWatches(),
+            computed: this.getComputed(),
+            methods: this.getMethods(),
+        }
+    }
+
+    // Vue.js data mixin for App.vue to store all our webcam-related state.
+    getData() {
+        return {
+            // The user's local webcam and settings.
+            webcam: {
+                busy: false,
+                active: false,
+                elem: null,   // <video id="localVideo"> element
+                stream: null, // MediaStream object
+                muted: false, // our outgoing mic is muted, not by default
+                autoMute: false, // mute our mic automatically when going live (user option)
+                nsfw: false,  // user has flagged their camera to be NSFW
+                mutual: false, // user wants viewers to share their own videos
+                mutualOpen: false, // user wants to open video mutually
+                nonExplicit: false, // user prefers not to see explicit cameras
+                vipOnly: false, // only show camera to fellow VIP users
+                rememberExpresslyClosed: true,  // remember cams we expressly closed
+                autoMuteWebcams: false, // auto-mute other cameras' audio channels
+
+                // My watermark image for screen recording protection.
+                // Set after login in setWatermark.
+                watermark: null,
+
+                // Who all is watching me? map of users.
+                watching: {},
+
+                // Scaling setting for the videos drawer, so the user can
+                // embiggen the webcam sizes so a suitable size.
+                videoScale: "",
+                videoScaleOptions: [
+                    ["", "Default size"],
+                    ["x1", "50% larger videos"],
+                    ["x2", "2x larger videos"],
+                    ["x3", "3x larger videos"],
+                    ["x4", "4x larger videos (not recommended)"],
+                ],
+
+                // Available cameras and microphones for the Settings modal.
+                gettingDevices: false, // busy indicator for refreshing devices
+                videoDevices: [],
+                videoDeviceID: null,
+                audioDevices: [],
+                audioDeviceID: null,
+
+                // Advanced: automatically share your webcam when the page loads.
+                autoshare: false,
+
+                // After we get a device selected, remember it (by name) so that we
+                // might hopefully re-select it by default IF we are able to enumerate
+                // devices before they go on camera the first time.
+                preferredDeviceNames: {
+                    video: null,
+                    audio: null,
+                },
+
+                // Detect dark video streams.
+                darkVideo: {
+                    canvas: null,    // <canvas> element to screenshot video into
+                    ctx: null,       // Canvas context2d
+                    interval: null,  // interval loop
+                    lastImage: null, // data: uri of last screenshot taken
+                    lastAverage: [], // last average RGB color
+                    lastAverageColor: "rgba(255, 0, 255, 1)",
+                    tooDarkFrames: 0,  // frame counter for dark videos
+                    tooDarkFramesLimit: 4, // frames in a row of too dark before cut
+
+                    // Configuration thresholds: how dark is too dark? (0-255)
+                    // NOTE: 0=disable the feature.
+                    threshold: 10,
+                },
+            },
+
+            // WebRTC sessions with other users.
+            WebRTC: {
+                // Streams per username.
+                streams: {},
+                muted: {}, // muted bool per username
+                booted: {}, // booted bool per username
+                poppedOut: {}, // popped-out video per username
+                speaking: {}, // speaking boolean per username
+
+                // RTCPeerConnections per username.
+                pc: {},
+
+                // Video stream freeze detection.
+                frozenStreamInterval: {}, // map usernames to intervals
+                frozenStreamDetected: {}, // map usernames to bools
+
+                // Debounce connection attempts since now every click = try to connect.
+                debounceOpens: {}, // map usernames to bools
+
+                // Timeouts for open camera attempts. e.g.: when you click to view
+                // a camera, the icon changes to a spinner for a few seconds to see
+                // whether the video goes on to open.
+                openTimeouts: {}, // map usernames to timeouts
+
+                // Map of usernames whose cameras were expressly closed by us.
+                // Example: we have mutualOpen enabled, someone opens our cam
+                // so we open theirs back, and then we expressly 'X' out and
+                // close their camera. If they close and re-open ours, we don't
+                // want to auto-open their cam back because we had previously
+                // closed out of it manually.
+                //
+                // Usernames are added when we 'X' out of their video,
+                // and usernames are removed when we expressly re-open their
+                // video (e.g., by clicking their Who List video button).
+                expresslyClosed: {},  // bool per username
+
+                // Rate limit pre-emptive boots: to avoid a user coming thru the entire Who List
+                // and kicking everyone off their cam when they aren't even watching yet.
+                preemptBootRateLimit: {
+                    counter: 0,       // how many people have they booted so far
+                    cooldownAt: null, // Date for cooldown once they reach the threshold
+
+                    // Configuration settings:
+                    maxFreeBoots: 10, // first 10 are free
+                    cooldownTTL: 60, // then must wait this number of seconds before each boot
+                }
+            },
+
+            /* For internal use only */
+            // VideoFlag: VideoFlag,
+            // LocalStorage: LocalStorage,
+        };
+    }
+
+    // Watchers to be imported for App.vue
+    getWatches() {
+        return {
+            "webcam.videoScale": function () {
+                document.querySelectorAll(".video-feeds > .feed").forEach(node => {
+                    node.style.width = null;
+                    node.style.height = null;
+                });
+                LocalStorage.set('videoScale', this.webcam.videoScale);
+            },
+
+            // Webcam preferences that the user can edit while live.
+            "webcam.nsfw": function () {
+                this.webcam.wasServerNSFW = false;
+                LocalStorage.set('videoExplicit', this.webcam.nsfw);
+                if (this.webcam.active) {
+                    this.sendMe();
+                }
+
+                // Respect users who have the NonExplicit cam setting checked, and close
+                // their cameras when you toggle to red.
+                this.unWatchNonExplicitVideo();
+            },
+            "webcam.mutual": function () {
+                LocalStorage.set('videoMutual', this.webcam.mutual);
+                if (this.webcam.active) {
+                    this.sendMe();
+                }
+            },
+            "webcam.mutualOpen": function () {
+                LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
+                if (this.webcam.active) {
+                    this.sendMe();
+                }
+            },
+            "webcam.nonExplicit": function () {
+                LocalStorage.set('videoNonExplicit', this.webcam.nonExplicit);
+
+                // Turn off NSFW if this is on.
+                if (this.webcam.nonExplicit && this.webcam.nsfw) {
+                    // Note: this toggle will also sendMe().
+                    this.webcam.nsfw = false;
+                } else if (this.webcam.active) {
+                    this.sendMe();
+                }
+            },
+            "webcam.vipOnly": function () {
+                LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
+                if (this.webcam.active) {
+                    this.sendMe();
+                }
+
+                // If we have toggled this while already connected to people:
+                // Hang up on any that have a mutual viewership requirement, if
+                // they can not see our VIP-only camera.
+                for (let username of Object.keys(this.WebRTC.pc)) {
+                    if (this.whoMap[username] != undefined && this.isVideoNotAllowed(this.whoMap[username])) {
+                        this.closeVideo(username);
+                    }
+                }
+            },
+            "webcam.rememberExpresslyClosed": function () {
+                LocalStorage.set('rememberExpresslyClosed', this.webcam.rememberExpresslyClosed);
+            },
+            "webcam.autoMuteWebcams": function () {
+                LocalStorage.set('autoMuteWebcams', this.webcam.autoMuteWebcams);
+            },
+            "webcam.autoshare": function () {
+                LocalStorage.set('videoAutoShare', this.webcam.autoshare);
+            },
+        };
+    }
+
+    // Vue.js mixin for the App.vue
+    getComputed() {
+        return {
+            myVideoFlag() {
+                // Compute the current user's video status flags.
+                let status = 0;
+                if (!this.webcam.active) return 0; // unset all flags if not active now
+                if (this.webcam.active) status |= this.VideoFlag.Active;
+                if (this.webcam.muted) status |= this.VideoFlag.Muted;
+                if (this.webcam.nsfw && this.config.permitNSFW) status |= this.VideoFlag.NSFW;
+                if (this.webcam.mutual) status |= this.VideoFlag.MutualRequired;
+                if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen;
+                if (this.webcam.nonExplicit) status |= this.VideoFlag.NonExplicit;
+                if (this.webcam.vipOnly && this.isVIP) status |= this.VideoFlag.VipOnly;
+                return status;
+            },
+            anyVideosOpen() {
+                // Return if any videos are open.
+                return this.webcam.active || this.numVideosOpen > 0;
+            },
+            numVideosOpen() {
+                // Return the count of other peoples videos we have open.
+                return Object.keys(this.WebRTC.streams).length;
+            },
+            sortedWatchingList() {
+                let result = [];
+                for (let username of Object.keys(this.webcam.watching)) {
+                    let user = this.getUser(username);
+                    result.push(user);
+                }
+    
+                switch (this.whoSort) {
+                    case "broadcasting":
+                        result.sort((a, b) => {
+                            return (b.video & this.VideoFlag.Active) - (a.video & this.VideoFlag.Active);
+                        });
+                        break;
+                    case "nsfw":
+                        result.sort((a, b) => {
+                            let left = (a.video & (this.VideoFlag.Active | this.VideoFlag.NSFW)),
+                                right = (b.video & (this.VideoFlag.Active | this.VideoFlag.NSFW));
+                            return right - left;
+                        });
+                        break;
+                    case "blue":
+                        result.sort((a, b) => {
+                            let left = (a.video & this.VideoFlag.Active) ? (a.video & this.VideoFlag.NSFW ? 1 : 2) : 0,
+                                right = (b.video & this.VideoFlag.Active) ? (b.video & this.VideoFlag.NSFW ? 1 : 2) : 0;
+                            return right - left;
+                        });
+                        break;
+                    case "status":
+                        result.sort((a, b) => {
+                            if (a.status === b.status) return 0;
+                            return b.status < a.status ? -1 : 1;
+                        });
+                        break;
+                    case "op":
+                        result.sort((a, b) => {
+                            return b.op - a.op;
+                        });
+                        break;
+                    case "emoji":
+                        result.sort((a, b) => {
+                            if (a.emoji === b.emoji) return 0;
+                            return a.emoji < b.emoji ? -1 : 1;
+                        })
+                        break;
+                    case "login":
+                        result.sort((a, b) => {
+                            return b.loginAt - a.loginAt;
+                        });
+                        break;
+                    case "gender":
+                        result.sort((a, b) => {
+                            if (a.gender === b.gender) return 0;
+                            let left = a.gender || 'z',
+                                right = b.gender || 'z';
+                            return left < right ? -1 : 1;
+                        })
+                        break;
+                    case "z-a":
+                        result = result.reverse();
+                }
+    
+                // Default ordering from ChatServer = a-z
+                return result;
+            },
+        };
+    }
+
+    // Vue.js mixin for the App.vue
+    getMethods() {
+        return {
+            // Start WebRTC with the other username.
+            startWebRTC(username, isOfferer) {
+                // this.ChatClient(`Begin WebRTC with ${username}.`);
+                let pc = new RTCPeerConnection(configuration);
+
+                // Store uni-directional PeerConnections:
+                // - If we are reading video from the other (offerer)
+                // - If we are sending video to the other (answerer)
+                if (this.WebRTC.pc[username] == undefined) {
+                    this.WebRTC.pc[username] = {};
+                }
+                if (isOfferer) {
+                    this.WebRTC.pc[username].offerer = pc;
+                } else {
+                    this.WebRTC.pc[username].answerer = pc;
+                }
+
+                this.DebugChannel(`[WebRTC] Starting WebRTC with: ${username} (I am the: ${isOfferer ? 'offerer' : 'answerer'})`);
+
+                // Keep a pointer to the current channel being established (for candidate/SDP).
+                this.WebRTC.pc[username].connecting = pc;
+
+                // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
+                // message to the other peer through the signaling server.
+                pc.onicecandidate = event => {
+                    if (event.candidate) {
+                        this.client.send({
+                            action: "candidate",
+                            username: username,
+                            candidate: JSON.stringify(event.candidate),
+                        });
+                    }
+                };
+
+                // If the user is offerer let the 'negotiationneeded' event create the offer.
+                if (isOfferer) {
+                    pc.onnegotiationneeded = () => {
+                        pc.createOffer().then(this.localDescCreated(pc, username)).catch(this.ChatClient);
+                    };
+                }
+
+                // When a remote stream arrives.
+                pc.ontrack = event => {
+                    // If we were not expecting to receive this video (e.g. somebody is requesting our
+                    // cam and sending their video on the offer, but we don't want to auto-open their
+                    // video, so don't use it)
+                    if (!isOfferer && !this.webcam.mutualOpen) {
+                        this.DebugChannel(`[WebRTC] The offerer ${username} gave us a video, but we don't auto-open their video.`);
+                        return;
+                    }
+
+                    const stream = event.streams[0];
+
+                    // Had we expressly closed this user's cam before? e.g.: if we have auto-open their
+                    // video enabled, and we 'X' out, and they reopen ours - we may be receiving their
+                    // video right now. If we had expressly closed it, do not accept their video
+                    // and hang up the connection.
+                    if (this.WebRTC.expresslyClosed[username] && this.webcam.rememberExpresslyClosed) {
+                        if (!isOfferer) {
+                            return;
+                        }
+                    }
+
+                    // A booted admin?
+                    if (this.isBootedAdmin(username)) {
+                        return;
+                    }
+
+                    // We've received a video! If we had an "open camera spinner timeout",
+                    // clear it before it expires.
+                    if (this.WebRTC.openTimeouts[username] != undefined) {
+                        clearTimeout(this.WebRTC.openTimeouts[username]);
+                        delete (this.WebRTC.openTimeouts[username]);
+                    }
+
+                    // Do we already have it?
+                    // this.ChatClient(`Received a video stream from ${username}.`);
+                    if (this.WebRTC.streams[username] == undefined ||
+                        this.WebRTC.streams[username].id !== stream.id) {
+                        this.WebRTC.streams[username] = stream;
+                    }
+
+                    window.requestAnimationFrame(() => {
+                        let $ref = document.getElementById(`videofeed-${username}`);
+                        $ref.srcObject = stream;
+
+                        // Are we muting their videos by default?
+                        if (this.webcam.autoMuteWebcams) {
+                            this.WebRTC.muted[username] = true;
+                            $ref.muted = true;
+                        }
+
+                        // Set up the speech detector.
+                        this.initSpeakingEvents(username, $ref);
+                    });
+
+                    // Inform them they are being watched.
+                    this.sendWatch(username, true);
+
+                    // Set a mute video handler to detect freezes.
+                    stream.getVideoTracks().forEach(videoTrack => {
+                        let freezeDetected = () => {
+                            this.DebugChannel("[WebRTC] A video freeze was detected from:", username);
+                            // Wait some seconds to see if the stream has recovered on its own
+                            setTimeout(() => {
+                                // Flag it as likely frozen.
+                                if (videoTrack.muted) {
+                                    this.WebRTC.frozenStreamDetected[username] = true;
+                                }
+                            }, 7500); // 7.5s
+                        };
+
+                        videoTrack.onmute = freezeDetected;
+
+                        // Double check for frozen streams on an interval.
+                        if (this.WebRTC.frozenStreamInterval[username]) {
+                            // Clear the existing interval (e.g. audio+video track sets up the
+                            // interval twice right now, don't overwrite and lose the interval)
+                            clearInterval(this.WebRTC.frozenStreamInterval[username]);
+                        }
+                        this.WebRTC.frozenStreamInterval[username] = setInterval(() => {
+                            if (videoTrack.muted) freezeDetected();
+                        }, 3000);
+                    });
+                };
+
+                // ANSWERER: add our video to the connection so that the offerer (the one who
+                // clicked on our video icon to watch us) can receive it.
+                if (!isOfferer && this.webcam.active) {
+                    this.DebugChannel(`[WebRTC] Answerer: attaching my video to the connection with: ${username}`);
+                    let stream = this.webcam.stream;
+                    stream.getTracks().forEach(track => {
+                        pc.addTrack(track, stream)
+                    });
+                }
+
+                // OFFERER: If we were already broadcasting our own video, and the answerer
+                // has the "auto-open your video" setting enabled, attach our video to the initial
+                // offer right now.
+                if (isOfferer) {
+                    let shouldOfferVideo = (
+                        (this.whoMap[username].video & this.VideoFlag.MutualOpen) // They auto-open us
+                        && this.webcam.active             // Our camera is active (to add it)
+                        && !this.isBooted(username)       // We had not booted them off ours before
+                        && !this.isMutedUser(username)    // We had not muted them before
+
+                        // If our webcam is NSFW and the viewer prefers not to see explicit,
+                        // do not send our camera on this offer.
+                        && (!this.webcam.nsfw || !(this.whoMap[username].video & this.VideoFlag.NonExplicit))
+                    );
+
+                    // Attach our video on the outgoing offer, so that on the answerer's side our
+                    // local video pops up on their screen.
+                    if (shouldOfferVideo) {
+                        this.DebugChannel(`[WebRTC] Offerer: I am attaching my video to the connection with: ${username}`)
+                        let stream = this.webcam.stream;
+                        stream.getTracks().forEach(track => {
+                            pc.addTrack(track, stream)
+                        });
+                    } else {
+                        // We aren't offering video, but still want to receive audio/video. Add a receive-only
+                        // transceiver to this offer. NOTE: in the legacy WebRTC API we could put offerToReceiveVideo
+                        // and offerToReceiveAudio in the createOffer() call later, but the modern WebRTC has removed
+                        // those options and Safari only supports the modern way. Adding a receive-only transceiver
+                        // here is the modern way to do it that Safari will be happy with.
+                        this.DebugChannel(`[WebRTC] Offer: I am attaching a receive-only video/audio transceiver to the connection with: ${username}`);
+                        pc.addTransceiver('video', { direction: 'recvonly' });
+                        pc.addTransceiver('audio', { direction: 'recvonly' });
+                    }
+                }
+
+                // If we are the offerer, begin the connection.
+                if (isOfferer) {
+                    this.DebugChannel(`[WebRTC] Offerer: create the offer and send it to ${username}`);
+                    pc.createOffer({
+                        offerToReceiveVideo: true,
+                        offerToReceiveAudio: true,
+                    }).then(this.localDescCreated(pc, username)).catch(this.ChatClient);
+                }
+            },
+
+            // Common handler function for
+            localDescCreated(pc, username) {
+                return (desc) => {
+                    pc.setLocalDescription(desc).then(() => {
+                        this.DebugChannel(`[WebRTC] Local description created; sending SDP message to ${username}:<br><br>${JSON.stringify(pc.localDescription)}`);
+                        this.client.send({
+                            action: "sdp",
+                            username: username,
+                            description: JSON.stringify(pc.localDescription),
+                        });
+                    }).catch(e => {
+                        console.error(`Error sending WebRTC negotiation message (SDP): ${e}`);
+                    });
+                };
+            },
+
+            // BareRTC Protocol Handlers relating to WebRTC
+            sendOpen(username) {
+                // Sending an open message to connect to someone's camera
+                this.DebugChannel(`[WebRTC] Sending "open" message to ask to connect to: ${username}`);
+                this.client.send({
+                    action: "open",
+                    username: username,
+                });
+            },
+            onOpen(msg) {
+                // Response for the opener to begin WebRTC connection.
+                this.DebugChannel(`[WebRTC] Received "open" echo from chat server to connect to: ${msg.username}`);
+                this.startWebRTC(msg.username, true);
+            },
+            onRing(msg) {
+                // Request from a viewer to see our broadcast.
+                this.DebugChannel(`[WebRTC] Received "ring" message from chat server to share my video with: ${msg.username}`);
+                this.startWebRTC(msg.username, false);
+            },
+            sendBoot(username) {
+                this.client.send({
+                    action: "boot",
+                    username: username,
+                });
+            },
+            sendUnboot(username) {
+                this.client.send({
+                    action: "unboot",
+                    username: username,
+                });
+            },
+            onCandidate(msg) {
+                // Handle inbound WebRTC signaling messages proxied by the websocket.
+                if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
+                    return;
+                }
+                let pc = this.WebRTC.pc[msg.username].connecting;
+
+                // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
+                // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
+                // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
+                // about at all). Re-parse the JSON stringified object here.
+                let candidate = JSON.parse(msg.candidate);
+
+                this.DebugChannel(`[WebRTC] ICE candidate from ${msg.username}:<br><br>${msg.candidate}`);
+
+                // Add the new ICE candidate.
+                pc.addIceCandidate(candidate).catch(e => {
+                    console.error(`addIceCandidate: ${e}`);
+                });
+            },
+            onSDP(msg) {
+                // WebRTC Session Description Protocol messages proxied by the websocket.
+                if (this.WebRTC.pc[msg.username] == undefined || !this.WebRTC.pc[msg.username].connecting) {
+                    return;
+                }
+                let pc = this.WebRTC.pc[msg.username].connecting;
+
+                this.DebugChannel(`[WebRTC] Received SDP message from ${msg.username}:<br><br>${msg.description}`);
+
+                // XX: WebRTC candidate/SDP messages JSON stringify their inner payload so that the
+                // Go back-end server won't re-order their json keys (Safari on Mac OS is very sensitive
+                // to the keys being re-ordered during the handshake, in ways that NO OTHER BROWSER cares
+                // about at all). Re-parse the JSON stringified object here.
+                let message = JSON.parse(msg.description);
+
+                // Add the new ICE candidate.
+                pc.setRemoteDescription(new RTCSessionDescription(message)).then(() => {
+                    this.DebugChannel(`[WebRTC] <strong>setRemoteDescription</strong> called back OK!<br>Our pc.remoteDescription.type is: ${pc.remoteDescription.type}`);
+                    // When receiving an offer let's answer it.
+                    if (pc.remoteDescription.type === 'offer') {
+                        this.DebugChannel(`[WebRTC] Answerer: create SDP answer message for ${msg.username}`);
+                        pc.createAnswer().then(this.localDescCreated(pc, msg.username)).catch(this.ChatClient);
+                    } else {
+                        this.DebugChannel(`[WebRTC] pc.remoteDescription.type was not 'offer', we do not need to create an SDP Answer message.`);
+                    }
+                }).catch(this.DebugChannel);
+            },
+            onWatch(msg) {
+                // The user has our video feed open now.
+                if (this.isBootedAdmin(msg.username)) return;
+
+                // Notify in chat if this was the first watch (viewer may send multiple per each track they received)
+                if (this.prefs.watchNotif && this.webcam.watching[msg.username] != true) {
+                    this.ChatServer(
+                        `<strong>${msg.username}</strong> is now watching your camera.`,
+                    );
+                }
+
+                this.webcam.watching[msg.username] = true;
+                this.playSound("Watch");
+            },
+            onUnwatch(msg) {
+                // The user has closed our video feed.
+                delete (this.webcam.watching[msg.username]);
+                this.playSound("Unwatch");
+                this.cleanupPeerConnections();
+            },
+            sendWatch(username, watching) {
+                // Send the watch or unwatch message to backend.
+                this.client.send({
+                    action: watching ? "watch" : "unwatch",
+                    username: username,
+                });
+            },
+            isWatching(username) {
+                // Is the current user watching this target user?
+                if (this.WebRTC.pc[username] != undefined && this.WebRTC.streams[username] != undefined) {
+                    return true;
+                }
+                return false;
+            },
+            isWatchingMe(username) {
+                // Return whether the user is watching your camera
+                return this.webcam.watching[username] === true;
+            },
+
+            isUsernameCamNSFW(username) {
+                // returns true if the username is broadcasting and NSFW, false otherwise.
+                // (used for the color coding of their nickname on their video box - so assumed they are broadcasting)
+                if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.NSFW) {
+                    return true;
+                }
+                return false;
+            },
+
+            /**********************************
+             * Front-end methods and handlers *
+             **********************************/
+
+            // Start broadcasting my webcam.
+            // - force=true to skip the NSFW modal prompt (this param is passed by the button in that modal)
+            // - changeCamera=true to re-negotiate WebRTC connections with a new camera device (invoked by the Settings modal)
+            startVideo({ force = false, changeCamera = false }) {
+                if (this.webcam.busy) return;
+
+                // Is a moderation rule in place?
+                if (this.jwt.rules.IsNoBroadcastRule) {
+                    return this.modalAlert({
+                        title: "Broadcasting video is not allowed for you",
+                        message: this.config.strings.ModRuleErrorNoBroadcast || "A chat room moderation rule is currently in place which restricts your ability to broadcast your webcam.\n\nPlease contact a chat operator for more information.",
+                    });
+                }
+
+                // Before they go on cam the first time, ATTEMPT to get their device names.
+                // - If they had never granted permission, we won't get the names of
+                //   the devices and no big deal.
+                // - If they had given permission before, we can present a nicer experience
+                //   for them and enumerate their devices before they go on originally.
+                if (!changeCamera && !force) {
+                    // Initial broadcast: did they select device IDs?
+                    this.getDevices();
+                }
+
+                // Show the broadcast settings modal the first time.
+                if (!force) {
+                    this.nsfwModalCast.visible = true;
+                    return;
+                }
+
+                let mediaParams = {
+                    audio: true,
+                    video: {
+                        width: { ideal: WebcamWidth, max: WebcamMaxWidth },
+                        height: { ideal: WebcamHeight, max: WebcamMaxHeight },
+                    },
+                };
+
+                // Name the specific devices chosen by the user.
+                if (this.webcam.videoDeviceID) {
+                    mediaParams.video.deviceId = { exact: this.webcam.videoDeviceID };
+                }
+                if (this.webcam.audioDeviceID) {
+                    mediaParams.audio = {
+                        deviceId: { exact: this.webcam.audioDeviceID },
+                    };
+                }
+
+                this.webcam.busy = true;
+                navigator.mediaDevices.getUserMedia(mediaParams).then(stream => {
+                    this.webcam.active = true;
+                    this.webcam.elem.srcObject = stream;
+                    this.webcam.stream = stream;
+
+                    // Save our mutuality prefs.
+                    LocalStorage.set('videoMutual', this.webcam.mutual);
+                    LocalStorage.set('videoMutualOpen', this.webcam.mutualOpen);
+                    LocalStorage.set('videoAutoMute', this.webcam.autoMute);
+                    LocalStorage.set('videoVipOnly', this.webcam.vipOnly);
+                    LocalStorage.set('videoExplicit', this.webcam.nsfw);
+
+                    // Auto-mute our camera? Two use cases:
+                    // 1. The user marked their cam as muted but then changed video device,
+                    //    so we set the mute to match their preference as shown on their UI.
+                    // 2. The user opted to auto-mute their camera from the get to on their
+                    //    NSFW broadcast modal popup.
+                    if (this.webcam.muted || this.webcam.autoMute) {
+                        // Mute their audio tracks.
+                        this.webcam.stream.getAudioTracks().forEach(track => {
+                            track.enabled = false;
+                        });
+
+                        // Set their front-end mute toggle to match (in case of autoMute).
+                        this.webcam.muted = true;
+                    }
+
+                    // If we started as Explicit, hang up on any NonExplicit camera we had open.
+                    this.unWatchNonExplicitVideo();
+
+                    // Tell backend the camera is ready.
+                    this.sendMe();
+
+                    // Record the selected device IDs.
+                    this.webcam.videoDeviceID = stream.getVideoTracks()[0].getSettings().deviceId;
+                    this.webcam.audioDeviceID = stream.getAudioTracks()[0].getSettings().deviceId;
+
+                    // For debugging: log to the debug channel what the chosen resolution is for the user.
+                    let videoSettings = stream.getVideoTracks()[0].getSettings();
+                    this.DebugChannel(`navigator.getUserMedia(): chosen video resolution is ${videoSettings.width}x${videoSettings.height}`);
+
+                    // Collect video and audio devices to let the user change them in their settings.
+                    this.getDevices().then(() => {
+                        // Store their names on localStorage in case we can reselect them by name
+                        // on the user's next visit.
+                        this.storePreferredDeviceNames();
+                    });
+
+                    // If we have changed devices, reconnect everybody's WebRTC channels for your existing watchers.
+                    if (changeCamera) {
+                        this.updateWebRTCStreams();
+                    }
+
+                    // Begin dark video detection as soon as the video is ready to capture frames.
+                    this.webcam.elem.addEventListener("canplaythrough", this.initDarkVideoDetection);
+
+                    // Begin monitoring for speaking events.
+                    this.initSpeakingEvents(this.username, this.webcam.elem);
+                }).catch(err => {
+                    this.ChatClient(`Webcam error: ${err}<br><br>Please see the <a href="/about#troubleshooting">troubleshooting guide</a> for help.`);
+                }).finally(() => {
+                    this.webcam.busy = false;
+                })
+            },
+            getDevices() {
+                // Collect video and audio devices.
+                if (!navigator.mediaDevices?.enumerateDevices) {
+                    console.log("enumerateDevices() not supported.");
+                    return;
+                }
+
+                this.webcam.gettingDevices = true;
+
+                return navigator.mediaDevices.enumerateDevices().then(devices => {
+                    this.webcam.videoDevices = [];
+                    this.webcam.audioDevices = [];
+                    devices.forEach(device => {
+                        // If we can't get the device label, disregard it.
+                        // It can happen if the user has not yet granted permission.
+                        if (!device.label) {
+                            return;
+                        }
+
+                        if (device.kind === 'videoinput') {
+                            // console.log(`Video device ${device.deviceId} ${device.label}`);
+                            this.webcam.videoDevices.push({
+                                id: device.deviceId,
+                                label: device.label,
+                            });
+                        } else if (device.kind === 'audioinput') {
+                            // console.log(`Audio device ${device.deviceId} ${device.label}`);
+                            this.webcam.audioDevices.push({
+                                id: device.deviceId,
+                                label: device.label,
+                            });
+                        }
+                    });
+
+                    // If we don't have the user's current active device IDs (e.g., they have
+                    // not yet started their video the first time), see if we can pre-select
+                    // by their preferred device names.
+                    if (!this.webcam.videoDeviceID && this.webcam.preferredDeviceNames.video) {
+                        for (let dev of this.webcam.videoDevices) {
+                            if (dev.label === this.webcam.preferredDeviceNames.video) {
+                                this.webcam.videoDeviceID = dev.id;
+                            }
+                        }
+                    }
+                    if (!this.webcam.audioDeviceID && this.webcam.preferredDeviceNames.audio) {
+                        for (let dev of this.webcam.audioDevices) {
+                            if (dev.label === this.webcam.preferredDeviceNames.audio) {
+                                this.webcam.audioDeviceID = dev.id;
+                            }
+                        }
+                    }
+                }).catch(err => {
+                    this.ChatClient(`Error listing your cameras and microphones: ${err.name}: ${err.message}`);
+                }).finally(() => {
+                    // In the settings modal, let the spinner spin for a moment.
+                    setTimeout(() => {
+                        this.webcam.gettingDevices = false;
+                    }, 500);
+                })
+            },
+            storePreferredDeviceNames() {
+                // This function looks up the names of the user's selected video/audio device.
+                // When they come back later, IF we are able to enumerate devices before they
+                // go on for the first time, we might pre-select their last device by name.
+                // NOTE: on iOS apparently device IDs shuffle every single time so only names
+                // may be reliable!
+                if (this.webcam.videoDeviceID) {
+                    for (let dev of this.webcam.videoDevices) {
+                        if (dev.id === this.webcam.videoDeviceID && dev.label) {
+                            this.webcam.preferredDeviceNames.video = dev.label;
+                        }
+                    }
+                }
+
+                if (this.webcam.audioDeviceID) {
+                    for (let dev of this.webcam.audioDevices) {
+                        if (dev.id === this.webcam.audioDeviceID && dev.label) {
+                            this.webcam.preferredDeviceNames.audio = dev.label;
+                        }
+                    }
+                }
+
+                // Put them on localStorage.
+                LocalStorage.set('preferredDeviceNames', this.webcam.preferredDeviceNames);
+            },
+
+            // The 'Explicit' button at the top of the page: toggle the user's NSFW setting but
+            // with some smarts in case the user was just marked NSFW by an admin.
+            topNavExplicitButtonClicked() {
+                if (this.webcam.wasServerNSFW) {
+                    this.webcam.wasServerNSFW = false;
+                    this.ChatClient(
+                        `Notice: your webcam was already marked as "Explicit" recently by the chat server.<br><br>` +
+                        `If you were recently notified that a chat moderator has marked your camera as 'explicit' (red) for you, then ` +
+                        `you do not need to do anything: your camera is marked Explicit already. Please leave it as Explicit if you are ` +
+                        `being sexual on camera.<br><br>` +
+                        `If you really mean to <strong>remove</strong> the Explicit label (and turn your camera 'blue'), then click on the ` +
+                        `Explicit button at the top of the page one more time to confirm.`,
+                    );
+                    return;
+                }
+                this.webcam.nsfw = !this.webcam.nsfw;
+            },
+
+            // Replace your video/audio streams for your watchers (on camera changes)
+            updateWebRTCStreams() {
+                console.log("Re-negotiating video and audio channels to your watchers.");
+                for (let username of Object.keys(this.WebRTC.pc)) {
+                    let pc = this.WebRTC.pc[username];
+                    if (pc.answerer != undefined) {
+                        let oldTracks = pc.answerer.getSenders();
+                        let newTracks = this.webcam.stream.getTracks();
+
+                        // Remove and replace the tracks.
+                        for (let old of oldTracks) {
+                            if (old.track.kind === 'audio') {
+                                for (let replace of newTracks) {
+                                    if (replace.kind === 'audio') {
+                                        old.replaceTrack(replace);
+                                    }
+                                }
+                            }
+                            else if (old.track.kind === 'video') {
+                                for (let replace of newTracks) {
+                                    if (replace.kind === 'video') {
+                                        old.replaceTrack(replace);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+
+            // Begin connecting to someone else's webcam.
+            openVideoByUsername(username, force) {
+                if (this.whoMap[username] != undefined) {
+                    this.openVideo(this.whoMap[username], force);
+                    return;
+                }
+                this.ChatClient("Couldn't open video by username: not found.");
+            },
+            setSkipNSFWModal() {
+                // Set the "don't show again" on NSFW modal.
+                LocalStorage.set("skip-nsfw-modal", true);
+            },
+            openVideo(user, force) {
+                // Close the NSFW warning modal if it was open.
+                this.nsfwModalView.visible = false;
+
+                if (user.username === this.username) {
+                    this.ChatClient("You can already see your own webcam.");
+                    return;
+                }
+
+                // Operator safety when hidden.
+                if (this.status === 'hidden') {
+                    this.ChatClient("Your chat status is currently set to 'hidden' and you would break the illusion by opening this camera.");
+                    return;
+                }
+
+                // A chat moderation rule?
+                if (this.jwt.rules.IsNoVideoRule) {
+                    return this.modalAlert({
+                        title: "Videos are not available to you",
+                        message: this.config.strings.ModRuleErrorNoVideo || "A chat room moderation rule is currently in place which restricts your ability to watch webcams.\n\n" +
+                            "Please contact a chat operator for more information.",
+                    });
+                }
+
+                // If we have muted the target, we shouldn't view their video.
+                if (this.isMutedUser(user.username) && !this.isOp) {
+                    this.ChatClient(`You have muted <strong>${user.username}</strong> and so should not see their camera.`);
+                    return;
+                }
+
+                // If we have booted the target off our cam, we shouldn't view their video.
+                if (this.isBooted(user.username) && !this.isOp) {
+                    this.ChatClient(`You had kicked <strong>${user.username}</strong> off your camera and so it wouldn't be right to still watch their camera.`);
+                    return;
+                }
+
+                // Is the target user NSFW? Go thru the modal.
+                let dontShowAgain = LocalStorage.get("skip-nsfw-modal") === true;
+                if ((user.video & this.VideoFlag.NSFW) && !dontShowAgain && !force) {
+                    this.nsfwModalView.user = user;
+                    this.nsfwModalView.visible = true;
+                    return;
+                }
+
+                // If the local user had expressly closed this user's camera before, forget
+                // this action because the user now is expressly OPENING this camera on purpose.
+                delete (this.WebRTC.expresslyClosed[user.username]);
+
+                // Debounce so we don't spam too much for the same user.
+                if (this.WebRTC.debounceOpens[user.username]) return;
+                this.WebRTC.debounceOpens[user.username] = true;
+                setTimeout(() => {
+                    delete (this.WebRTC.debounceOpens[user.username]);
+                }, 5000);
+
+                // Camera is already open? Then disconnect the connection.
+                if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.pc[user.username].offerer != undefined) {
+                    this.DebugChannel(`OpenVideo(${user.username}): already had a connection open, closing it first.`);
+                    this.closeVideo(user.username, "offerer");
+                }
+
+                // If this user is NonExplicit and your camera is red...
+                let theirVideo = this.whoMap[user.username].video;
+                if (this.webcam.active && this.webcam.nsfw && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NonExplicit)) {
+                    this.ChatClient(
+                        `<strong>${user.username}</strong> prefers not to have Explicit cammers watch their video, and your camera is currently marked as Explicit.`
+                    );
+                    return;
+                }
+
+                // Conversely: if we are NonExplicit we should not open NSFW videos.
+                if (this.webcam.active && this.webcam.nonExplicit && (theirVideo & VideoFlag.Active) && (theirVideo & VideoFlag.NSFW)) {
+                    this.ChatClient(
+                        `You have said you do not want to see Explicit videos and <strong>${user.username}</strong> has an Explicit camera.`
+                    );
+                    return;
+                }
+
+                // If this user requests mutual viewership...
+                if (this.isVideoNotAllowed(user) && !this.isOp) {
+                    this.ChatClient(
+                        `<strong>${user.username}</strong> has requested that you should share your own camera too before opening theirs.`
+                    );
+                    return;
+                }
+
+                // Set a timeout: the video icon becomes a spinner and we wait a while
+                // to see if the connection went thru. This gives the user feedback and we
+                // can avoid a spammy 'ChatClient' notification message.
+                if (this.WebRTC.openTimeouts[user.username] != undefined) {
+                    clearTimeout(this.WebRTC.openTimeouts[user.username]);
+                    delete (this.WebRTC.openTimeouts[user.username]);
+                }
+                this.WebRTC.openTimeouts[user.username] = setTimeout(() => {
+                    this.ChatClient(
+                        `There was an error opening <strong>${user.username}</strong>'s camera.`,
+                    );
+                    delete (this.WebRTC.openTimeouts[user.username]);
+                }, 10000);
+
+                // Send the ChatServer 'open' command.
+                this.sendOpen(user.username);
+
+                // Responsive CSS -> go to chat panel to see the camera
+                this.openChatPanel();
+            },
+            closeVideo(username, name) {
+                // Clean up any lingering camera freeze states.
+                delete (this.WebRTC.frozenStreamDetected[username]);
+                if (this.WebRTC.frozenStreamInterval[username]) {
+                    clearInterval(this.WebRTC.frozenStreamInterval[username]);
+                    delete (this.WebRTC.frozenStreamInterval[username]);
+                }
+
+                if (name === "offerer") {
+                    // We are closing another user's video stream.
+                    delete (this.WebRTC.streams[username]);
+                    delete (this.WebRTC.muted[username]);
+                    delete (this.WebRTC.poppedOut[username]);
+
+                    // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
+                    // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
+                    // camera" option set, and our viewer sent their video on their open request, and they still have
+                    // our camera open, do not close the connection so we don't freeze their side of the video.
+                    if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].offerer != undefined) {
+                        if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
+                            console.log(`OFFERER(${username}): Close video locally only: do not hang up the connection.`);
+                        } else {
+                            this.WebRTC.pc[username].offerer.close();
+                            delete (this.WebRTC.pc[username]);
+                        }
+                    }
+
+                    // Inform backend we have closed it.
+                    this.sendWatch(username, false);
+                    this.cleanupPeerConnections();
+                    return;
+                } else if (name === "answerer") {
+                    // Should we close the WebRTC PeerConnection? If they were watching our video back, closing
+                    // the connection MAY cause our video to freeze on their side: if we have the "auto-open my viewer's
+                    // camera" option set, and our viewer sent their video on their open request, and they still have
+                    // our camera open, do not close the connection so we don't freeze their side of the video.
+                    if (this.WebRTC.pc[username] != undefined && this.WebRTC.pc[username].answerer != undefined) {
+                        if (this.webcam.mutualOpen && this.isWatchingMe(username)) {
+                            console.log(`ANSWERER(${username}): Close video locally only: do not hang up the connection.`);
+                        } else {
+                            this.WebRTC.pc[username].answerer.close();
+                            delete (this.WebRTC.pc[username]);
+                        }
+                    }
+                    this.cleanupPeerConnections();
+                    return;
+                }
+
+                // A user has logged off the server. Clean up any WebRTC connections.
+                delete (this.WebRTC.streams[username]);
+                delete (this.webcam.watching[username]);
+                if (this.WebRTC.pc[username] != undefined) {
+                    if (this.WebRTC.pc[username].offerer) {
+                        this.WebRTC.pc[username].offerer.close();
+                    }
+                    if (this.WebRTC.pc[username].answerer) {
+                        this.WebRTC.pc[username].answerer.close();
+                    }
+                    delete (this.WebRTC.pc[username]);
+                    delete (this.WebRTC.muted[username]);
+                    delete (this.WebRTC.poppedOut[username]);
+                }
+
+                // Clean up any lingering camera freeze states.
+                delete (this.WebRTC.frozenStreamDetected[username]);
+                if (this.WebRTC.frozenStreamInterval[username]) {
+                    clearInterval(this.WebRTC.frozenStreamInterval[username]);
+                    delete (this.WebRTC.frozenStreamInterval[username]);
+                }
+
+                // Inform backend we have closed it.
+                this.sendWatch(username, false);
+                this.cleanupPeerConnections();
+            },
+            expresslyCloseVideo(username, name) {
+                // Like closeVideo but communicates the user's intent to expressly
+                // close the video for a user. e.g. they clicked the 'X' icon to
+                // close it out. As opposed to a user went off camera and were closed
+                // out automatically.
+                this.WebRTC.expresslyClosed[username] = true;
+                return this.closeVideo(username, name);
+            },
+            closeOpenVideos() {
+                // Close all videos open of other users.
+                for (let username of Object.keys(this.WebRTC.streams)) {
+                    this.closeVideo(username, "offerer");
+                }
+            },
+            cleanupPeerConnections() {
+                // Helper function to check and clean up WebRTC PeerConnections.
+                //
+                // This is fired on Unwatch and CloseVideo events, to double check
+                // which videos the local user has open + who online is watching our
+                // video, to close out any lingering WebRTC connections.
+                for (let username of Object.keys(this.WebRTC.pc)) {
+                    let pc = this.WebRTC.pc[username];
+
+                    // Is their video on our screen?
+                    if (this.WebRTC.streams[username] != undefined) {
+                        continue;
+                    }
+
+                    // Are they watching us?
+                    if (this.isWatchingMe(username)) {
+                        continue;
+                    }
+
+                    // Are they an admin that we booted?
+                    if (this.isBootedAdmin(username)) {
+                        continue;
+                    }
+
+                    // The WebRTC connections should be closed out.
+                    if (pc.answerer != undefined) {
+                        console.log("Clean up WebRTC answerer connection with " + username);
+                        pc.answerer.close();
+                        delete (this.WebRTC.pc[username]);
+                    }
+                    if (pc.offerer != undefined) {
+                        console.log("Clean up WebRTC offerer connection with " + username);
+                        pc.offerer.close();
+                        delete (this.WebRTC.pc[username]);
+                    }
+                }
+            },
+            muteAllVideos() {
+                // Mute the mic of all open videos.
+                let count = 0;
+                for (let username of Object.keys(this.WebRTC.streams)) {
+                    if (this.WebRTC.muted[username]) continue;
+
+                    // Find the <video> tag to mute it.
+                    this.WebRTC.muted[username] = true;
+                    let $ref = document.getElementById(`videofeed-${username}`);
+                    if ($ref) {
+                        $ref.muted = this.WebRTC.muted[username];
+                    }
+
+                    count++;
+                }
+
+                if (count > 0) {
+                    this.ChatClient(`You have muted the audio on ${count} video${count === 1 ? '' : 's'}.`);
+                }
+            },
+            unMutualVideo() {
+                // If we had our camera on to watch a video of someone who wants mutual cameras,
+                // and then we turn ours off: we should unfollow the ones with mutual video.
+                if (this.webcam.active) return;
+                for (let row of this.whoList) {
+                    let username = row.username;
+                    if ((row.video & this.VideoFlag.MutualRequired) && this.WebRTC.pc[username] != undefined) {
+                        this.closeVideo(username);
+                    }
+                }
+            },
+            unWatchNonExplicitVideo() {
+                // If we are watching cameras with the NonExplicit setting, and our camera has become
+                // explicit, excuse ourselves from their watch list.
+                if (this.webcam.nsfw) {
+                    for (let username of Object.keys(this.WebRTC.streams)) {
+                        let user = this.whoMap[username];
+
+                        // Our video is Explicit and theirs is NonExplicit.
+                        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
+                            this.closeVideo(username);
+                        }
+                    }
+                }
+
+                // Conversely: if we are NonExplicit we do not watch Explicit videos.
+                if (this.webcam.nonExplicit) {
+                    for (let username of Object.keys(this.WebRTC.streams)) {
+                        let user = this.whoMap[username];
+
+                        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
+                            this.closeVideo(username);
+                        }
+                    }
+                }
+            },
+
+            isUsernameOnCamera(username) {
+                return this.whoMap[username]?.video & VideoFlag.Active;
+            },
+
+            // Video button classes for a user.
+            webcamIconClass(user) {
+                // Return the icon to show on a video button.
+                // - Usually a video icon
+                // - May be a crossed-out video if isVideoNotAllowed
+                // - Or an eyeball for cameras already opened
+                // - Or a spinner if we are actively trying to open the video
+        
+                // Current user sees their own self camera always.
+                if (user.username === this.username && this.webcam.active) {
+                    return 'fa-eye';
+                }
+        
+                // In spinner mode? (Trying to open the video)
+                if (this.WebRTC.openTimeouts[user.username] != undefined) {
+                    return 'fa-spinner fa-spin';
+                }
+        
+                // Already opened?
+                if (this.WebRTC.pc[user.username] != undefined && this.WebRTC.streams[user.username] != undefined) {
+                    return 'fa-eye';
+                }
+        
+                if (this.isVideoNotAllowed(user)) return 'fa-video-slash';
+                return 'fa-video';
+            },
+            webcamButtonClass(username) {
+                // This styles the convenient video button that appears in the header bar
+                // of DM threads if your chat partner is on camera.
+                let video = this.whoMap[username].video;
+    
+                if (!(video & VideoFlag.Active)) {
+                    return "";
+                }
+    
+                if (video & VideoFlag.NSFW) {
+                    return "is-danger";
+                }
+    
+                return "is-link";
+            },
+
+            isVideoNotAllowed(user) {
+                // Returns whether the video button to open a user's cam will be not allowed (crossed out)
+    
+                // If the user is under the NoVideo rule, always cross it out.
+                if (this.jwt.rules.IsNoVideoRule) return true;
+    
+                // Mutual video sharing is required on this camera, and ours is not active
+                if ((user.video & this.VideoFlag.Active) && (user.video & this.VideoFlag.MutualRequired)) {
+                    // A nuance to the mutual video required: if we DO have our cam on, but ours is VIP only, and the
+                    // user we want to watch can't see that our cam is on, then honor their wishes.
+                    if (this.webcam.active && this.isVIP && this.webcam.vipOnly && this.whoMap[user.username] != undefined && !this.whoMap[user.username].vip) {
+                        // Our cam is active, but the non-VIP user won't see it on, so they won't expect
+                        // us to be able to open their camera.
+                        return true;
+                    }
+    
+                    if (!this.webcam.active) {
+                        // Our cam is not broadcasting, but they requested it should be: not allowed.
+                        return true;
+                    }
+                }
+    
+                // We have muted them and it wouldn't be appropriate to still watch their video but not get their messages.
+                if (this.isMutedUser(user.username) || this.isBooted(user.username)) {
+                    return true;
+                }
+    
+                // This person is NonExplicit and our camera is Explicit.
+                if (this.webcam.active && this.webcam.nsfw && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NonExplicit)) {
+                    return true;
+                }
+    
+                // Conversely: if we are NonExplicit we should not be able to watch Explicit videos.
+                if (this.webcam.active && this.webcam.nonExplicit && (user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
+                    return true;
+                }
+    
+                return false;
+            },
+    
+            // Functions to help users 'nudge' each other into marking their cams as Explicit.
+            sendNudgeNsfw(username) {
+                // Send a nudge to the username. This is triggered by their profile modal: if the user is
+                // on blue camera, others on chat can anonymously nudge them into marking their camera as red.
+    
+                // Nudges are a special kind of emoji reaction (so we could add this feature in frontend only without
+                // a server side deployment to support it).
+                this.client.send({
+                    action: 'react',
+                    msgID: ReactNudgeNsfwMessageID,
+                    message: username,
+                });
+            },
+            onNudgeNsfw(msg) {
+                // Handler for a nudge NSFW react message.
+                if (msg.message !== this.username) {
+                    return; // Not for us
+                }
+    
+                // Sanity check that we are on blue camera.
+                if (!this.webcam.active || this.webcam.nsfw) {
+                    return;
+                }
+    
+                // Only show this if we have at least 2 watchers.
+                let watchers = Object.keys(this.webcam.watching).length;
+                if (watchers < 2) {
+                    return;
+                }
+    
+                // Show a nice message on chat.
+                this.ChatServer(
+                    `<strong>Your webcam is <span class="has-text-danger">Hot!</span></strong> <i class="fa fa-fire has-text-danger"></i><br><br>` +
+                        `Somebody who is watching your camera thinks that your webcam should be tagged as <span class="has-text-danger"><i class="fa fa-fire mx-1"></i> Explicit</span>.<br><br>` +
+                        `In case you forgot to do so, please click on the '<i class="fa fa-fire has-text-danger"></i> Explicit' button at the top of the page to turn your camera 'red.' Thank you! <i class="fa fa-heart has-text-danger"></i>`,
+                );
+            },
+    
+            // Show who watches our video.
+            showViewers() {
+                // TODO: for now, ChatClient is our bro.
+                let users = Object.keys(this.webcam.watching);
+                if (users.length === 0) {
+                    this.ChatClient("There is currently nobody viewing your camera.");
+                } else {
+                    this.ChatClient("Your current webcam viewers are:<br><br>" + users.join(", "));
+                }
+    
+                // Also focus the Watching list.
+                this.whoTab = 'watching';
+    
+                // TODO: if mobile, show the panel - this width matches
+                // the media query in chat.css
+                if (screen.width < 1024) {
+                    this.openWhoPanel();
+                }
+            },
+    
+            // Boot someone off your video.
+            bootUser(username) {
+                // Un-boot?
+                if (this.isBooted(username)) {
+                    this.modalConfirm({
+                        title: "Unboot user",
+                        icon: "fa fa-user-xmark",
+                        message: `Allow ${username} to watch your webcam again?`
+                    }).then(() => {
+                        this.sendUnboot(username);
+                        delete (this.WebRTC.booted[username]);
+                    })
+                    return;
+                }
+    
+                // Check if they are currently rate limited from pre-emptive boots of folks
+                // who are not even watching their camera yet.
+                if (this.rateLimitPreemptiveBoots(username, false)) return;
+    
+                // Boot them off our webcam.
+                this.modalConfirm({
+                    title: "Boot user",
+                    icon: "fa fa-user-xmark",
+                    message: `Kick ${username} off your camera? This will also prevent them ` +
+                        `from seeing that your camera is active for the remainder of your ` +
+                        `chat session.`
+                }).then(() => {
+                    // Ping their rate limiter.
+                    if (this.rateLimitPreemptiveBoots(username, true)) return;
+    
+                    this.doBootUser(username);
+    
+                    this.ChatClient(
+                        `You have booted ${username} off your camera. They will no longer be able ` +
+                        `to connect to your camera, or even see that your camera is active at all -- ` +
+                        `to them it appears as though you had turned yours off.<br><br>This will be ` +
+                        `in place for the remainder of your time in chat, until you log off. ` +
+                        `<strong>Note:</strong> If you wish to undo this, you can allow them to watch again ` +
+                        `by opening their profile card.`
+                    );
+                });
+            },
+            doBootUser(username) {
+                // Inner function to actually boot a user, bypassing any confirm or rate limit modals.
+                this.sendBoot(username);
+                this.WebRTC.booted[username] = true;
+    
+                // Close the WebRTC peer connections.
+                if (this.WebRTC.pc[username] != undefined) {
+                    this.closeVideo(username);
+                }
+    
+                // Remove them from our list.
+                delete (this.webcam.watching[username]);
+            },
+            isBooted(username) {
+                return this.WebRTC.booted[username] === true;
+            },
+            isBootedAdmin(username) {
+                return (this.WebRTC.booted[username] === true || this.muted[username] === true) &&
+                    this.whoMap[username] != undefined &&
+                    this.whoMap[username].op;
+            },
+            rateLimitPreemptiveBoots(username, ping=false) {
+                // Rate limit abusive pre-emptive booting behavior: if the target is not even currently watching
+                // your camera, limit how many and how frequently you can boot them off.
+                //
+                // Returns true if limited, false otherwise.
+    
+                let cooldownAt = this.WebRTC.preemptBootRateLimit.cooldownAt,
+                    cooldownTTL = this.WebRTC.preemptBootRateLimit.cooldownTTL,
+                    now = new Date().getTime();
+    
+                if (!this.isWatchingMe(username)) {
+                    // Within the 'free' boot limits?
+                    if (this.WebRTC.preemptBootRateLimit.counter < this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
+                        if (!ping) return false;
+                        this.WebRTC.preemptBootRateLimit.counter++;
+                    }
+    
+                    // Begin enforcing a cooldown TTL after a while.
+                    if (this.WebRTC.preemptBootRateLimit.counter >= this.WebRTC.preemptBootRateLimit.maxFreeBoots) {
+    
+                        // Currently throttled?
+                        if (cooldownAt !== null) {
+                            if (now < cooldownAt) {
+                                let delta = cooldownAt - now;
+                                this.modalAlert({
+                                    title: "You are doing that too often",
+                                    message: "You have been pre-emptively booting an unusual number of people who weren't even watching your camera yet.\n\n" +
+                                        `Please wait ${cooldownTTL} seconds between any additional pre-emptive boots.\n\n` +
+                                        `You may try again after ${delta/1000} seconds.`,
+                                });
+                                return true;
+                            }
+                        }
+    
+                        // Refresh the timer on pings.
+                        if (ping) {
+                            this.WebRTC.preemptBootRateLimit.cooldownAt = now + (cooldownTTL * 1000);
+                        }
+                    }
+                }
+    
+                return false;
+            },
+    
+            // Stop broadcasting.
+            stopVideo() {
+                this.stopDarkVideoDetection();
+    
+                // Close all WebRTC sessions.
+                for (let username of Object.keys(this.WebRTC.pc)) {
+                    this.closeVideo(username, "answerer");
+                }
+    
+                // Hang up on mutual cameras.
+                this.unMutualVideo();
+    
+                // Close the local camera devices completely.
+                this.webcam.stream.getTracks().forEach(track => {
+                    track.stop();
+                });
+    
+                // Reset all front-end state.
+                this.webcam.elem.srcObject = null;
+                this.webcam.stream = null;
+                this.webcam.active = false;
+                this.webcam.muted = false;
+                this.whoTab = "online";
+    
+                // Tell backend our camera state.
+                this.sendMe();
+            },
+    
+            // Mute my microphone if broadcasting.
+            muteMe() {
+                this.webcam.muted = !this.webcam.muted;
+                this.webcam.stream.getAudioTracks().forEach(track => {
+                    track.enabled = !this.webcam.muted;
+                });
+    
+                // Communicate our local mute to others.
+                this.sendMe();
+            },
+            isSourceMuted(username) {
+                // See if the webcam broadcaster muted their mic at the source
+                if (this.whoMap[username] != undefined && this.whoMap[username].video & this.VideoFlag.Muted) {
+                    return true;
+                }
+                return false;
+            },
+            isMuted(username) {
+                return this.WebRTC.muted[username] === true;
+            },
+            muteVideo(username) {
+                this.WebRTC.muted[username] = !this.isMuted(username);
+    
+                // Find the <video> tag to mute it.
+                let $ref = document.getElementById(`videofeed-${username}`);
+                if ($ref) {
+                    $ref.muted = this.WebRTC.muted[username];
+                }
+            },
+            setVideoVolume(username, volume) {
+                // Set the volume on their video.
+                let $ref = document.getElementById(`videofeed-${username}`);
+                if ($ref) {
+                    $ref.volume = volume / 100;
+                }
+            },
+
+            // Pop out a user's video.
+            popoutVideo(username) {
+                this.WebRTC.poppedOut[username] = !this.WebRTC.poppedOut[username];
+
+                // If not popped out, reset CSS positioning.
+                window.requestAnimationFrame(this.makeDraggableVideos);
+            },
+
+            // Outside of Vue, attach draggable video scripts to DOM.
+            makeDraggableVideos() {
+                let $panel = document.querySelector("#video-feeds");
+
+                interact('.popped-in').unset();
+
+                // Give popped out videos to the root of the DOM so they can
+                // be dragged anywhere on the page.
+                window.requestAnimationFrame(() => {
+                    document.querySelectorAll('.popped-out').forEach(node => {
+                        // $panel.removeChild(node);
+                        document.body.appendChild(node);
+                    });
+
+                    document.querySelectorAll('.popped-in').forEach(node => {
+                        // document.body.removeChild(node);
+                        $panel.appendChild(node);
+                        node.style.top = null;
+                        node.style.left = null;
+                        node.setAttribute('data-x', 0);
+                        node.setAttribute('data-y', 0);
+                    });
+                });
+
+                interact('.popped-out').draggable({
+                    // enable inertial throwing
+                    inertia: true,
+                    // keep the element within the area of it's parent
+                    modifiers: [
+                        interact.modifiers.restrictRect({
+                            restriction: 'parent',
+                            endOnly: true
+                        })
+                    ],
+
+                    listeners: {
+                        // call this function on every dragmove event
+                        move(event) {
+                            let target = event.target;
+                            let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+                            let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+
+                            target.style.top = `${y}px`;
+                            target.style.left = `${x}px`;
+
+                            target.setAttribute('data-x', x);
+                            target.setAttribute('data-y', y);
+                        },
+
+                        // call this function on every dragend event
+                        end(event) {
+                            console.log(
+                                'moved a distance of ' +
+                                (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
+                                    Math.pow(event.pageY - event.y0, 2) | 0))
+                                    .toFixed(2) + 'px')
+                        }
+                    }
+                }).resizable({
+                    edges: { left: true, right: true, bottom: true },
+                    listeners: {
+                        move(event) {
+                            var target = event.target
+                            var x = (parseFloat(target.getAttribute('data-x')) || 0)
+                            var y = (parseFloat(target.getAttribute('data-y')) || 0)
+
+                            // update the element's style
+                            target.style.width = event.rect.width + 'px'
+                            target.style.height = event.rect.height + 'px'
+
+                            // translate when resizing from top or left edges
+                            x += event.deltaRect.left
+                            y += event.deltaRect.top
+
+                            target.style.top = `${y}px`;
+                            target.style.left = `${x}px`;
+
+                            target.setAttribute('data-x', x)
+                            target.setAttribute('data-y', y)
+                        }
+                    },
+                    modifiers: [
+                        // keep the edges inside the parent
+                        interact.modifiers.restrictEdges({
+                            outer: 'parent'
+                        }),
+
+                        // minimum size
+                        interact.modifiers.restrictSize({
+                            min: { width: 100, height: 50 }
+                        })
+                    ],
+
+                    inertia: true
+                })
+            },
+
+            // Webcam "is speaking" functions.
+            initSpeakingEvents(username, element) {
+                // element is the <video> element, with the video stream
+                // (whether from getUserMedia or WebRTC) on srcObject.
+
+                let stream = element.srcObject,
+                    feedElem = element.closest('div.feed'),
+                    options = {},
+                    speechEvents = hark(stream, options);
+
+                speechEvents.on('speaking', () => {
+                    feedElem.classList.add('is-speaking');
+                    this.WebRTC.speaking[username] = true;
+                });
+
+                speechEvents.on('stopped_speaking', () => {
+                    feedElem.classList.remove('is-speaking');
+                    this.WebRTC.speaking[username] = false;
+                });
+            },
+
+            // Dark video detection.
+            initDarkVideoDetection() {
+                if (this.webcam.darkVideo.canvas === null) {
+                    let canvas = document.querySelector("#darkVideoCanvas"),
+                        ctx = canvas.getContext('2d');
+                    canvas.width = WebcamWidth;
+                    canvas.height = WebcamHeight;
+                    this.webcam.darkVideo.canvas = canvas;
+                    this.webcam.darkVideo.ctx = ctx;
+                }
+
+                // Reset the dark frame counter.
+                this.webcam.darkVideo.tooDarkFrames = 0;
+
+                if (this.webcam.darkVideo.interval !== null) {
+                    clearInterval(this.webcam.darkVideo.interval);
+                }
+                this.webcam.darkVideo.interval = setInterval(() => {
+                    this.darkVideoInterval();
+                }, 5000);
+            },
+            stopDarkVideoDetection() {
+                if (this.webcam.darkVideo.interval !== null) {
+                    clearInterval(this.webcam.darkVideo.interval);
+                }
+
+                // Remove the canplaythrough event, it will be re-added if the user restarts their cam.
+                this.webcam.elem.removeEventListener("canplaythrough", this.initDarkVideoDetection);
+            },
+            darkVideoInterval() {
+                if (!this.webcam.active) { // safety
+                    this.stopDarkVideoDetection();
+                    return;
+                }
+
+                // Take a screenshot from the user's local webcam.
+                let canvas = this.webcam.darkVideo.canvas,
+                    ctx = this.webcam.darkVideo.ctx;
+                ctx.drawImage(this.webcam.elem, 0, 0, canvas.width, canvas.height);
+
+                // Debugging: export the screenshot to a data URI.
+                let img = canvas.toDataURL('image/jpeg');
+                this.webcam.darkVideo.lastImage = img;
+
+                // Get average RGB value.
+                let rgb = this.getAverageRGB(ctx);
+                if (rgb === null) {
+                    return;
+                }
+
+                this.webcam.darkVideo.lastAverage = rgb;
+                this.webcam.darkVideo.lastAverageColor = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`;
+
+                // If they are exempt from the dark video rule, do not check their camera color.
+                if (this.jwt.rules.IsNoDarkVideoRule) return;
+
+                // If the average total color is below the threshold (too dark of a video).
+                let averageBrightness = Math.floor((rgb[0] + rgb[1] + rgb[2]) / 3);
+                if (averageBrightness < this.webcam.darkVideo.threshold) {
+
+                    // Count for how many frames their camera is too dark.
+                    this.webcam.darkVideo.tooDarkFrames++;
+
+                    // After too long, cut their camera.
+                    if (this.webcam.darkVideo.tooDarkFrames >= this.webcam.darkVideo.tooDarkFramesLimit) {
+                        this.stopVideo();
+                        this.ChatClient(`
+                            Your webcam was too dark to see anything and has been turned off.<br><br>
+                            <strong>Note:</strong> if your camera did not look dark to you and you believe there
+                            may have been an error, please
+                            <button type="button" onclick="SendMessage('/debug-dark-video')" class="button is-small is-link is-outlined">click here</button> to see
+                            diagnostic information and contact a chat room moderator for assistance.
+                        `);
+                    }
+                } else {
+                    this.webcam.darkVideo.tooDarkFrames = 0;
+                }
+            },
+            getAverageRGB(ctx) {
+                // Helper function to compute the average color of a <canvas>.
+                // Ref: https://stackoverflow.com/a/2541680
+                const blockSize = 16; // only visit every N pixels
+                let img = null,
+                    rgb = [0, 0, 0];
+
+                try {
+                    img = ctx.getImageData(0, 0, WebcamWidth, WebcamHeight);
+                } catch(e) {
+                    // Not supported.
+                    return null;
+                }
+
+                let length = img.data.length,
+                    i = 0,
+                    count = 0,
+                    firstColor = [],
+                    allSame = true;
+                while ((i += blockSize * 4) < length) {
+                    count++;
+                    let thisColor = [
+                        img.data[i],
+                        img.data[i+1],
+                        img.data[i+2]
+                    ]
+
+                    rgb[0] += thisColor[0];
+                    rgb[1] += thisColor[1];
+                    rgb[2] += thisColor[2];
+
+                    // Also check whether every sampled pixel is THE SAME color,
+                    // to detect users broadcasting a solid (bright) color.
+                    if (firstColor.length === 0) {
+                        firstColor = [ rgb[0], rgb[1], rgb[2] ];
+                    } else if (allSame) {
+                        if (firstColor[0] !== thisColor[0] ||
+                            firstColor[1] !== thisColor[1] ||
+                            firstColor[2] !== thisColor[2]
+                        ) {
+                            allSame = false;
+                        }
+                    }
+                }
+
+                // If all sampled colors were the same solid image: red flag!
+                if (allSame) {
+                    return [0, 0, 0];
+                }
+
+                rgb[0] = Math.floor(rgb[0]/count);
+                rgb[1] = Math.floor(rgb[1]/count);
+                rgb[2] = Math.floor(rgb[2]/count);
+
+                return rgb;
+            },
+
+            // Scale the video zoom setting up or down.
+            scaleVideoSize(bigger) {
+                // Find the current size index.
+                let currentSize = 0;
+                for (let option of this.webcam.videoScaleOptions) {
+                    if (option[0] === this.webcam.videoScale) {
+                        break;
+                    }
+                    currentSize++;
+                }
+
+                // Adjust it.
+                if (bigger) {
+                    currentSize++;
+                } else {
+                    currentSize--;
+                }
+
+                // Constrain it.
+                if (currentSize < 0) {
+                    currentSize = 0;
+                } else if (currentSize >= this.webcam.videoScaleOptions.length) {
+                    currentSize = this.webcam.videoScale.length - 1;
+                }
+
+                // Set it.
+                this.webcam.videoScale = this.webcam.videoScaleOptions[currentSize][0];
+            },
+        }
+    }
+
+    /***************************
+     * Common, stand-alone functions used by multiple components.
+     * Important: these do not use Vue properties but are instead
+     * self contained and safe to call from anywhere.
+     ***************************/
+
+    // Very similar to webcamIconClass but stand-alone and shared by
+    // multiple components like WhoListRow and MessageBox.
+    videoButtonClass(user, isVideoNotAllowed) {
+        let result = "";
+
+        // VIP background if their cam is set to VIPs only
+        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.VipOnly)) {
+            result = "has-background-vip ";
+        }
+
+        // Colors and/or cursors.
+        if ((user.video & VideoFlag.Active) && (user.video & VideoFlag.NSFW)) {
+            result += "is-danger is-outlined";
+        } else if ((user.video & VideoFlag.Active) && !(user.video & VideoFlag.NSFW)) {
+            result += "is-link is-outlined";
+        } else if (isVideoNotAllowed) {
+            result += "cursor-notallowed";
+        }
+
+        return result;
+    }
+
+    videoButtonTitle(user) {
+        // Mouse-over title text for the video button.
+        let parts = ["Open video stream"];
+
+        if (user.video & VideoFlag.MutualRequired) {
+            parts.push("mutual video sharing required");
+        }
+
+        if (user.video & VideoFlag.MutualOpen) {
+            parts.push("will auto-open your video");
+        }
+
+        if (user.video & VideoFlag.VipOnly) {
+            parts.push(`${this.vipConfig.Name} only`);
+        }
+
+        if (user.video & VideoFlag.NonExplicit) {
+            parts.push("prefers non-explicit video");
+        }
+
+        return parts.join("; ");
+    }
+}
+
+const WebRTC = new WebRTCController();
+export default WebRTC;