mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-03-18 09:10:49 +00:00
b7a1d4bf8f
- Add basic video room based on demo. - Set port range to use for RTP. - coturn: Add component for time-limited TURN configuration. Signed-off-by: James Valleroy <jvalleroy@mailbox.org> [sunil: Don't error out when coturn is not installed/configured] [sunil: Prepend data- to custom attribute in HTML] [sunil: Convert SVG with embedded bitmap to vector graphics] [sunil: Hide Javascript license information in footer] [sunil: Minor changes to comments for styling] Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
210 lines
8.4 KiB
HTML
210 lines
8.4 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
# This file based on example code from Janus which is
|
|
# licensed as follows.
|
|
#
|
|
# 2014-2022 Meetecho
|
|
#
|
|
# GPL-3 with OpenSSL exception
|
|
# If you modify this Program, or any covered work,
|
|
# by linking or combining it with OpenSSL
|
|
# (or a modified version of that library),
|
|
# containing parts covered by the terms of OpenSSL License,
|
|
# the licensors of this Program grant you
|
|
# additional permission to convey the resulting work.
|
|
# Corresponding Source for a non-source form of such a combination
|
|
# shall include the source code for the parts of openssl used
|
|
# as well as that of the covered work.
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Janus Video Room</title>
|
|
|
|
<script type="text/javascript"
|
|
src="/javascript/webrtc-adapter/adapter.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/jquery/jquery.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/jquery-blockui/jquery.blockUI.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/bootstrap/js/bootstrap.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/bootbox/bootbox.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/spin.js/spin.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/toastr/toastr.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="{% static 'janus/janus-freedombox-config.js' %}" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/janus-gateway/janus.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="{% static 'janus/janus-video-room.js' %}" ></script>
|
|
|
|
<link rel="stylesheet"
|
|
href="/javascript/bootswatch/cerulean/bootstrap.min.css"
|
|
type="text/css"/>
|
|
<link rel="stylesheet" href="/javascript/toastr/toastr.min.css"
|
|
type="text/css"/>
|
|
<link rel="stylesheet"
|
|
href="{% static 'janus/janus-video-room.css' %}" type="text/css"/>
|
|
</head>
|
|
|
|
<body data-user-turn-config="{{ user_turn_config }}">
|
|
<div class="container" id="content" role="main">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>Janus Video Room
|
|
<button class="btn btn-default" autocomplete="off"
|
|
id="start">Start</button>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="container" id="details">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>Details</h3>
|
|
<p>To use the video room, just insert a username to join
|
|
the default room that is configured. This will add you
|
|
to the list of participants, and allow you to
|
|
automatically send your audio/video frames and receive
|
|
the other participants' feeds. The other participants
|
|
will appear in separate panels, whose title will be
|
|
the names they chose when registering at the video room.</p>
|
|
<p>Press the <code>Start</code> button above to launch
|
|
the video room.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container hide" id="videojoin">
|
|
<div class="row">
|
|
<span class="label label-info" id="you"></span>
|
|
<div class="col-md-12" id="controls">
|
|
<div class="input-group margin-bottom-md hide" id="registernow">
|
|
<span class="input-group-addon">@</span>
|
|
<input autocomplete="off" class="form-control"
|
|
autocomplete="off" type="text"
|
|
placeholder="Choose a display name"
|
|
id="username"
|
|
onkeypress="return checkEnter(this, event);"></input>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-success" autocomplete="off"
|
|
id="register">Join the room</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container hide" id="videos">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Local Video <span class="label label-primary hide"
|
|
id="publisher"></span>
|
|
<div class="btn-group btn-group-xs pull-right hide">
|
|
<div class="btn-group btn-group-xs">
|
|
<button id="bitrateset" autocomplete="off"
|
|
class="btn btn-primary
|
|
dropdown-toggle"
|
|
data-toggle="dropdown">
|
|
Bandwidth<span class="caret"></span>
|
|
</button>
|
|
<ul id="bitrate" class="dropdown-menu" role="menu">
|
|
<li><a href="#" id="0">No limit</a></li>
|
|
<li><a href="#" id="128">Cap to 128kbit</a></li>
|
|
<li><a href="#" id="256">Cap to 256kbit</a></li>
|
|
<li><a href="#" id="512">Cap to 512kbit</a></li>
|
|
<li><a href="#" id="1024">Cap to 1mbit</a></li>
|
|
<li><a href="#" id="1500">Cap to 1.5mbit</a></li>
|
|
<li><a href="#" id="2000">Cap to 2mbit</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body" id="videolocal"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Remote Video #1 <span class="label label-info hide"
|
|
id="remote1"></span>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body relative" id="videoremote1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Remote Video #2 <span class="label label-info hide"
|
|
id="remote2"></span>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body relative" id="videoremote2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Remote Video #3 <span class="label label-info hide"
|
|
id="remote3"></span>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body relative" id="videoremote3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Remote Video #4 <span class="label label-info hide"
|
|
id="remote4"></span>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body relative" id="videoremote4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">
|
|
Remote Video #5 <span class="label label-info hide"
|
|
id="remote5"></span>
|
|
</h3>
|
|
</div>
|
|
<div class="panel-body relative" id="videoremote5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<a href="{% static 'jslicense.html' %}" data-jslicense="1">
|
|
{% trans "JavaScript license information" %}</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|