530 lines
27 KiB
HTML
530 lines
27 KiB
HTML
{{define "index"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css">
|
|
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
|
|
<title>About BareRTC</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container is-fullhd p-2">
|
|
<div class="content my-5">
|
|
<h1>About BareRTC</h1>
|
|
|
|
<p>
|
|
This chat room software is called <strong>BareRTC</strong> and this
|
|
page contains information about the software and how to use it.
|
|
</p>
|
|
|
|
<p>
|
|
BareRTC is an open source project released under the GNU General Public
|
|
License with code available
|
|
<a href="https://git.kirsle.net/apps/BareRTC" target="_blank">here</a>.
|
|
</p>
|
|
|
|
<h1>About {{AsHTML .Config.Title}}</h1>
|
|
|
|
<p>
|
|
<strong>{{AsHTML .Config.Title}}</strong> is the name of this particular
|
|
BareRTC server. The administrator may have left some links to more
|
|
info below:
|
|
</p>
|
|
|
|
<ul>
|
|
<li><strong>Website:</strong>
|
|
<a href="{{.Config.WebsiteURL}}" target="_blank">{{.Config.WebsiteURL}}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<h1>Help & Support</h1>
|
|
|
|
<ul>
|
|
<li><a href="#tour">Tour of the user interface</a></li>
|
|
<li><a href="#video-sharing">Video Sharing How-To's</a></li>
|
|
<li><a href="#features">Feature Highlights</a></li>
|
|
<li><a href="#browsers">Supported Browsers</a></li>
|
|
<li><a href="#privacy">Privacy</a></li>
|
|
</ul>
|
|
|
|
<h1 id="tour">Tour of the user interface</h1>
|
|
|
|
<div class="has-text-centered mb-4">
|
|
<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>
|
|
<img src="/static/img/mobile.png" alt="Screenshot of the user interface on mobile">
|
|
<br><em>Pictured: Screenshot of the mobile interface</em>
|
|
</div>
|
|
|
|
<p>
|
|
Above are screenshots of how the chat room looks on desktop and mobile displays, respectively.
|
|
For a description of some of the features pointed out above:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<strong>Your camera controls:</strong> Clicking on the
|
|
<button type="button" class="button is-small is-success px-1">
|
|
<i class="fa fa-video mr-2"></i>
|
|
Share webcam
|
|
</button>
|
|
button will enable your webcam and your video may be watched by other people
|
|
in the chat room. While broadcasting, you can Stop your webcam, Mute your
|
|
microphone, and see who is currently watching you by clicking 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, 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>
|
|
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
|
|
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
|
|
webcam if they are currently broadcasting.
|
|
<ul>
|
|
<li>
|
|
<button type="button" class="button is-small px-2 py-1">
|
|
<i class="fa fa-user"></i>
|
|
</button>
|
|
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>
|
|
<button type="button" class="button is-small px-2 py-1">
|
|
<i class="fa fa-message"></i>
|
|
</button>
|
|
This button will open a Direct Message (DM) chat with this person.
|
|
</li>
|
|
<li>
|
|
<button type="button" class="button is-small px-2 py-1 is-info is-outlined">
|
|
<i class="fa fa-video"></i>
|
|
</button>
|
|
This button will open the user's webcam, if they are broadcasting.
|
|
A <strong class="has-text-info">blue</strong> button means they're live,
|
|
a <strong class="has-text-danger">red</strong> means their video feed is
|
|
marked <abbr title="Not Safe For Work">NSFW</abbr> or explicit. A greyed
|
|
out button means they are <em>not</em> currently broadcasting their video.
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
The <strong>Channels & 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
|
|
with other people. Some channels may have notification counters beside them to indicate
|
|
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>
|
|
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.
|
|
<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>
|
|
You may <strong>add an emoji</strong> to your message by clicking on the smile icon
|
|
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>
|
|
<li>
|
|
<strong>Video scaling:</strong> you can make the webcam videos larger on
|
|
your screen to see your chat partners in better detail.
|
|
</li>
|
|
<li>
|
|
<strong>Sound effects:</strong> by default it plays a sound when you receive
|
|
a new Direct Message but you can also turn on sound effects for public chat
|
|
messages and when people join or exit the room. If the chat room is currently
|
|
empty, you could set a sound effect when somebody joins so you know there may
|
|
be someone to chat with then!
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
On <strong>mobile web browsers</strong> that don't have large enough screens to show everything
|
|
at once, the Chat Room screen is shown by default and buttons appear in the corners to get to
|
|
the two side panels (to change channels or manage your DMs, and to see Who Is Online and tune
|
|
in to their webcams, respectively).
|
|
</p>
|
|
|
|
<h1 id="features">Feature Highlights</h1>
|
|
|
|
<h3 id="emoji-reactions">Emoji Reactions</h3>
|
|
|
|
<p>
|
|
You may add emoji reactions to chat messages by clicking on the
|
|
<button type="button" class="button is-small has-text-grey is-outlined px-2">
|
|
<i class="fa fa-plus mr-2"></i> <i class="fa fa-heart"></i>
|
|
</button>
|
|
button at the bottom right corner.
|
|
</p>
|
|
|
|
<p>
|
|
Reactions added by yourself or others will appear at the bottom of their message. You can
|
|
see who reacted by hovering your mouse cursor over the button, or you can 'upvote' their
|
|
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>
|
|
While they are muted:
|
|
</p>
|
|
|
|
<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>
|
|
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>
|
|
To learn more about Markdown, please check out the <a href="https://www.markdownguide.org" target="_blank">Markdown Guide</a>
|
|
website.
|
|
</p>
|
|
|
|
<h1 id="video-sharing">Video Sharing How-To's</h1>
|
|
|
|
<h3 id="webcam">About webcam sharing</h3>
|
|
|
|
<p>
|
|
The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong>
|
|
connections between you and the other chat members to stream video and audio directly to one
|
|
another, without needing a server in the middle to relay all that data. In many cases, WebRTC
|
|
should "just work" but you may run into trouble broadcasting if your local network is heavily
|
|
firewalled (for example on a corporate or school network).
|
|
</p>
|
|
|
|
<p>
|
|
In many WebRTC video apps (such as Zoom, Jitsi, Google Hangouts, etc.), when one or both parties
|
|
are on such difficult networks, a server in the middle is used to transfer the video data between
|
|
them. BareRTC does not have any such server, as the bandwidth costs to carry your video could get
|
|
expensive! If your video sharing is not working, it's unfortunate but you should still be able to
|
|
have text chat conversations as normal.
|
|
</p>
|
|
|
|
<p>
|
|
<strong>Notice:</strong> because of the peer-to-peer nature of the webcam feature, it is possible
|
|
that your chat partner may discover your <a href="https://en.wikipedia.org/wiki/IP_address" target="_blank">IP address</a>
|
|
if they check their local computer's connections. This is true of all WebRTC-based video chat systems.
|
|
Also, it is possible that your chat partner may "screen record" your video -- also true of all video
|
|
sharing systems. Please inform a moderator if you know somebody is violating your privacy in this
|
|
way so that they may be banned from the chat room.
|
|
</p>
|
|
|
|
<h3>How do I go on video?</h3>
|
|
|
|
<p>
|
|
To share your webcam, click on the green
|
|
<button type="button" class="button is-small is-success px-1">
|
|
<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>
|
|
You may also click on the <i class="fa fa-eye"></i> Watching tab in the Who's Online list.
|
|
</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>
|
|
To 'boot' somebody off your camera, click on the
|
|
<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 & 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>
|
|
|
|
<h1 id="privacy">Privacy</h1>
|
|
|
|
<p>
|
|
Some of the privacy considerations with this chat room include:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
The server does not maintain long-term state of chat history. Messages are pushed out as
|
|
soon as they come in.
|
|
</li>
|
|
<li>
|
|
However, the server does keep temporary <strong>log files</strong> to help the server admin
|
|
troubleshoot issues and check on the health of the server. These logs may include chat
|
|
messages sent to public channels. Private chat (DMs) are <em>not</em> logged by default.
|
|
If the server is running in debug mode (which provides a ton of telemetry to diagnose issues),
|
|
the contents of DMs may be logged since debug mode will record the low-level chat protocol
|
|
messages sent between the server and clients.
|
|
</li>
|
|
<li>
|
|
Chat moderators <strong>DO NOT</strong> get to see the contents of your Direct Message
|
|
conversations - that feature is not programmed in to this chat room. The server logs which
|
|
might capture your conversations are usually not actively monitored. Consider taking your especially
|
|
sensitive conversations to a different platform if you are very concerned about it.
|
|
</li>
|
|
<li>
|
|
Webcam sharing is <strong>peer-to-peer</strong> so it is possible that your chat partner
|
|
could identify your IP address by checking their computer's open connections. But this is
|
|
true of basically all WebRTC webcam services and is part of how WebRTC works.
|
|
</li>
|
|
<li>
|
|
As with all video sharing services, it is always possible that your chat partner may screen
|
|
record their computer and thus record a copy of your video. This is a risk inherent with all
|
|
video sharing platforms - you can't control what software the other party may be running,
|
|
so choose your risk tolerance accordingly.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
{{end}}
|