-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
136 lines (134 loc) 路 6.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Turn any device into a wireless microphone">
<title>Wireless Microphone over the internet</title>
<script src="dist/ipfs.min.js" defer></script>
<script src="dist/bundle.min.js" defer></script>
<script src="https://kit.fontawesome.com/90bede2e6a.js" crossorigin="anonymous" defer></script>
<script src="https://ackee.gaiagreen.dev/tracker.js" data-ackee-server="https://ackee.gaiagreen.dev" data-ackee-domain-id="f5df10f4-c039-420e-839f-b79cff3f0924" async></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/res/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/res/microphone-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/res/microphone-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body onload="Alpine.start()">
<main x-data="webmic.root()" x-init="init" class="container">
<template x-if="!showHelp">
<div>
<div class="segmented-control">
<template x-for="m in modes">
<div>
<input x-model="mode" type="radio" :value="m" :id="m" x-on:change="tabChanged($event.target.value)" />
<label :for="m" :class="`tab-${m}`">
<p x-text="m"></p>
</label>
</div>
</template>
<div :class="`segmented-control__color selected-${mode}`"></div>
</div>
<template x-if="mode == 'microphone'">
<div x-data="webmic.microphone()" class="microphone">
<div class="circle">
<input type="checkbox" x-on:change="applyStreamStatus($event.target.checked)" id="streaming" />
<label for="streaming">
<i class="material-icons">mic_none</i>
</label>
<span class="circle__back-1"></span>
<span class="circle__back-2"></span>
</div>
<div class="chip">
<div class="chip__icon">
<i class="material-icons" x-text="stateIcon"></i>
</div>
<template x-if="state == STATES.IDLE">
<p>Tap above to start streaming</p>
</template>
<template x-if="state == STATES.CONNECTING">
<p>Connecting...</p>
</template>
<template x-if="state == STATES.LOOKING_FOR_RECEIVERS">
<p>Looking for receivers...</p>
</template>
<template x-if="state == STATES.STREAMING">
<p>Streaming to <strong x-text="target"></strong></p>
</template>
</div>
</div>
</template>
<template x-if="mode == 'speaker'">
<div x-data="webmic.speaker()" class="speaker">
<div class="circle">
<input type="checkbox" x-on:change="applyListenStatus($event.target.checked)" id="listening" />
<label for="listening">
<i class="material-icons">volume_up</i>
</label>
<span class="circle__back-1"></span>
<span class="circle__back-2"></span>
</div>
<div class="chip">
<div class="chip__icon">
<i class="material-icons" x-text="stateIcon"></i>
</div>
<template x-if="state == STATES.IDLE">
<p>Tap above to start listening</p>
</template>
<template x-if="state == STATES.CONNECTING">
<p>Connecting...</p>
</template>
<template x-if="state == STATES.LOOKING_FOR_SENDERS">
<p>Looking for senders...</p>
</template>
<template x-if="state == STATES.LISTENING">
<p>Listening from <strong x-text="source"></strong></p>
</template>
</div>
<audio></audio>
</div>
</template>
</div>
</template>
<template x-if="showHelp">
<div class="help">
<p><strong>Web Microphone</strong> is a small application that works in a web browser (both mobile and desktop) and allows you to send audio from the microphone to another device.</p>
<h1>How to use it?</h1>
<p>
Once you open it on the device you want to use as a microphone, tap the big <strong>microphone</strong> button and the app will start looking for another app that is set to be "a speaker".<br />
</p>
<p>
Next, open the app on another device, select <strong>speaker</strong> and then click/tap the big <strong>speaker button</strong>. The two apps will try to find each other and once they do, the status below the button will confirm it's streaming.
</p>
<h1>Is it safe?</h1>
<p>Transmission from microphone to the speaker is encrypted and goes straight from device to device, without any servers in between, so there's no way to record it or listen in on the conversation.</p>
<p>That being said, currently the way the microphone finds the speaker and vice versa is quite simple and in case of many users at once, it could connect to the wrong microphone/speaker. This happens by design to make it simpler and not to require any codes, passwords etc. but might need to change in the future. For now it's recommended to make sure if you're connected to the mic/speaker that you wanted and if not, try connecting again.</p>
</div>
</template>
<div class="icon">
<a href="https://github.com/suda/wireless-microphone" target="_blank" rel="noopener" title="Source code on GitHub">
<div class="icon__github">
<i class="fab fa-github"></i>
</div>
</a>
<a href="https://twitter.com/suda" target="_blank" rel="noopener" title="Twitter">
<div class="icon__twitter">
<i class="fab fa-twitter"></i>
</div>
</a>
<a href="https://www.producthunt.com/@suda" target="_blank" rel="noopener" title="Product Hunt">
<div class="icon__ph">
<i class="fab fa-product-hunt"></i>
</div>
</a>
<a x-on:click="toggleHelp()">
<div :class="showHelp ? 'icon__help pressed' : 'icon__help'">
<i class="fas fa-question-circle"></i>
</div>
</a>
</div>
</main>
</body>
</html>