Accessing Your Webcam in HTML5

I’ve gotten this to work as a single html file, but when I then take that file and make it as the target of another file’s frameset, it doesn’t work even though loading the frameset page causes my computer to ask for permission to access my camera. If I right click and choose to view the frame in its own tab, it loads and works.

The idea is to have a split browser screen where you have me in one part, and the text I’m reading in the other part. Having it all in one window is easier than having the video in one window and the text in another and manually arranging it on my screen.
Any ideas?

Is the domain for both the page loading the frame and the content of the frame the same?

Yes. They’re all local files.

Videobox.html is the file that works fine on its own, but not in this context. I just get the grey box. ![frameset%20example|690x405](upload://4dAQvtX9kGjBMNYJftVp7mt5EvB.png)

Try uploading them to a HTTPS server and see if this problem is solved. You may be running into some security-related issue, for running some of these APIs like getUserMedia from the file system has shown weird behavior.

I didn’t want this to be the way, because I like the idea of being able to use it when not connected to the internet, but putting it on a website and the exact same html/files now works.

Will try to see if I can have the frameset local with the texts, but the actual webcame on the website and see if it still works.

You can totally do this without relying on the internet by by running a web server on your local machine. One popular option is http-server: https://www.npmjs.com/package/http-server

Let me know if you need any further guidance on this :slight_smile:

1 Like

Great write up! Would there be a way to use an outdoor cams (Hikvision) as the feed instead of a built in webcam? I have a few (3) cams Id like to put on a page and broadcast on the web for local weather conditions for my windsurfing group.

That would be more challenging. I don’t think our browser APIs would be able to help you here, for that would require your outdoor cams to stream the visuals to the network via a local web server or something equivalent that you can then access.

Can you do group video chat?

Yes, but you will need a centralized server to coordinate all of the streams. It isn’t something you can easily do on the client side on your machine :slight_smile:

Hello and thank you for sharing this topic with us.
I have a question. How can I use another camera instead of laptop camera?
For instance, I want to use an esp32 cam to be displayed on my Html web page.
How should I add it to the javascript code or any other parts of it ??
I appreciate any help in advance.:heart::heart:

Have you found anything useful about your question???
I asked because I’m looking for it.
Actually I want to use an esp32-cam instead of my laptop…
:roll_eyes::thinking:

Is the esp32 cam attached to your laptop? Or is it located somewhere else?

It is connected via USB.
But one important thing is that I want to know which part of the javascript code determines to show the camera of the laptop??
Is that using an IP or it’s a default value of an attribute in video tag ???

It goes by whatever the system thinks is the default, but you do have a way of going through a list of available webcams and choosing the one that you want. You can use navigator.mediaDevices.enumerateDevices(); as shown in this example.

Hi everyone…
please anyone paste the code for live video streaming to receive from android app… thorough ip address and port number
thanks

Hi All,
I’m getting the following error,when i try to run the above code.
DOMException: Could not start video source

Does the embedded example in the tutorial work for you?

No it doesn’t work, it throws the above error in the console.