Warning: session_start(): open(/var/lib/php/sessions/sess_7fhq8gcpc6u8pts6lsjsk3mpbm, O_RDWR) failed: No space left on device (28) in /var/www/tb-usercake/models/config.php on line 51
Warning: session_start(): Failed to read session data: files (path: /var/lib/php/sessions) in /var/www/tb-usercake/models/config.php on line 51
!7
cm WebCamDemo > DynPrintLog {
!include #1029545 // API for Eleu
O html(IWebRequest request) {
//ret "URI: " + request.uri();
ret hsansserif() + hfullcenter(p("WebCam Preview")
+ hfulltag video("", autoplay := true, id := "webcamPreview",
style := "width: 600px; height: 400px; border: 5px solid red;")
+ tag table(tr(
td(p("Snapshot 1 " + hbutton("Grab", onclick := "snapshot(document.getElementById('snapshotCanvas1'))"))
+ hfulltag canvas("", id := "snapshotCanvas1", width := 300, height := 200, style := "border: 3px solid green;"))
+ td(p("Snapshot 2 " + hbutton("Grab", onclick := "snapshot(document.getElementById('snapshotCanvas2'))"))
+ hfulltag canvas("", id := "snapshotCanvas2", width := 300, height := 200, style := "border: 3px solid green;"))
+ td(p("Diff snapshots " + hbutton("Perform", onclick := "analysis()"))
+ hfulltag canvas("", id := "analysisCanvas", width := 300, height := 200, style := "border: 3px solid green;"))))
) + hscript([[
var video = document.querySelector("#webcamPreview");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
getVideoSize();
})
.catch(function (err0r) {
console.log("Something went wrong: " + err0r);
});
};
async function getVideoSize() {
await new Promise(resolve => video.onloadedmetadata = resolve);
console.log(`video size: ${video.videoWidth}x${video.videoHeight}`);
}
var snapshotW, snapshotH;
function snapshot(canvas) {
var w = video.videoWidth, h = video.videoHeight;
var w2 = canvas.width, h2 = canvas.height;
if (w/h > w2/h2)
h2 = Math.round(h*w2/w);
else
w2 = Math.round(w*h2/h);
snapshotW = w2; snapshotH = h2;
canvas.getContext("2d").drawImage(video, 0, 0, w2, h2);
canvas.grabbed = true;
avgBrightness(canvas);
}
function avgBrightness(canvas) {
var imageData = canvas.getContext("2d").getImageData(0, 0, snapshotW, snapshotH);
var pixels = imageData.data;
var sum = 0;
for (var i = 0, il = pixels.length; i < il; i += 4) {
sum += pixels[i]+pixels[i+1]+pixels[i+2];
}
console.log("Brightness: " + sum/(snapshotW*snapshotH*255*3)*100);
}
function analysis() {
if (!document.getElementById('snapshotCanvas1').grabbed)
snapshot(document.getElementById('snapshotCanvas1'));
snapshot(document.getElementById('snapshotCanvas2'));
var canvas1 = document.getElementById("snapshotCanvas1");
var canvasCtx1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("snapshotCanvas2");
var canvasCtx2 = canvas2.getContext("2d");
var canvasOut = document.getElementById("analysisCanvas");
var canvasCtxOut = canvasOut.getContext("2d");
var size = snapshotW*snapshotH;
var pixels = new Uint8ClampedArray(size*4);
var pixels1 = canvasCtx1.getImageData(0, 0, snapshotW, snapshotH).data;
var pixels2 = canvasCtx2.getImageData(0, 0, snapshotW, snapshotH).data;
for (var i = 0; i < size*4; i++) {
if ((i & 3) == 3)
pixels[i] = 255; // alpha
else
pixels[i] = 128+(pixels2[i]-pixels1[i])*0.5;
}
var palette = canvasCtxOut.getImageData(0, 0, snapshotW, snapshotH);
palette.data.set(pixels);
canvasCtxOut.putImageData(palette, 0, 0);
}
]]);
}
}