302 lines
16 KiB
HTML
302 lines
16 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="en" class="light" dir="ltr">
|
||
<head>
|
||
<!-- Book generated using mdBook -->
|
||
<meta charset="UTF-8">
|
||
<title>Introduction - The Element-Call Book</title>
|
||
|
||
|
||
<!-- Custom HTML head -->
|
||
|
||
<meta name="description" content="Element Call - the world’s first decentralised voice and video conferencing solution powered entirely by Matrix!">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
<link rel="icon" href="favicon.svg">
|
||
<link rel="shortcut icon" href="favicon.png">
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/general.css">
|
||
<link rel="stylesheet" href="css/chrome.css">
|
||
<link rel="stylesheet" href="css/print.css" media="print">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
||
<link rel="stylesheet" href="fonts/fonts.css">
|
||
|
||
<!-- Highlight.js Stylesheets -->
|
||
<link rel="stylesheet" href="highlight.css">
|
||
<link rel="stylesheet" href="tomorrow-night.css">
|
||
<link rel="stylesheet" href="ayu-highlight.css">
|
||
|
||
<!-- Custom theme stylesheets -->
|
||
<link rel="stylesheet" href="ferries.css">
|
||
<link rel="stylesheet" href="theme/2020-edition.css">
|
||
|
||
<!-- MathJax -->
|
||
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
</head>
|
||
<body class="sidebar-visible no-js">
|
||
<div id="body-container">
|
||
<!-- Provide site root to javascript -->
|
||
<script>
|
||
var path_to_root = "";
|
||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
||
</script>
|
||
|
||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||
<script>
|
||
try {
|
||
var theme = localStorage.getItem('mdbook-theme');
|
||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
||
|
||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
||
}
|
||
|
||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
||
}
|
||
} catch (e) { }
|
||
</script>
|
||
|
||
<!-- Set the theme before any content is loaded, prevents flash -->
|
||
<script>
|
||
var theme;
|
||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
||
if (theme === null || theme === undefined) { theme = default_theme; }
|
||
var html = document.querySelector('html');
|
||
html.classList.remove('light')
|
||
html.classList.add(theme);
|
||
var body = document.querySelector('body');
|
||
body.classList.remove('no-js')
|
||
body.classList.add('js');
|
||
</script>
|
||
|
||
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
|
||
|
||
<!-- Hide / unhide sidebar before it is displayed -->
|
||
<script>
|
||
var body = document.querySelector('body');
|
||
var sidebar = null;
|
||
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
|
||
if (document.body.clientWidth >= 1080) {
|
||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||
sidebar = sidebar || 'visible';
|
||
} else {
|
||
sidebar = 'hidden';
|
||
}
|
||
sidebar_toggle.checked = sidebar === 'visible';
|
||
body.classList.remove('sidebar-visible');
|
||
body.classList.add("sidebar-" + sidebar);
|
||
</script>
|
||
|
||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||
<div class="sidebar-scrollbox">
|
||
<ol class="chapter"><li class="chapter-item affix "><a href="title-page.html">The Element-Call book</a></li><li class="chapter-item affix "><a href="foreword.html">Foreword</a></li><li class="chapter-item affix "><a href="ch00-00-introduction.html" class="active">Introduction</a></li><li class="chapter-item affix "><li class="part-title">Getting started</li><li class="chapter-item "><a href="ch01-00-getting-started.html"><strong aria-hidden="true">1.</strong> Getting Started</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="ch01-01-building-blocks.html"><strong aria-hidden="true">1.1.</strong> The building blocks</a></li><li class="chapter-item "><a href="ch01-02-element-call-hello.html"><strong aria-hidden="true">1.2.</strong> Hello Element-Call!</a></li></ol></li><li class="chapter-item "><a href="ch02-00-installation.html"><strong aria-hidden="true">2.</strong> Installation</a></li><li class="chapter-item "><a href="ch09-00-element-call-examples.html"><strong aria-hidden="true">3.</strong> Element-Call Examples</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="ch09-01-element-call-hello.html"><strong aria-hidden="true">3.1.</strong> ELement-Call-Hello!</a></li></ol></li><li class="chapter-item "><a href="appendix-00.html"><strong aria-hidden="true">4.</strong> Appendix</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="appendix-01-keywords.html"><strong aria-hidden="true">4.1.</strong> A - Keywords</a></li><li class="chapter-item "><a href="appendix-02-operators.html"><strong aria-hidden="true">4.2.</strong> B - Operators and Symbols</a></li><li class="chapter-item "><a href="appendix-03-derivable-traits.html"><strong aria-hidden="true">4.3.</strong> C - Derivable Traits</a></li><li class="chapter-item "><a href="appendix-04-translation.html"><strong aria-hidden="true">4.4.</strong> D - Translations of the Book</a></li></ol></li></ol>
|
||
</div>
|
||
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
|
||
<div class="sidebar-resize-indicator"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Track and set sidebar scroll position -->
|
||
<script>
|
||
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
|
||
sidebarScrollbox.addEventListener('click', function(e) {
|
||
if (e.target.tagName === 'A') {
|
||
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
|
||
}
|
||
}, { passive: true });
|
||
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
|
||
sessionStorage.removeItem('sidebar-scroll');
|
||
if (sidebarScrollTop) {
|
||
// preserve sidebar scroll position when navigating via links within sidebar
|
||
sidebarScrollbox.scrollTop = sidebarScrollTop;
|
||
} else {
|
||
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
|
||
var activeSection = document.querySelector('#sidebar .active');
|
||
if (activeSection) {
|
||
activeSection.scrollIntoView({ block: 'center' });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<div id="page-wrapper" class="page-wrapper">
|
||
|
||
<div class="page">
|
||
<div id="menu-bar-hover-placeholder"></div>
|
||
<div id="menu-bar" class="menu-bar sticky">
|
||
<div class="left-buttons">
|
||
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||
<i class="fa fa-bars"></i>
|
||
</label>
|
||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||
<i class="fa fa-paint-brush"></i>
|
||
</button>
|
||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
||
</ul>
|
||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
||
<i class="fa fa-search"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<h1 class="menu-title">The Element-Call Book</h1>
|
||
|
||
<div class="right-buttons">
|
||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
||
<i id="print-button" class="fa fa-print"></i>
|
||
</a>
|
||
<a href="https://gitea.networkx.de/rzerres/element-call/tree/main/book/{path}" title="Git repository" aria-label="Git repository">
|
||
<i id="git-repository-button" class="fa fa-github"></i>
|
||
</a>
|
||
<a href="https://gitea.networkx.de/rzerres/element-call/tree/main/book/src/ch00-00-introduction.md" title="Suggest an edit" aria-label="Suggest an edit">
|
||
<i id="git-edit-button" class="fa fa-edit"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="search-wrapper" class="hidden">
|
||
<form id="searchbar-outer" class="searchbar-outer">
|
||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
||
</form>
|
||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
||
<div id="searchresults-header" class="searchresults-header"></div>
|
||
<ul id="searchresults">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||
<script>
|
||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||
});
|
||
</script>
|
||
|
||
<div id="content" class="content">
|
||
<main>
|
||
<h1 id="introduction"><a class="header" href="#introduction">Introduction</a></h1>
|
||
<!--
|
||
> WIP: to be uncommented, once it is done
|
||
> Note: This edition of the book is the same as [The Orbital Widget Toolkit]
|
||
> [nsprust] available in print and ebook format from [No Starch Press][nsporbtk].
|
||
|
||
[nsporbtk]: https://nostarch.com/orbtk
|
||
[nsp]: https://nostarch.com/
|
||
-->
|
||
<p><a href="img/element-call-webui.png"><img src="img/element-call-webui.png" width="720"/></a></p>
|
||
<p>Welcome to <code>Element-Call</code>, an introductory book about the Matrix based
|
||
video conferencing subsystem.</p>
|
||
<div class="warning">
|
||
<p>Warning: This book is incomplete. Documenting everything and
|
||
rewriting outdated parts take a while.
|
||
See the <a href="https://https://gitea.networkx.de/rzerres/element-call/book/issues">issue tracker</a> to check what’s missing or outdated. If there
|
||
are any mistakes or ideas that haven’t been reported, feel free to
|
||
open a new issue there.</p>
|
||
</div>
|
||
<p><code>Element-Call</code> fully embraces the potential of MatrixRTC. All
|
||
supported clients will connect via the genreric API, though selecting
|
||
their prefered mode (standalone- vs. widget-view).</p>
|
||
<p><a href="img/element-call-modes.png"><img src="img/element-call-modes.png" width="720"/></a></p>
|
||
<h2 id="features"><a class="header" href="#features">Features</a></h2>
|
||
<ul>
|
||
<li>Modern WebRTC API (powered by LifeKit)</li>
|
||
<li>Custom widgets</li>
|
||
<li>WebBrowser suport</li>
|
||
<li>Custom theming engine</li>
|
||
<li>Localization</li>
|
||
</ul>
|
||
<h2 id="supported-backend-platforms"><a class="header" href="#supported-backend-platforms">Supported Backend Platforms</a></h2>
|
||
<ul>
|
||
<li>Linux (native)</li>
|
||
</ul>
|
||
<!--
|
||
* macOS (native)
|
||
* Windows (native)
|
||
* openBSD (not tested, but should work)
|
||
* Web (cargo-node)
|
||
* Android (native planned | cargo-node)
|
||
* iOS (native planned | cargo-node planned)
|
||
-->
|
||
<h2 id="supported-client-platforms"><a class="header" href="#supported-client-platforms">Supported Client Platforms</a></h2>
|
||
<ul>
|
||
<li>Matrix clients (e.g. Element X, ShildiNext)</li>
|
||
<li>WebBrouwsers (e.g. Brave, Chrome, Edge, Firefox)</li>
|
||
</ul>
|
||
<h2 id="who-element-call-book-is-for"><a class="header" href="#who-element-call-book-is-for">Who Element-Call Book Is For</a></h2>
|
||
<p>The intention of <code>Element-Call</code> book is to help interested developers and administrators to get familiar with the structure and the componets choosen to implement a fully functional decentralized video conferencing solution. It will offer the needed in depth information to get in touch with the codebase. It will also aid an administrator to set up the needed software components to build up a self hosted installation.</p>
|
||
<h2 id="source-code"><a class="header" href="#source-code">Source Code</a></h2>
|
||
<p>The source files of the book are maintained as a git submodule found at <a href="https://gitea.networkx.de/rzerres/element-call-book/book_en"><code>Element-Call book</code></a>.</p>
|
||
<!--
|
||
[element-call_book_en_stable]: https://element.io/element-call/stable/book/
|
||
-->
|
||
|
||
</main>
|
||
|
||
<nav class="nav-wrapper" aria-label="Page navigation">
|
||
<!-- Mobile navigation buttons -->
|
||
<a rel="prev" href="foreword.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||
<i class="fa fa-angle-left"></i>
|
||
</a>
|
||
|
||
<a rel="next prefetch" href="ch01-00-getting-started.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
|
||
<div style="clear: both"></div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
||
<a rel="prev" href="foreword.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
||
<i class="fa fa-angle-left"></i>
|
||
</a>
|
||
|
||
<a rel="next prefetch" href="ch01-00-getting-started.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||
<i class="fa fa-angle-right"></i>
|
||
</a>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script>
|
||
window.playground_line_numbers = true;
|
||
</script>
|
||
|
||
<script>
|
||
window.playground_copyable = true;
|
||
</script>
|
||
|
||
<script src="ace.js"></script>
|
||
<script src="editor.js"></script>
|
||
<script src="mode-rust.js"></script>
|
||
<script src="theme-dawn.js"></script>
|
||
<script src="theme-tomorrow_night.js"></script>
|
||
|
||
<script src="elasticlunr.min.js"></script>
|
||
<script src="mark.min.js"></script>
|
||
<script src="searcher.js"></script>
|
||
|
||
<script src="clipboard.min.js"></script>
|
||
<script src="highlight.js"></script>
|
||
<script src="book.js"></script>
|
||
|
||
<!-- Custom JS scripts -->
|
||
<script src="ferries.js"></script>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|