Webcam in HTML

Alejandro85 said:

I found two problems with this html.

First the already mentioned problem of https. The official documentation of the getUserMedia function mentions this limitation, the connection must be secure or it would fail. You could try from localhost or a plain file (which is a better idea for developing anyway) and test if it works there.
See the relevant documentation here: MediaDevices: getUserMedia() method - Web APIs | MDN

Then, I've loaded your sample file into a real browser and found a Javascript error (look in the console for it):

Uncaught TypeError: document.queryselector is not a function
at example.html:37:24
Uncaught ReferenceError: startCam is not defined
at HTMLButtonElement.onclick (example.html:54:82)

The first one is thrown right after opening the file, the second one upon clicking the button, which explains why the cam doesn't even attempts to load.

After a bit of debugging. The first problem is that, on line 37, there is a case error, it's "queryselector" and it should be "querySelector" (note the capital S).
After that, the browser requested webcam permission, but the console said "something went wrong". Tip here, always add the error description in such logs to see why something went wrong. I modified line 45 to read:
console.log("something went wrong", error);
Then the console show this:

something went wrong TypeError: Cannot set properties of null (setting 'srcObject')
at example.html:42:21

This hints that the video variable is null. As it's initialized again in line 37, it means that the selector couldn't find the video element. If you look there, the call to querySelector is "videoelement", but since you want a perticular element it must read "#videoelement" to identify an element by its id.
with this change the webcam started working right away.

I haven't digged into the start / stop buttons, but they also threw errors.
I left the changed file attached here for reference.

Click to expand...