mirror of
https://github.com/ggerganov/ggwave.git
synced 2026-02-09 02:48:07 +08:00
229 lines
8.8 KiB
HTML
229 lines
8.8 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<title>ggwave : arduino-rx</title>
|
|
|
|
<style>
|
|
.block {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background-color: #FFFFFF00;
|
|
color: #000000;
|
|
padding: 14px 28px;
|
|
padding-top: 40vh;
|
|
font-size: 100px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main-container">
|
|
<div id="controls">
|
|
<div id="controls0">
|
|
<button id="captureStart" class="block">Start</button>
|
|
</div>
|
|
<div id="controls1" hidden>
|
|
<button id="rxData" class="block">[no data]</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="debug" hidden>
|
|
<br><br>
|
|
|
|
<button onclick="onSend('RRR');">Red</button>
|
|
<button onclick="onSend('GGG');">Green</button>
|
|
<button onclick="onSend('BBB');">Blue</button>
|
|
|
|
<br><br>
|
|
|
|
<textarea name="textarea" id="rxData2" style="width:300px;height:100px;" disabled></textarea><br>
|
|
|
|
<button id="captureStart2">Start capturing</button>
|
|
<button id="captureStop" hidden>Stop capturing</button>
|
|
|
|
<br><br>
|
|
|
|
<div class="cell-version">
|
|
<span>
|
|
|
|
|
Build time: <span class="nav-link">@GIT_DATE@</span> |
|
|
Commit hash: <a class="nav-link" href="https://github.com/ggerganov/ggwave/commit/@GIT_SHA1@">@GIT_SHA1@</a> |
|
|
Commit subject: <span class="nav-link">@GIT_COMMIT_SUBJECT@</span> |
|
|
<a class="nav-link" href="https://github.com/ggerganov/ggwave/tree/master/examples/ggwave-js">Source Code</a> |
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="ggwave.js"></script>
|
|
<script type='text/javascript'>
|
|
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
window.OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
|
|
|
|
var context = null;
|
|
var recorder = null;
|
|
|
|
// the ggwave module instance
|
|
var ggwave = null;
|
|
var parameters = null;
|
|
var instance = null;
|
|
|
|
const kPayloadLength = 16;
|
|
|
|
// instantiate the ggwave instance
|
|
// ggwave_factory comes from the ggwave.js module
|
|
ggwave_factory().then(function(obj) {
|
|
ggwave = obj;
|
|
});
|
|
|
|
var txData = document.getElementById("txData");
|
|
var rxData = document.getElementById("rxData");
|
|
var captureStart = document.getElementById("captureStart");
|
|
var captureStop = document.getElementById("captureStop");
|
|
|
|
// helper function
|
|
function convertTypedArray(src, type) {
|
|
var buffer = new ArrayBuffer(src.byteLength);
|
|
var baseView = new src.constructor(buffer).set(src);
|
|
return new type(buffer);
|
|
}
|
|
|
|
// initialize audio context and ggwave
|
|
function init() {
|
|
if (!context) {
|
|
context = new AudioContext({sampleRate: 48000});
|
|
|
|
// If you applied a shift on the transmitter side, you need to apply the same shift on the receiver side:
|
|
//ggwave.rxProtocolSetFreqStart(ggwave.ProtocolId.GGWAVE_PROTOCOL_MT_FASTEST, 24 + 48);
|
|
|
|
parameters = ggwave.getDefaultParameters();
|
|
parameters.payloadLength = kPayloadLength;
|
|
parameters.samplesPerFrame = 1024;
|
|
parameters.sampleRateInp = context.sampleRate;
|
|
parameters.sampleRateOut = context.sampleRate;
|
|
parameters.operatingMode = ggwave.GGWAVE_OPERATING_MODE_RX_AND_TX | ggwave.GGWAVE_OPERATING_MODE_USE_DSS;
|
|
instance = ggwave.init(parameters);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Tx
|
|
//
|
|
|
|
function onSend(text) {
|
|
init();
|
|
|
|
// DSS : xor the text with the magic numbers
|
|
var payload = new Uint8Array(kPayloadLength);
|
|
for (var i = 0; i < kPayloadLength; i++) {
|
|
payload[i] = 0;
|
|
}
|
|
for (var i = 0; i < text.length; i++) {
|
|
payload[i] = text.charCodeAt(i);
|
|
}
|
|
|
|
// generate audio waveform
|
|
var waveform = ggwave.encode(instance, payload, ggwave.ProtocolId.GGWAVE_PROTOCOL_MT_FASTEST, 25)
|
|
|
|
// play audio
|
|
var buf = convertTypedArray(waveform, Float32Array);
|
|
var buffer = context.createBuffer(1, buf.length, context.sampleRate);
|
|
buffer.getChannelData(0).set(buf);
|
|
var source = context.createBufferSource();
|
|
source.buffer = buffer;
|
|
source.connect(context.destination);
|
|
source.start(0);
|
|
}
|
|
|
|
//
|
|
// Rx
|
|
//
|
|
|
|
captureStart.addEventListener("click", function () {
|
|
init();
|
|
|
|
let constraints = {
|
|
audio: {
|
|
// not sure if these are necessary to have
|
|
echoCancellation: false,
|
|
autoGainControl: false,
|
|
noiseSuppression: false
|
|
}
|
|
};
|
|
|
|
navigator.mediaDevices.getUserMedia(constraints).then(function (e) {
|
|
mediaStream = context.createMediaStreamSource(e);
|
|
|
|
var bufferSize = 1024;
|
|
var numberOfInputChannels = 1;
|
|
var numberOfOutputChannels = 1;
|
|
|
|
if (context.createScriptProcessor) {
|
|
recorder = context.createScriptProcessor(
|
|
bufferSize,
|
|
numberOfInputChannels,
|
|
numberOfOutputChannels);
|
|
} else {
|
|
recorder = context.createJavaScriptNode(
|
|
bufferSize,
|
|
numberOfInputChannels,
|
|
numberOfOutputChannels);
|
|
}
|
|
|
|
recorder.onaudioprocess = function (e) {
|
|
var source = e.inputBuffer;
|
|
var res = ggwave.decode(instance, convertTypedArray(new Float32Array(source.getChannelData(0)), Int8Array));
|
|
if (res && res.length == kPayloadLength) {
|
|
// DSS
|
|
var payload = "";
|
|
res8 = convertTypedArray(res, Uint8Array);
|
|
for (var i = 0; i < kPayloadLength; i++) {
|
|
payload += String.fromCharCode(res8[i]);
|
|
if (res8[i] == 0) {
|
|
break;
|
|
}
|
|
}
|
|
console.log(res8);
|
|
document.getElementById("rxData").value = payload;
|
|
document.getElementById("rxData").innerHTML = payload;
|
|
|
|
document.body.style.backgroundColor = '#aaffaa';
|
|
setTimeout(function () {
|
|
document.body.style.backgroundColor = '#FFFFFF';
|
|
}, 250);
|
|
}
|
|
}
|
|
|
|
mediaStream.connect(recorder);
|
|
recorder.connect(context.destination);
|
|
}).catch(function (e) {
|
|
console.error(e);
|
|
});
|
|
|
|
rxData.value = 'Listening ...';
|
|
document.getElementById("controls0").hidden = true;
|
|
document.getElementById("controls1").hidden = false;
|
|
captureStart.hidden = true;
|
|
captureStop.hidden = false;
|
|
});
|
|
|
|
captureStop.addEventListener("click", function () {
|
|
if (recorder) {
|
|
recorder.disconnect(context.destination);
|
|
mediaStream.disconnect(recorder);
|
|
recorder = null;
|
|
}
|
|
|
|
rxData.value = 'Audio capture is paused! Press the "Start capturing" button to analyze audio from the microphone';
|
|
captureStart.hidden = false;
|
|
captureStop.hidden = true;
|
|
});
|
|
|
|
captureStop.click();
|
|
</script>
|
|
</body>
|
|
</html>
|