mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-05-13 10:30:16 +00:00
b6bade7d06
- Bootswatch is a theme library for bootstrap. In Debian, only 3.x version of the package is available. It is compatible with bootstrap 3.x but not bootstrap 5. Drop the theming altogether and use the basic bootstrap style (which is already very close to the theme). - Updated copyright year, mention the video room files in debian/copyright. - Drop libjs-spin.js which is no longer used by the updated code. - Change bootstrap version to 5.x from the earlier 4.x. Also add node-popper2 library (needed by bootstrap5 and video room code) as explicit dependency. - Add missing style for btn-default class dropped in bootstrap 5. - .simulcast-button CSS style is not longer needed as updated code used flex box with .d-flex bootstrap class. Tests: - Compare the files in janus source code around Mar 2022 with the files in FreedomBox source code before this patch. Compare latest janus source code with the files after this patch. Both sets of changes are very similar. - Connect to video room using two browser windows. Connection is successful and 2 video streams are shown in each of the browser windows. - Styling looks close to the demo on janus website and is acceptable. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
209 lines
8.5 KiB
HTML
209 lines
8.5 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-2025 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/popperjs2/popper.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/jquery-blockui/jquery.blockUI.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/bootstrap5/js/bootstrap.min.js" ></script>
|
|
<script type="text/javascript"
|
|
src="/javascript/bootbox/bootbox.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/bootstrap5/css/bootstrap.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"/>
|
|
<link rel="stylesheet"
|
|
href="/javascript/font-awesome/css/font-awesome.min.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">
|
|
<div class="pb-2 mt-4 mb-2 border-bottom">
|
|
<h1>Janus Video Room
|
|
<button class="btn btn-default" autocomplete="off"
|
|
id="start">Start</button>
|
|
</h1>
|
|
</div>
|
|
</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 mt-4 hide" id="videojoin">
|
|
<div class="row">
|
|
<span class="badge bg-info" id="you"></span>
|
|
<div class="col-md-12" id="controls">
|
|
<div class="input-group mt-3 mb-1 hide" id="registernow">
|
|
<span class="input-group-text">👤</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 mt-4 hide" id="videos">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Local Video <span class="badge bg-primary hide"
|
|
id="publisher"></span>
|
|
<div class="btn-group btn-group-sm top-right hide">
|
|
<div class="btn-group btn-group-sm">
|
|
<button id="bitrateset" autocomplete="off"
|
|
class="btn btn-primary
|
|
dropdown-toggle"
|
|
data-bs-toggle="dropdown">
|
|
Bandwidth
|
|
</button>
|
|
<ul id="bitrate" class="dropdown-menu" role="menu">
|
|
<a class="dropdown-item" href="#" id="0">No limit</a>
|
|
<a class="dropdown-item" href="#" id="128">Cap to 128kbit</a>
|
|
<a class="dropdown-item" href="#" id="256">Cap to 256kbit</a>
|
|
<a class="dropdown-item" href="#" id="512">Cap to 512kbit</a>
|
|
<a class="dropdown-item" href="#" id="1024">Cap to 1mbit</a>
|
|
<a class="dropdown-item" href="#" id="1500">Cap to 1.5mbit</a>
|
|
<a class="dropdown-item" href="#" id="2000">Cap to 2mbit</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
<div class="card-body" id="videolocal"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Remote Video #1 <span class="badge bg-info hide"
|
|
id="remote1"></span></span>
|
|
</div>
|
|
<div class="card-body relative" id="videoremote1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Remote Video #2 <span class="badge bg-info hide"
|
|
id="remote2"></span></span>
|
|
</div>
|
|
<div class="card-body relative" id="videoremote2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Remote Video #3 <span class="badge bg-info hide"
|
|
id="remote3"></span></span>
|
|
</div>
|
|
<div class="card-body relative" id="videoremote3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Remote Video #4 <span class="badge bg-info hide"
|
|
id="remote4"></span></span>
|
|
</div>
|
|
<div class="card-body relative" id="videoremote4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
Remote Video #5 <span class="badge bg-info hide"
|
|
id="remote5"></span></span>
|
|
</div>
|
|
<div class="card-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>
|