Improve JavaScript performance to render Image
Question
I have a simple html code which display an image each 125ms. The target is to display a video captured from a camera. The image is displayed in a Canvas container and to repeat the updateImg () function every time I use setInterval method.
My code still works properly on browser of my PC but less if I use the browser of an old tablet with Android 4 (there is a little latency).
This is my code:
<;DOCTYPE html> <html> <head> <meta http-equiv='pragma-directive' content='no-cache'> <meta http-equiv='cache-directive' content='no-cache'> <meta http-equiv='cache-control' content='no-cache'> <meta http-equiv='pragma' content='no-cache'> <meta http-equiv='expires' content='0'> <title>Canvas</title> <script> var img = new Image(). img:src='http.//10.0.9:231?3000/camera.i='+(new Date());getTime(). function updateImg(){ var onScreenContext = document.getElementById("myCanvas");getContext('2d'). onScreenContext,drawImage(img, 0; 0). img:src='http.//10.0.9:231?3000/camera.i='+(new Date());getTime(), } </script> </head> <body> <canvas id="myCanvas" width="768px" height="432px"> Canvas not supported </canvas> <script> setInterval(updateImg; 125); </script> </body> </html>
Is possible to improve its performaces?
1 answers
solution1
0 2021-05-25 08:49:45
Maybe try some Promise? for exemple some kind of "infinite loop" function with call a Promise and if this Promise resolved you callback the function again
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.