mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 05:18:11 +00:00
112 lines
3.8 KiB
HTML
112 lines
3.8 KiB
HTML
<!-- This is a static file -->
|
|
<!-- served from your routes in server.js -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Yet Another Simple WebRTC Video Chat" />
|
|
|
|
<title>YASWVC</title>
|
|
|
|
<link
|
|
id="favicon"
|
|
rel="icon"
|
|
href="https://glitch.com/edit/favicon-app.ico"
|
|
type="image/x-icon"
|
|
/>
|
|
<!-- import the webpage's stylesheet -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
|
/>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
|
|
<!-- import libraries -->
|
|
<script src="/lib/peerjs.js"></script>
|
|
<!-- development version, includes helpful console warnings -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
|
<!-- import the webpage's client-side javascript file -->
|
|
<script src="/main.js" type="module"></script>
|
|
</head>
|
|
<body class="bg-dark text-white">
|
|
<!-- Image and text -->
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="#" style="margin: 0 auto;">
|
|
<img
|
|
src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg"
|
|
width="30"
|
|
height="30"
|
|
class="d-inline-block align-top"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
<span
|
|
><strong>YASWVC</strong> - Yet Another Simple WebRTC Video Chat</span
|
|
>
|
|
</a>
|
|
</nav>
|
|
<div class="container pt-3">
|
|
<div class="row">
|
|
<!-- self -->
|
|
<div class="col-6">
|
|
<div class="card text-dark">
|
|
<video id="localVideo" class="card-img-top" autoplay></video>
|
|
<div class="card-body">
|
|
<h5 class="card-title">It'se me!</h5>
|
|
<!-- audio source -->
|
|
<div class="form-group">
|
|
<label for="audioSource">Audio input source: </label>
|
|
<select id="audioSource" class="form-control"></select>
|
|
</div>
|
|
<!-- audio output -->
|
|
<div class="form-group">
|
|
<label for="audioOutput">Audio output destination: </label>
|
|
<select id="audioOutput" class="form-control"></select>
|
|
</div>
|
|
<!-- video source -->
|
|
<div class="form-group">
|
|
<label for="videoSource">Video source: </label>
|
|
<select id="videoSource" class="form-control"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- peers -->
|
|
<div class="col-6">
|
|
<div class="card text-dark">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Remote</h5>
|
|
<input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
|
|
<br>
|
|
<button class="btn btn-sm btn-success" onclick="connectToPeer()">
|
|
Connect
|
|
</button>
|
|
<button class="btn btn-sm btn-danger" onclick="disconnectFromPeer()">
|
|
Disconnect
|
|
</button>
|
|
<div class="messages"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- peers -->
|
|
<div class="row mt-3">
|
|
<!-- peer -->
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<video id="remoteVideo" class="card-img-top" autoplay></video>
|
|
<h5 class="card-title">Remote</h5>
|
|
<div class="card-body">
|
|
<p class="card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
|
|
</body>
|
|
</html>
|