mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-08-26 12:46:08 +00:00
adfbb1e2a4
In the upstream demo, https://janus.conf.meetecho.com/demos/videoroom.html, the font-awesome glyphicons were only being used to show the 'user' icon next to alias text field. We have replaced that with a simple unicode character. We also seem to have dropped the dependency on Debian package. However, we seem to forgotten to remove the inclusion of the JS file. This leads to a 404 error when loading Janus room. Tests: - The page loads and works as expected. The 'user' icon shows up. There are no 404 errors in the browser console. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
197 lines
8.0 KiB
HTML
197 lines
8.0 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 src="/javascript/webrtc-adapter/adapter.min.js" ></script>
|
|
<script src="/javascript/jquery/jquery.min.js" ></script>
|
|
<script src="/javascript/popperjs2/popper.min.js"></script>
|
|
<script src="/javascript/jquery-blockui/jquery.blockUI.min.js" ></script>
|
|
<script src="/javascript/bootstrap5/js/bootstrap.min.js" ></script>
|
|
<script src="/javascript/bootbox/bootbox.min.js" ></script>
|
|
<script src="/javascript/toastr/toastr.min.js" ></script>
|
|
<script src="{% static 'janus/janus-freedombox-config.js' %}" ></script>
|
|
<script src="/javascript/janus-gateway/janus.min.js" ></script>
|
|
<script 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">
|
|
</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>
|