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?
Videobox.html is the file that works fine on its own, but not in this context. I just get the grey box.
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
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.
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.
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.
