apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Spit and polish

Browse Source
This commit is contained in:
Noah 2023-02-06 13:52:05 -08:00
parent e84cc146ad
commit 8a639109b2
2 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/templates/about.html
View File

@ -41,11 +41,48 @@
</li>
</ul>
<hr>
<h1>Help &amp; Support</h1>
<h2>Browser Support</h2>
<p>
This page will be fleshed out later with help and tips for using this
chat room.
BareRTC should work on most modern web browsers. It has been tested in
Firefox and Chromium on desktop Linux and on Android. It utilizes open
web standards including
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API" target="_blank">WebSockets</a>
(for most of the text chat features) and <a href="https://webrtc.org/" target="_blank">WebRTC</a>
(for webcam and microphone sharing).
</p>
<h2>Webcam Streaming</h2>
<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>
<h2>Styling Your Messages</h2>
<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>
</div>
</div>

18
web/templates/chat.html
View File

@ -160,10 +160,10 @@
<!-- Top header panel -->
<header class="chat-header">
<div class="columns is-mobile">
<div class="column is-narrow">
<div class="column is-narrow pr-1">
<strong class="is-6">{{AsHTML .Config.Branding}}</strong>
</div>
<div class="column">
<div class="column px-1">
<!-- Stop/Start video buttons -->
<button type="button"
v-if="webcam.active"
@ -184,14 +184,14 @@
<!-- Mute/Unmute my mic buttons (if streaming)-->
<button type="button"
v-if="webcam.active && !webcam.muted"
class="button is-small is-danger is-outlined ml-2"
class="button is-small is-danger is-outlined ml-1 px-1"
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Mute
</button>
<button type="button"
v-if="webcam.active && webcam.muted"
class="button is-small is-danger ml-2"
class="button is-small is-danger ml-1 px-1"
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Unmute
@ -200,16 +200,18 @@
<!-- Watchers button -->
<button type="button"
v-if="webcam.active"
class="button is-small is-info is-outlined ml-2"
class="button is-small is-info is-outlined ml-1 px-1"
@click="showViewers()">
<i class="fa fa-eye mr-2"></i>
[[Object.keys(webcam.watching).length]]
</button>
</div>
<div class="column is-narrow">
<a href="/about" target="_blank" class="button is-small is-link">About</a>
<div class="column is-narrow pl-1">
<a href="/about" target="_blank" class="button is-small is-link px-2">
<i class="fa fa-info-circle"></i>
</a>
<button type="button"
class="button is-small is-grey"
class="button is-small is-light ml-1 px-2"
@click="showSettings()"
title="Chat Settings">
<i class="fa fa-gear"></i>