-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
157 lines (135 loc) · 5.03 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<script>
function randomnumbergenerator(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
var firstfrequency;
var istorage = window.localStorage;
var rfrequency;
var currentfrequency;
if (istorage.getItem("randomfrequency")===null) {
firstfrequency = randomnumbergenerator(1000000,9999999);
istorage.setItem("randomfrequency",firstfrequency);
istorage.setItem("currentfrequency",firstfrequency);
//rfrequency=firstfrequency;
currentfrequency = istorage.getItem("currentfrequency");
} else {
//rfrequency = istorage.getItem("randomfrequency");
currentfrequency = istorage.getItem("currentfrequency");
}
function changefrequency(frequencya){
var istorage = window.localStorage;
istorage.setItem("currentfrequency",frequencya);
currentfrequency=istorage.getItem("currentfrequency");
lcdfrequency(currentfrequency);
};
function frequencybutton(){
var newfrequency = prompt("Please enter the 7-digit frequency!!");
if (isNaN(newfrequency) || newfrequency < 1000000 || newfrequency > 9999999) {
ons.notification.alert('Please enter 7-digit numerical frequency');
} else {
changefrequency(newfrequency);
}
}
function myfrequency(){
rfrequency = istorage.getItem("randomfrequency");
changefrequency(rfrequency);
}
function lcdfrequency(frequencynumber){
document.getElementById("lcdf").innerHTML = frequencynumber;
}
</script>
<body>
<ons-page>
<ons-toolbar>
<div class="center"><b>Tower - Walkie Talkie</b></div>
</ons-toolbar>
<ons-tabbar swipeable position="auto">
<ons-tab page="walkietalkie.html" label="Walkie Talkie" icon="md-input-antenna">
</ons-tab>
<ons-tab page="info.html" label="About" icon="md-info-outline" active-icon="md-info">
</ons-tab>
</ons-tabbar>
</ons-page>
<template id="walkietalkie.html">
<ons-page id="Tab1">
<ons-list>
<ons-list-header><b>frequency</b></ons-list-header>
<ons-list-item>
<div class="left">
<ons-icon icon="md-dialpad" size="40px" class="list-item__icon"></ons-icon>
</div>
<div class="center">
<p id="lcdf" style="text-align:center; color:red; font-size:30px;"> <strong> </strong> </p>
<script>lcdfrequency(currentfrequency);</script>
</div>
<div class="right">
<p id="iswtavailable" style="text-align:center; color:red; font-size:30px;"> <strong>Ready</strong> </p>
</div>
</ons-list-item>
</ons-list>
<button class="button--material" style="background-color: blue; color: white; width: 96%; height: 40%; margin:4px;">
<ons-icon icon="md-mic" size="100px"></ons-icon>
</button>
<button onclick="frequencybutton()" class="button" style="width: 49%; height: 25% margin: 0 auto; border-radius: 4px;">Change Frequency</button>
<button onclick="myfrequency()" class="button" style="width: 49%; height: 25% margin: 0 auto; border-radius: 4px;">My Frequency </button>
</ons-page>
</template>
<template id="info.html">
<ons-page id="Tab2">
<p style="text-align: center;">
Tower - Walkie Talkie app
</p>
</ons-page>
</template>
<script>
// https://medium.com/@saurssaurav33/how-to-make-a-browser-walkie-talkie-using-node-js-and-socket-io-ae024bb9b378
var socket = io();
console.log(socket)
socket.on('availability', function (message) {
if (message=="started") {
document.getElementById("iswtavailable").innerHTML = "Busy Now!";
} else {
document.getElementById("iswtavailable").innerHTML = "Ready";
}
});
socket.on('voicedata', function (recorddata) {
const audioBlob = new Blob(recorddata);
const audioUrl = URL.createObjectURL(audioBlob);
const audio = new Audio(audioUrl);
audio.play();
});
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
var recorddata = [];
$('.button--material').on('mousedown touchstart', function (e) {
socket.emit('availability',currentfrequency,"started");
mediaRecorder.start();
}).bind('mouseup mouseleave touchend', function () {
if (mediaRecorder.state !== 'inactive') {
socket.emit('availability',currentfrequency,"stopped");
mediaRecorder.stop();
}
});
mediaRecorder.addEventListener("dataavailable", event => {
recorddata.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
socket.emit('voicedata', recorddata, currentfrequency);
recorddata = [];
});
});
</script>
</body>
</html>