mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 05:28:10 +00:00
🏎📖 Checkpoint
./views/index.html:5975361/10582
This commit is contained in:
Glitch (peerjs-video)
parent
a279345aca
commit
047e926ba7
1 changed files with 73 additions and 45 deletions
112
views/index.html
112
views/index.html
|
|
@ -3,44 +3,98 @@
|
|||
<!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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<body class="bg-dark text-white">
|
||||
<!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
|
||||
Yet Another Simple WebRTC Video Chat
|
||||
<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">
|
||||
<div class="card text-dark">
|
||||
<video id="localVideo" class="card-img-top" autoplay></video>
|
||||
<h5 class="card-title">Me</h5>
|
||||
<div class="card-body">
|
||||
<p class="card-text"></p>
|
||||
<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>
|
||||
|
|
@ -52,32 +106,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="connect-to-peer" />
|
||||
<button onclick="connectToPeer()">
|
||||
Connect
|
||||
</button>
|
||||
<button onclick="disconnectFromPeer()">
|
||||
Disconnect
|
||||
</button>
|
||||
<hr>
|
||||
<p>Get available audio, video sources and audio output devices from <code>mediaDevices.enumerateDevices()</code>
|
||||
then set the source for <code>getUserMedia()</code> using a <code>deviceId</code> constraint.</p>
|
||||
|
||||
<div class="select">
|
||||
<label for="audioSource">Audio input source: </label><select id="audioSource"></select>
|
||||
</div>
|
||||
|
||||
<div class="select">
|
||||
<label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
|
||||
</div>
|
||||
|
||||
<div class="select">
|
||||
<label for="videoSource">Video source: </label><select id="videoSource"></select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="messages">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue