Browse Source

Generate QR code in Javascript instead of on server.

feature/qrgen
Daniel Perelman 4 months ago
parent
commit
834031dca7
1 changed files with 26 additions and 6 deletions
  1. +26
    -6
      camera/templates/index.html

+ 26
- 6
camera/templates/index.html View File

@@ -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';


Loading…
Cancel
Save