Get clear images from camera on browser

I am new to esp32 and the camera sensor module ov7670 and want to live-stream the camera images on the web browser and somewhere I have achieved it as well but the problem is that I am getting blur images. (No object can be identified from those images, they are that blurry)

I am in desperate need of help to display images that can at least identify the object in the image.

The code that manipulates the pixel image data is

function display(pixels, pixelcount, flag) {
    var i = 0;
    for(y=0; y < yres; y++) {
       for(x=0; x < xres; x++)
       { 
           i = (y * xres + x) << 1;
           pixel16 = (0xffff & pixels[i]) | ((0xffff & pixels[i+1]) << 8);
           imgData.data[ln+0] = ((((pixel16 >> 11) & 0x1F) * 527) + 23) >> 6;
           imgData.data[ln+1] = ((((pixel16 >> 5) & 0x3F) * 259) + 33) >> 6;
           imgData.data[ln+2] = (((pixel16 & 0x1F) * 527) + 23) >> 6;  
           imgData.data[ln+3] = (0xFFFFFFFF) & 255;
           ln += 4;
       }
    }

    if (flag == 0xFF) { // last block
       ln = 0;        
       ctx.putImageData(imgData,0,0);
       ws.send(\next-frame\);    
    }

 }

Thank you in advance

I am following this tutorial

https://medium.com/@mudassar.tamboli/esp32-ov7670-websocket-video-camera-26c35aedcc64