Generate QR code in Javascript instead of on server.

feature/qrgen
Daniel Perelman před 4 roky
rodič 225a307ac7
revize 834031dca7

@ -18,7 +18,8 @@ body.justVideo #status, body.justVideo form {
right: 0;
float: right;
}
#qrcode {
#qrcodelink svg path {
min-width: 30vw;
max-width: 100vw;
max-height: 50vh;
}
@ -55,9 +56,15 @@ form label {
background: lightyellow;
}
</style>
<script type="text/javascript" src="static/js/qrcodegen.js"></script>
</head>
<body>
<a id="qrcodelink" style="display:none;"><img id="qrcode" /></a>
<a id="qrcodelink" style="display:none;">
<svg xmlns="http://www.w3.org/2000/svg" id="qrcode" style="width:20em; height:20em;" stroke="none">
<rect width="100%" height="100%" fill="#FFFFFF"/>
<path d="" fill="#000000"/>
</svg>
</a>
<form name="settings">
<label>
Recieve remote video:
@ -101,6 +108,7 @@ form label {
</div>
<script >
const create = (container, type) => container.appendChild(document.createElement(type));
const QRGen = qrcodegen.QrCode;
const body = document.querySelector("body");
const out = document.getElementById("status");
@ -149,9 +157,23 @@ form label {
});
}
function withHash(hash) {
return window.location.href.split('#')[0] + '#' + hash;
}
function displayQRUrl(url) {
qrcodelink.href = url;
const qr = QRGen.encodeText(url, QRGen.Ecc.MEDIUM);
const code = qr.toSvgString(1);
const viewBox = (/ viewBox="([^"]*)"/.exec(code))[1];
const pathD = (/ d="([^"]*)"/.exec(code))[1];
qrcode.setAttribute("viewBox", viewBox);
qrcode.querySelector("path").setAttribute("d", pathD);
qrcodelink.style.display = '';
}
let roomName = window.location.hash;
let isHost = roomName === undefined || !roomName;
if (roomName.startsWith("#{")) {
if (roomName && roomName.startsWith("#{")) {
roomName = undefined;
isHost = true;
@ -186,9 +208,7 @@ form label {
}
roomName = makeid(8);
qrcodelink.href = window.location.href.split('#')[0] + '#' + roomName;
qrcode.src = window.location.href.split('#')[0] + roomName + '/qr';
qrcodelink.style.display = '';
displayQRUrl(withHash(roomName));
} else {
roomName = roomName.substring(1);
qrcodelink.style.display = 'none';

Načítá se…
Zrušit
Uložit