diff --git a/demo/browser.js b/demo/browser.js index 196f3516..25ffea41 100644 --- a/demo/browser.js +++ b/demo/browser.js @@ -69,6 +69,7 @@ let menu; let menuFX; let worker; let timeStamp; +let camera = {}; const fps = []; // helper function: translates json to human readable string @@ -111,19 +112,26 @@ function drawResults(input, result, canvas) { const ctx = canvas.getContext('2d'); ctx.fillStyle = ui.baseBackground; ctx.fillRect(0, 0, canvas.width, canvas.height); - if (result.canvas) ctx.drawImage(result.canvas, 0, 0, result.canvas.width, result.canvas.height, 0, 0, result.canvas.width, result.canvas.height); - else ctx.drawImage(input, 0, 0, input.width, input.height, 0, 0, canvas.width, canvas.height); + if (result.canvas) { + if (result.canvas.width !== canvas.width) canvas.width = result.canvas.width; + if (result.canvas.height !== canvas.height) canvas.height = result.canvas.height; + ctx.drawImage(result.canvas, 0, 0, result.canvas.width, result.canvas.height, 0, 0, result.canvas.width, result.canvas.height); + } else { + ctx.drawImage(input, 0, 0, input.width, input.height, 0, 0, canvas.width, canvas.height); + } // draw all results draw.face(result.face, canvas, ui, human.facemesh.triangulation); draw.body(result.body, canvas, ui); draw.hand(result.hand, canvas, ui); // update log const engine = human.tf.engine(); - const memory = `${engine.state.numBytes.toLocaleString()} bytes ${engine.state.numDataBuffers.toLocaleString()} buffers ${engine.state.numTensors.toLocaleString()} tensors`; - const gpu = engine.backendInstance ? `GPU: ${(engine.backendInstance.numBytesInGPU ? engine.backendInstance.numBytesInGPU : 0).toLocaleString()} bytes` : ''; + const gpu = engine.backendInstance ? `gpu: ${(engine.backendInstance.numBytesInGPU ? engine.backendInstance.numBytesInGPU : 0).toLocaleString()} bytes` : ''; + const memory = `system: ${engine.state.numBytes.toLocaleString()} bytes ${gpu} tensors: ${engine.state.numTensors.toLocaleString()}`; + const processing = result.canvas ? `processing: ${result.canvas.width} x ${result.canvas.height}` : ''; document.getElementById('log').innerText = ` - TFJS Version: ${human.tf.version_core} | Backend: ${human.tf.getBackend()} | Memory: ${memory} ${gpu} - Performance: ${str(result.performance)} | Object size: ${(str(result)).length.toLocaleString()} bytes + video: ${camera.name} facing: ${camera.facing} resolution: ${camera.width} x ${camera.height} ${processing} + backend: ${human.tf.getBackend()} | ${memory} | object size: ${(str(result)).length.toLocaleString()} bytes + performance: ${str(result.performance)} `; } @@ -151,7 +159,7 @@ async function setupCamera() { try { stream = await navigator.mediaDevices.getUserMedia({ audio: false, - video: { facingMode: (ui.facing ? 'user' : 'environment'), width: window.innerWidth, height: window.innerHeight }, + video: { facingMode: (ui.facing ? 'user' : 'environment'), width: window.innerWidth, height: window.innerHeight, resizeMode: 'none' }, }); } catch (err) { output.innerText += '\nCamera permission denied'; @@ -160,6 +168,10 @@ async function setupCamera() { } if (stream) video.srcObject = stream; else return null; + const track = stream.getVideoTracks()[0]; + const settings = track.getSettings(); + log('camera settings:', settings); + camera = { name: track.label, width: settings.width, height: settings.height, facing: settings.facingMode === 'user' ? 'front' : 'back' }; return new Promise((resolve) => { video.onloadeddata = async () => { video.width = video.videoWidth; @@ -169,8 +181,7 @@ async function setupCamera() { if (live) video.play(); ui.busy = false; // do once more because onresize events can be delayed or skipped - if (video.width > window.innerWidth) await setupCamera(); - output.innerText += `\nCamera resolution: ${video.width} x ${video.height}`; + // if (video.width > window.innerWidth) await setupCamera(); resolve(video); }; }); @@ -350,8 +361,8 @@ function setupMenu() { menuFX.addHTML('
1?wh(i,[1,a]):i}):r.cell.stateSize>1?[wh(i,[1,r.cell.stateSize])]:[i]})},Object.defineProperty(t.prototype,"trainableWeights",{get:function(){return this.trainable?this.cell.trainableWeights:[]},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"nonTrainableWeights",{get:function(){return this.trainable?this.cell.nonTrainableWeights:this.cell.weights},enumerable:!0,configurable:!0}),t.prototype.setFastWeightInitDuringBuild=function(e){n.prototype.setFastWeightInitDuringBuild.call(this,e),this.cell!=null&&this.cell.setFastWeightInitDuringBuild(e)},t.prototype.getConfig=function(){var e=n.prototype.getConfig.call(this),r={returnSequences:this.returnSequences,returnState:this.returnState,goBackwards:this.goBackwards,stateful:this.stateful,unroll:this.unroll};this.numConstants!=null&&(r.numConstants=this.numConstants);var i=this.cell.getConfig();return this.getClassName()===t.className&&(r.cell={className:this.cell.getClassName(),config:i}),jt({},i,e,r)},t.fromConfig=function(e,r,i){i===void 0&&(i={});var a=r.cell,s=bn(a,i);return new e(Object.assign(r,{cell:s}))},t.className="RNN",t}(Fe);v.serialization.registerClass(Tr);var $i=function(n){Q(t,n);function t(){return n!==null&&n.apply(this,arguments)||this}return t}(Fe),Zh=function(n){Q(t,n);function t(e){var r=n.call(this,e)||this;return r.DEFAULT_ACTIVATION="tanh",r.DEFAULT_KERNEL_INITIALIZER="glorotNormal",r.DEFAULT_RECURRENT_INITIALIZER="orthogonal",r.DEFAULT_BIAS_INITIALIZER="zeros",r.units=e.units,Tt(r.units,"units"),r.activation=Ar(e.activation==null?r.DEFAULT_ACTIVATION:e.activation),r.useBias=e.useBias==null?!0:e.useBias,r.kernelInitializer=at(e.kernelInitializer||r.DEFAULT_KERNEL_INITIALIZER),r.recurrentInitializer=at(e.recurrentInitializer||r.DEFAULT_RECURRENT_INITIALIZER),r.biasInitializer=at(e.biasInitializer||r.DEFAULT_BIAS_INITIALIZER),r.kernelRegularizer=st(e.kernelRegularizer),r.recurrentRegularizer=st(e.recurrentRegularizer),r.biasRegularizer=st(e.biasRegularizer),r.kernelConstraint=St(e.kernelConstraint),r.recurrentConstraint=St(e.recurrentConstraint),r.biasConstraint=St(e.biasConstraint),r.dropout=Gi([1,xr([0,e.dropout==null?0:e.dropout])]),r.recurrentDropout=Gi([1,xr([0,e.recurrentDropout==null?0:e.recurrentDropout])]),r.stateSize=r.units,r.dropoutMask=null,r.recurrentDropoutMask=null,r}return t.prototype.build=function(e){e=Xe(e),this.kernel=this.addWeight("kernel",[e[e.length-1],this.units],null,this.kernelInitializer,this.kernelRegularizer,!0,this.kernelConstraint),this.recurrentKernel=this.addWeight("recurrent_kernel",[this.units,this.units],null,this.recurrentInitializer,this.recurrentRegularizer,!0,this.recurrentConstraint),this.useBias?this.bias=this.addWeight("bias",[this.units],null,this.biasInitializer,this.biasRegularizer,!0,this.biasConstraint):this.bias=null,this.built=!0},t.prototype.call=function(e,r){var i=this;return v.tidy(function(){if(e=e,e.length!==2)throw new M("SimpleRNNCell expects 2 input Tensors, got "+e.length+".");var a=e[1];e=e[0];var s=r.training==null?!1:r.training;0