How to recognize a picture from a camera in javascript and find it in the database?

Question

JavaScript

I have been trying to solve this problem for a very long time. The essence of the task is to recognize, check the database and find out the ID of the picture stored on the server from the phone's camera (when hovering) in the browser. Rummaged through a bunch of information, but did not find a well-working solution. I tried perceptual hashing (stupidity, yes), now I'm digging towards opencv.js and similar frameworks, but alas, nothing works out yet because I can't match the sequence of actions.

Answer 1

I solved the problem using ml5js, namely the "Feature Extractor" example on github.

Answer 2

Because the task is not as simple as we would like, yes, perceptual hashing and opencl are the right direction, but your problem is that you are working with a camera and not typical conditions and ready-made pictures.
The camera means rotations and perspective distortions, problems with uneven brightness and flickering of lighting, matrix inertia and glitches in post-processing algorithms in smartphones.
You will get stuck deep and stupidly for a long time on defining the boundaries of your image, and it would be nice if it were geometrically simple, such as a rectangle

Answer 3

Well, if networks, then you need to recognize what kind of objects are in the frame https://github.com/tensorflow/models/blob/master/r... and in the first iteration look for objects with the same number and type. Second, compare vectors with positions https://docs.scipy.org/doc/numpy/reference/generat... and rank by this distance.
Although most likely all this is necessary, you just need to normalize the images to remove distortions and then look for similar ones in color profile, at least open source solutions do this - www.lire-project.net Example https://github.com/soruly/trace. moe explanation of how it works https://go-talks.appspot.com/github.com/soruly/sli...

Answer 4

Here is your answer:
Do not try to dig and look for a working solution.
Learn to understand logic step by step.
PS: To speed up data processing in js - use emscripten.