Update documentation

This commit is contained in:
Noah 2023-09-25 17:29:44 -07:00
parent 267cda7989
commit 810115d20c
4 changed files with 295 additions and 79 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 216 KiB

View File

@ -12,7 +12,7 @@
</head> </head>
<body> <body>
<div class="container is-fullhd"> <div class="container is-fullhd p-2">
<div class="content my-5"> <div class="content my-5">
<h1>About BareRTC</h1> <h1>About BareRTC</h1>
@ -47,15 +47,15 @@
<ul> <ul>
<li><a href="#tour">Tour of the user interface</a></li> <li><a href="#tour">Tour of the user interface</a></li>
<li><a href="#browsers">Supported browsers</a></li> <li><a href="#video-sharing">Video Sharing How-To's</a></li>
<li><a href="#webcam">Webcam sharing</a></li> <li><a href="#features">Feature Highlights</a></li>
<li><a href="#markdown">Styling your messages</a></li> <li><a href="#browsers">Supported Browsers</a></li>
<li><a href="#privacy">Privacy</a></li> <li><a href="#privacy">Privacy</a></li>
</ul> </ul>
<h1 id="tour">Tour of the user interface</h1> <h1 id="tour">Tour of the user interface</h1>
<div class="has-text-centered"> <div class="has-text-centered mb-4">
<img src="/static/img/screenshot.png" alt="Screenshot of the user interface on desktop"> <img src="/static/img/screenshot.png" alt="Screenshot of the user interface on desktop">
<br><em>Pictured: Screenshot of the user interface on tablet or desktop-sized screens.</em><br><br> <br><em>Pictured: Screenshot of the user interface on tablet or desktop-sized screens.</em><br><br>
<img src="/static/img/mobile.png" alt="Screenshot of the user interface on mobile"> <img src="/static/img/mobile.png" alt="Screenshot of the user interface on mobile">
@ -82,9 +82,29 @@
0 0
</button> </button>
button, which will show the number of watchers inside the button itself. button, which will show the number of watchers inside the button itself.
<ul>
{{if .Config.PermitNSFW}}
<li>
The <button type="button" class="button is-small is-outlined is-dark px-1">
<i class="fa fa-fire has-text-danger mr-1"></i> Explicit
</button>
button will toggle the setting on your camera. If you are going to be
behaving sexually on cam, we ask that you please mark your own camera
as 'Explicit' by using this button. The button will illuminate in red
when active, and look like:
<button type="button" class="button is-small is-danger px-1">
<i class="fa fa-fire mr-1"></i> Explicit
</button>
</li>
{{end}}
<li>
You can also see who is Watching your camera by clicking on the "Watching"
tab on the Who's Online list.
</li>
</ul>
</li> </li>
<li> <li>
The <strong>Who List</strong> shows all of the people who are currently connected The <strong>Who Is Online</strong> list shows all of the people who are currently connected
to the chat room. The Who List is global to the entire chat - it is the same list to the chat room. The Who List is global to the entire chat - it is the same list
of people no matter which Channel you are currently looking at. In the Who List of people no matter which Channel you are currently looking at. In the Who List
you may also find buttons to open a Direct Message (DM) or tune in to somebody's you may also find buttons to open a Direct Message (DM) or tune in to somebody's
@ -94,7 +114,10 @@
<button type="button" class="button is-small px-2 py-1"> <button type="button" class="button is-small px-2 py-1">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
</button> </button>
This button will open their profile page, if they have one. This button will open their profile page, if they have one. The icon may
be color-coded for the user's gender, if available: <i class="fa fa-user has-text-gender-male"></i> male,
<i class="fa fa-user has-text-gender-female"></i> female, and
<i class="fa fa-user has-text-gender-other"></i> non-binary/trans/other.
</li> </li>
<li> <li>
<button type="button" class="button is-small px-2 py-1"> <button type="button" class="button is-small px-2 py-1">
@ -117,16 +140,40 @@
<li> <li>
The <strong>Channels &amp; DMs</strong> panel lists the available public chat channels The <strong>Channels &amp; DMs</strong> panel lists the available public chat channels
you may participate in as well as any currently open DMs for private one-on-one chats you may participate in as well as any currently open DMs for private one-on-one chats
with other people. Some channels may have red notifications beside them to indicate with other people. Some channels may have notification counters beside them to indicate
unread messages have appeared. unread messages have appeared.
<ul>
<li>
<strong>Note:</strong> the Chat Rooms are just public channels that <em>everybody</em>
is "in" and is designed to organize public conversations into various topics. For example,
one chat room may be a dedicated space for people to share photos on chat so that the
main conversation channels don't get spammed too much with those photos.
</li>
</ul>
</li> </li>
<li> <li>
The <strong>Message entry box</strong> at the bottom of the screen is how you type a The <strong>Message entry box</strong> at the bottom of the screen is how you type a
message and send it to the currently selected Channel or DM conversation. message and send it to the currently selected Channel or DM conversation.
<ul>
<li>
In public channels you may <strong>send a picture</strong> by clicking on the picture
button to the left of the message box.
</li> </li>
<li> <li>
In the upper right, the <i class="fa fa-gear"></i> <strong>Settings</strong> button You may <strong>add an emoji</strong> to your message by clicking on the smile icon
will show some chat settings. Some interesting features in there include: to the right of the message box.
</li>
<li>
You may <strong>at-mention</strong> people in chat by typing the "@" symbol, which
should prompt an auto-complete of users currently online. You may hit the Tab key
to insert the currently selected name into your message.
</li>
</ul>
</li>
<li>
In the upper right, the <i class="fa fa-bars"></i> <strong>Menu</strong> button houses
some options such as the <i class="fa fa-gears"></i> <strong>Chat Settings</strong>.
Some interesting features in there include:
<ul> <ul>
<li> <li>
<strong>Video scaling:</strong> you can make the webcam videos larger on <strong>Video scaling:</strong> you can make the webcam videos larger on
@ -150,80 +197,71 @@
in to their webcams, respectively). in to their webcams, respectively).
</p> </p>
<h1 id="browsers">Supported browsers</h1> <h1 id="features">Feature Highlights</h1>
<h3 id="emoji-reactions">Emoji Reactions</h3>
<p> <p>
Currently, BareRTC works best on <i class="fab fa-chrome"></i> Chromium browsers (including Google You may add emoji reactions to chat messages by clicking on the
Chrome, Microsoft Edge, Opera, Brave, and other Chromium derivatives) as well as <button type="button" class="button is-small has-text-grey is-outlined px-2">
<i class="fab fa-firefox"></i> Mozilla Firefox. <i class="fa fa-plus mr-2"></i> <i class="fa fa-heart"></i>
</button>
button at the bottom right corner.
</p> </p>
<p> <p>
It works in these browsers on desktop operating systems (including <i class="fab fa-windows"></i> Windows, Reactions added by yourself or others will appear at the bottom of their message. You can
<i class="fab fa-apple"></i> Mac OS and <i class="fab fa-linux"></i> GNU/Linux) as well as on see who reacted by hovering your mouse cursor over the button, or you can 'upvote' their
<i class="fab fa-android"></i> Android devices. reaction by clicking on it.
</p>
<h3>Muting spammy users</h3>
<p>
If somebody on chat is bothering you, you may <strong>mute</strong> their messages by clicking
on the red <i class="fa fa-comment-slash has-text-danger"></i> button on their message.
</p> </p>
<p> <p>
Unfortunately, the chat <strong class="has-text-danger">does not work</strong> on Apple's mobile While they are muted:
devices such as the iPad and iPhone -- but research on this is underway and hopefully iOS devices </p>
will be supported soon!
<ul>
<li>You will no longer see their future messages in public chat rooms.</li>
<li>You will no longer receive any of their future Direct Messages (DMs).</li>
<li>
They will not be allowed to watch your webcam if you are sharing. The chat
server will lie and tell them your camera <em>isn't even online</em> so they
will not know they had been muted.
</li>
</ul>
<p>
The mute is <strong>temporary</strong> and will last for the remainder of your chat
session (until you log off).
</p>
<h3 id="markdown">Styling Your Messages</h3>
<p>
BareRTC supports Markdown syntax for your chat messages. You can make text <strong>bold</strong>
by putting asterisks around part of it, <strong>**like this**</strong> or make text italic with
<em>*single asterisks*</em>.
</p> </p>
<p> <p>
Feature support matrix of browsers currently tested: Hyperlinks you paste that begin with https:// will be clickable as-is, or you can create a custom
label for it by typing e.g. <code>[click my link](https://www.wikipedia.org/)</code>.
</p> </p>
<table class="table table-striped"> <p>
<thead> To learn more about Markdown, please check out the <a href="https://www.markdownguide.org" target="_blank">Markdown Guide</a>
<tr> website.
<th>Device Type</th> </p>
<th>Web Browsers</th>
<th>Chat works?</th>
<th>Video works?</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fa fa-computer"></i> All Desktops</td>
<td><i class="fab fa-firefox"></i> Mozilla Firefox</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<td><i class="fa fa-computer"></i> All Desktops</td>
<td><i class="fab fa-chrome"></i> Chromium (Chrome, Edge)</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<td><i class="fab fa-apple"></i> Mac OS Desktop</td>
<td><i class="fab fa-chrome"></i> Safari</td>
<td>✔️</td>
<td></td>
</tr>
<tr>
<td><i class="fab fa-android"></i> Android</td>
<td><i class="fab fa-firefox"></i> Mozilla Firefox</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<td><i class="fab fa-android"></i> Android</td>
<td><i class="fab fa-chrome"></i> Chromium (Vanadium)</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<td><i class="fab fa-apple"></i> iPhone &amp; iPad</td>
<td><i class="fa fa-globe"></i> All browsers</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h1 id="webcam">Webcam sharing</h1> <h1 id="video-sharing">Video Sharing How-To's</h1>
<h3 id="webcam">About webcam sharing</h3>
<p> <p>
The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong> The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong>
@ -250,22 +288,200 @@
way so that they may be banned from the chat room. way so that they may be banned from the chat room.
</p> </p>
<h1 id="markdown">Styling Your Messages</h1> <h3>How do I go on video?</h3>
<p> <p>
BareRTC supports Markdown syntax for your chat messages. You can make text <strong>bold</strong> To share your webcam, click on the green
by putting asterisks around part of it, <strong>**like this**</strong> or make text italic with <button type="button" class="button is-small is-success px-1">
<em>*single asterisks*</em>. <i class="fa fa-video mr-2"></i>
Share webcam
</button>
button at the top left of the web page. This will open a modal with some options for
your camera:
</p>
<ul>
<li>
You may start with your microphone muted by default.
</li>
{{if .Config.PermitNSFW}}
<li>
You may mark your camera as "Explicit" to begin with. If you are intending immediately to
behave sexually on camera, please mark this box so that your camera will appear 'red' by
default and other people on chat can know what they're getting into when they click to
watch your camera.
</li>
{{end}}
<li>
You may opt-in to some "mutual webcam settings":
<ul>
<li>You may require your viewers to also be sharing their own camera first before they can open yours.</li>
<li>You may automatically open your viewer's cameras when they open yours (and they are also broadcasting).</li>
</ul>
</li>
</ul>
<h3>How do I stop my camera?</h3>
<p>
When you are broadcasting, the red "<i class="fa fa-stop"></i> Stop" button at the top of the
page will turn your camera off.
</p>
<h3>How do I mute my camera's microphone?</h3>
<p>
The button to <i class="fa fa-mute"></i> Mute will be at the top of the page next to the
<i class="fa fa-stop"></i> Stop button. Alternatively, you can click on the microphone inside
your own webcam video preview to toggle the mute that way. Either button works!
</p>
<h3>How do I see who is watching me?</h3>
<p>
You may click on the <button type="button" class="button is-small is-info is-outlined ml-1 px-1">
<i class="fa fa-eye mr-2"></i>
0
</button> button at the top of the page to see who is watching you. The number inside the
button will be your current number of viewers.
</p> </p>
<p> <p>
Hyperlinks you paste that begin with https:// will be clickable as-is, or you can create a custom You may also click on the <i class="fa fa-eye"></i> Watching tab in the Who's Online list.
label for it by typing e.g. <code>[click my link](https://www.wikipedia.org/)</code>. </p>
<h3>How do I stop somebody from watching me?</h3>
<p>
On the Who's Online list, click on the <i class="fa fa-eye"></i> Watching tab to see who
is currently watching your camera.
</p> </p>
<p> <p>
To learn more about Markdown, please check out the <a href="https://www.markdownguide.org" target="_blank">Markdown Guide</a> To 'boot' somebody off your camera, click on the
website. <button type="button" class="button is-small px-2 py-1"
title="Kick this person off your cam">
<i class="fa fa-user-xmark has-text-danger"></i>
</button>
button next to their name. This will kick them off your camera and they will not
be allowed to re-open your cam for the remainder of <em>your</em> chat session.
</p>
<p>
To people who have been booted from your camera, the chat server will tell them that
your camera <em>isn't even broadcasting</em> at all! They will see a greyed-out video
button and may think you have simply turned off your camera, and they won't know for
sure that you have booted them!
</p>
<h1 id="browsers">Supported Browsers</h1>
<p>
Currently, BareRTC works best on <i class="fab fa-chrome"></i> Chromium browsers (including Google
Chrome, Microsoft Edge, Opera, Brave, and other Chromium derivatives) as well as
<i class="fab fa-firefox"></i> Mozilla Firefox.
</p>
<p>
It works in these browsers on desktop operating systems (including <i class="fab fa-windows"></i> Windows,
<i class="fab fa-apple"></i> Mac OS and <i class="fab fa-linux"></i> GNU/Linux) as well as on
<i class="fab fa-android"></i> Android devices.
</p>
<p>
Feature support matrix of browsers currently tested:
</p>
<table class="table table-striped mb-5">
<thead>
<tr>
<th>Device Type</th>
<th>Web Browsers</th>
<th>Chat works?</th>
<th>Video works?</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fa fa-computer"></i> All Desktops</td>
<td><i class="fab fa-firefox"></i> Mozilla Firefox</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
</tr>
<tr>
<td><i class="fa fa-computer"></i> All Desktops</td>
<td><i class="fab fa-chrome"></i> Chromium (Chrome, Edge)</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
</tr>
<tr>
<td><i class="fab fa-apple"></i> Mac OS Desktop</td>
<td><i class="fab fa-chrome"></i> Safari</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-asterisk has-text-warning-dark"></i></td>
</tr>
<tr>
<td><i class="fab fa-android"></i> Android</td>
<td><i class="fab fa-firefox"></i> Mozilla Firefox</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
</tr>
<tr>
<td><i class="fab fa-android"></i> Android</td>
<td><i class="fab fa-chrome"></i> Chromium (Vanadium)</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
</tr>
<tr>
<td><i class="fab fa-apple"></i> iPhone &amp; iPad</td>
<td><i class="fa fa-globe"></i> All browsers</td>
<td><i class="fa fa-check has-text-success-dark"></i></td>
<td><i class="fa fa-asterisk has-text-warning-dark"></i></td>
</tr>
</tbody>
</table>
<h5 id="safari"><i class="fa fa-asterisk has-text-warning-dark"></i> Apple Safari Browsers</h5>
<p>
This section applies to web browsers based on Safari, which includes <strong>every</strong> web
browser on iPad and iPhone. There are some more nuances to the support level of these browsers on
BareRTC.
</p>
<p>
The regular chat features (logging in, chatting, sharing pictures) are 100% supported on Safari,
but webcam sharing may be more difficult to get working. On iPad, iPhone, and Safari browsers,
connecting to somebody's webcam may <strong>only</strong> work correctly if you follow exactly
these steps:
</p>
<ol>
<li>
First, you need to share your own local webcam first (by clicking on the green "Share webcam"
button at the top of the chat page).
</li>
<li>
Then, you may only be able to view somebody else's camera <strong>IF</strong> they have marked
the setting "When somebody opens my camera, I also open their camera automatically."
</li>
</ol>
<p>
This is because Apple Safari only supports two-directional video calls, which is in contrast to the
way that BareRTC was designed to work: it is intended to be possible that somebody can start their webcam
and be watched by anybody who wants to tune in, without it always needing to be a two-way video call. But
for Apple Safari browsers, uni-directional video channels are not supported, so iPads and iPhones are only
able to successfully connect to a video <strong>if</strong> that person opts-in to open your video in
return (thus making it a two-way video call).
</p>
<p>
For <i class="fab fa-apple"></i> <strong>macOS users</strong>, it is recommended to use a Chromium or
Firefox browser instead of Safari for the best experience. It is only Safari-based browsers that have
this limitation. Unfortunately, there is no alternative for iPad or iPhone: <em>every</em> web browser on
iOS is based on Safari per Apple's app store guidelines. (Chrome and Firefox on iOS were not allowed to
bring their <em>actual</em> web browser engine to Apple's mobiles).
</p> </p>
<h1 id="privacy">Privacy</h1> <h1 id="privacy">Privacy</h1>