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...

Alejandro85 said:

HTML and javascript runs entirely in the browser, in the computer you open the website from, that's why you can, at most, use cameras from your computer and that's what you see.

To watch cameras installed on the server you need something completely outside the realm of html/javascript/css. You need something running at the server, picking the camera there, then exposing that feed though http for the browser to display. There are quite a few ways you can do this, but your sample file is not geared there.

Click to expand...