I've made an app to run simple tfjs model on live camera in browser. The problem is that it kills the web page performance completely. The refresh rate is around 1-2fps and whole browser is laggy (other tabs, youtube movies, even system gui). What is strange, after the first model execution that is slow (model is compiled so it is understandable), model execution time is in range of 1.5-4ms (measured as in scrip below). So it should not be a problem for the browser.
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video!.srcObject = stream;
})
.catch(function (_) {
console.log("Something went wrong!");
});
}
let model = await tf.loadGraphModel('model/model.json')
let video = document.querySelector("#videoElement") as HTMLVideoElement;
async function do_inference()
{
let startTime = performance.now();
const image = tf.expandDims(tf.browser.fromPixels(video));
const image_fl32 = tf.cast(image, 'float32');
let final_pred = tf.tidy(() =>
{
return model.predict(image_fl32) as tf.Tensor4D;
});
image.dispose();
image_fl32.dispose();
final_pred.dispose();
let total = performance.now() - startTime;
console.log(total);
if (running)
{
requestAnimationFrame(do_inference);
}
}
Additional notes:
webgl backend, changing it to wasm result in much greater execution time (around 150-200ms) but video is smooth. On production I would like to use even bigger model, so I cannot accept such execution time.tensorflow.keras.Model model using Model.save method and then using tensorflowjs_converter@3.9 with --output_format=tfjs_graph_modelAm I doing something wrong? Is there a way to make video smooth?