Live programming @ University of Washington
qr_img = qr_code(qrtext)//html`${qr_code(qrtext)}<style>img {width: 50%}</style>`
video = {
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.play();
requestAnimationFrame(tick);
});
function tick() {
//loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
// loadingMessage.hidden = true;
// canvasElement.hidden = false;
// outputContainer.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
//outputMessage.hidden = true;
//outputData.parentElement.hidden = false;
mutable outputData = code.data;
} else {
//outputMessage.hidden = false;
//outputData.parentElement.hidden = true;
}
}
requestAnimationFrame(tick);
}
return video
}
{
const {height, width} = test_png;
//return imageData_from_png(test_png)
return read_qr(imageData_from_png(test_png), height, width)
try {
read_qr(imageData_from_png(test_png), height, width)
} catch (e) {
return e
}
return 'done'
}
test_png = html`<img src="${URL.createObjectURL(test_image)}">`
imageData = (canvas) => {
//const img = screenShot()
const context = canvas.getContext('2d')
return context.getImageData(0, 0, canvas.height, canvas.width)
}
import {select, text, file, textarea} from '@jashkenas/inputs'
read_qr = (imageData, height, width) => {
return jsQR(imageData.data, height, width)
}
qr_code = (str) => {
let uri = null
QRCode.toDataURL(str, { errorCorrectionLevel: 'H' }, function (err, url) {
uri = url
})
return html`<img src="${uri}">`
}
imageData_from_png = (image) => {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = image
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
return context.getImageData(0, 0, img.width, img.height)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
