mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 03:28:11 +00:00
134 lines
5.2 KiB
Text
134 lines
5.2 KiB
Text
<!-- 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">
|
|
<meta name="description" content="Yet Another Simple WebRTC Video Chat" />
|
|
<script>
|
|
window.TURN_USER = "<%=TURN_USER%>";
|
|
window.TURN_PW = "<%=TURN_PW%>";
|
|
window.TURN_URL = "<%=TURN_URL%>";
|
|
</script>
|
|
<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://glitch.com/edit/favicon-app.ico"
|
|
width="30"
|
|
height="30"
|
|
class="d-inline-block align-top"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
<span><strong>YASWVC</strong><span class="d-none d-md-inline-block"> - Yet Another Simple WebRTC Video Chat</span></span
|
|
>
|
|
</a>
|
|
</nav>
|
|
<div id="app" 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 muted></video>
|
|
<div class="card-body">
|
|
<details>
|
|
<summary class="card-title">It'se me!</summary>
|
|
<!-- audio source -->
|
|
<div class="form-group">
|
|
<label for="audioSource">Audio input source: </label>
|
|
<select id="audioSource" v-on:change="start" class="form-control"></select>
|
|
</div>
|
|
<!-- audio output -->
|
|
<div class="form-group">
|
|
<label for="audioOutput">Audio output destination: </label>
|
|
<select id="audioOutput" v-on:change="changeAudioDestination" class="form-control"></select>
|
|
</div>
|
|
<!-- video source -->
|
|
<div class="form-group">
|
|
<label for="videoSource">Video source: </label>
|
|
<select id="videoSource" v-on:change="start" class="form-control"></select>
|
|
</div>
|
|
<!-- share screen -->
|
|
<span class="btn btn-primary" v-on:click="shareScreen()">Share screen</span>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- control -->
|
|
<div class="col-6">
|
|
<div class="card text-dark">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Control</h5>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<button v-on:click="copyToClipboard('#peerId')" class="btn btn-outline-secondary" type="button">Copy</button>
|
|
</div>
|
|
<input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
|
|
</div>
|
|
<hr>
|
|
<input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
|
|
<br>
|
|
<button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
|
|
Connect
|
|
</button>
|
|
<button class="btn btn-sm btn-danger" v-on:click="hangUp()">
|
|
Disconnect
|
|
</button>
|
|
<hr>
|
|
<div class="messages mt-1" style="min-height:30px;border:1px solid lightgrey;border-radius:.25rem;"></div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-10">
|
|
<input type="text" v-model="chatInput" class="form-control">
|
|
</div>
|
|
<div class="col-12 col-sm-2">
|
|
<div class="btn btn-primary float-right" v-on:click="sendMessage()">
|
|
Send
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- peers -->
|
|
<div class="row mt-3">
|
|
<!-- peer -->
|
|
<div v-for="call in calls" class="col-6">
|
|
<div class="card text-dark">
|
|
<video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{call.peer}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="text-center mt-3">Made with <a href="https://glitch.com" target="_blank">Glitch</a>!</footer>
|
|
</body>
|
|
</html>
|