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
118
views/index.html
118
views/index.html
|
|
@ -3,46 +3,100 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="description" content="Yet Another Simple WebRTC Video Chat">
|
<meta name="description" content="Yet Another Simple WebRTC Video Chat" />
|
||||||
|
|
||||||
<title>YASWVC</title>
|
<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 -->
|
<!-- import the webpage's stylesheet -->
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
<link
|
||||||
<link rel="stylesheet" href="/style.css">
|
rel="stylesheet"
|
||||||
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="/style.css" />
|
||||||
|
|
||||||
<!-- import libraries -->
|
<!-- import libraries -->
|
||||||
<script src="/lib/peerjs.js"></script>
|
<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 -->
|
<!-- import the webpage's client-side javascript file -->
|
||||||
<script src="/main.js" type="module"></script>
|
<script src="/main.js" type="module"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-dark text-white">
|
||||||
<!-- Image and text -->
|
<!-- Image and text -->
|
||||||
<nav class="navbar navbar-light bg-light">
|
<nav class="navbar navbar-dark bg-dark">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#" style="margin: 0 auto;">
|
||||||
<img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
|
<img
|
||||||
Yet Another Simple WebRTC Video Chat
|
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>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="container pt-3">
|
<div class="container pt-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<!-- self -->
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="card">
|
<div class="card text-dark">
|
||||||
<video id="localVideo" class="card-img-top" autoplay></video>
|
<video id="localVideo" class="card-img-top" autoplay></video>
|
||||||
<h5 class="card-title">Me</h5>
|
|
||||||
<div class="card-body">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- peers -->
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="card">
|
<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>
|
<video id="remoteVideo" class="card-img-top" autoplay></video>
|
||||||
<h5 class="card-title">Remote</h5>
|
<h5 class="card-title">Remote</h5>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
@ -50,33 +104,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
|
<footer>Made with <a href="https://glitch.com">Glitch</a>!</footer>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue