From 134f9218a8318e4886c58166f4d4a4b0e533edf1 Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Thu, 17 Oct 2024 20:13:08 -0700 Subject: [PATCH] Add webcam troubleshooting tips to the About page --- pkg/pages.go | 3 +- src/App.vue | 2 +- web/templates/about.html | 221 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 222 insertions(+), 4 deletions(-) diff --git a/pkg/pages.go b/pkg/pages.go index b8278eb..f124104 100644 --- a/pkg/pages.go +++ b/pkg/pages.go @@ -109,7 +109,8 @@ func AboutPage() http.HandlerFunc { "CacheHash": util.RandomString(8), // The current website settings. - "Config": config.Current, + "Config": config.Current, + "Hostname": r.Host, } tmpl.Funcs(template.FuncMap{ diff --git a/src/App.vue b/src/App.vue index cb300d0..9ef7303 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2237,7 +2237,7 @@ export default { // Begin dark video detection. this.initDarkVideoDetection(); }).catch(err => { - this.ChatClient(`Webcam error: ${err}`); + this.ChatClient(`Webcam error: ${err}

Please see the troubleshooting guide for help.`); }).finally(() => { this.webcam.busy = false; }) diff --git a/web/templates/about.html b/web/templates/about.html index 3f030aa..a5b66c7 100644 --- a/web/templates/about.html +++ b/web/templates/about.html @@ -51,14 +51,15 @@
  • Feature Highlights
  • Supported Browsers
  • Privacy
    • +
  • Troubleshooting

    • Tour of the user interface

    - Screenshot of the user interface on desktop + Screenshot of the user interface on desktop
    Pictured: Screenshot of the user interface on tablet or desktop-sized screens.

    - Screenshot of the user interface on mobile + Screenshot of the user interface on mobile
    Pictured: Screenshot of the mobile interface
    @@ -197,6 +198,8 @@ in to their webcams, respectively).

    +
    +

    Feature Highlights

    Emoji Reactions

    @@ -259,6 +262,8 @@ website.

    +
    +

    Video Sharing How-To's

    About webcam sharing

    @@ -374,6 +379,8 @@ sure that you have booted them!

    +
    +

    Supported Browsers

    @@ -382,6 +389,8 @@ Edge, Safari, Androids and iPads).

    +
    +

    Privacy

    @@ -426,6 +435,214 @@ so choose your risk tolerance accordingly. + +

    + +

    Troubleshooting

    + +

    + This section contains some troubleshooting advice for issues commonly experienced in the chat room. +

    + +

    Webcam Sharing

    + +

    Permission Denied, or NotAllowedError

    + +

    + If you see an error message from ChatClient that says + something like "Webcam error: Permission denied" or a "NotAllowedError," this section is for you. +

    + +

    + The reason for this error is that your web browser did not grant access to your Camera and Microphone + for the chat room to use. This may be because you accidentally clicked on the "Deny" button when your + browser asked you for permission, or because your web browser itself does not have permission for + these devices on your computer. +

    + +

    + When you encounter this error, there are two places to look to resolve this: +

    + +
      +
    1. + In your web browser's settings (e.g. in Google Chrome or Firefox), make sure that you are granting + permission for your Camera and Microphone to the chat room's website ({{.Hostname}}). +
      2. +
    2. + In your operating system's settings, ensure that your web browser itself has permission to use + your Camera and Microphone. Notice: on recent Mac OS and Windows systems, your + web browser might not have permission by default to access these devices! +
      3. +
    + +

    + Please see the following sections for in-depth guidance on where to look. +

    + +

    + Notice: webcam sharing will require both your Camera and your Microphone + permission - if either one is denied, webcam sharing will fail. +

    + +

    1. Check your web browser's permissions for {{.Hostname}}

    + +

    + Go into your web browser's settings, to the "Privacy" or "Permissions" section and verify that + {{.Hostname}} has permissions to use your Camera and your Microphone. + Or at the very least: make sure that these settings are not set to "Deny" for {{.Hostname}}. +

    + +

    + For example, on Google Chrome: +

    + + + +

    + Or for example, on Mozilla Firefox: +

    + + + +

    + After changing your browser settings, exit and restart your web browser and log on to the chat room. + When going on webcam, hopefully your browser should ask you for permission for your webcam and microphone: be sure to + click on "Allow" when prompted. +

    + +

    + If the change in your web browser's settings doesn't resolve the permission error, then check in your operating system's settings. +

    + +

    2. Check in your operating system's settings

    + +

    + For example, if you are on Mac OS: +

    + + + +

    + Or for example, if you are on Windows 10 or Windows 11: +

    + + + +

    Other Webcam Errors

    + +

    + The most common error is a Permission Error as described above, but there are some less common + error messages you may experience. Here is a short list of some of them: +

    + + + +

    + Other possible errors should be uncommon. If this troubleshooting guide has not been helpful, try copying + the error message into a search engine and find information online: all of the text following "Webcam error:" + will be coming from your web browser, so relevant results may be found online. A possible place to start may + be the Mozilla documentation for getUserMedia. +

    + +

    Other peoples' webcams don't load

    + +

    + It may sometimes happen that you clicked to watch somebody else's webcam on chat, and their video doesn't + load. If it only happens with some cameras (but other cameras load correctly), then the problem is + most likely on that person's side and not your own: their camera likely doesn't work for anybody + else who is trying to watch it, either. +

    + +

    + Webcam sharing on the chat room works by "peer to peer" direct connections between chatters. Usually, this + tends to "just work" for most people, but sometimes your network connection or firewall can get in the way + and prevent a connection from being established. +

    + +

    + The most common kinds of network conditions that cause problems connecting to webcams include: +

    + + + +

    + For some specific advice: +

    + +