Accessing Your Webcam in HTML5

programming
86

Hi Kirupa,
Is it stopped to working at chrome in iPhone OS 13.4.1?
The website is hosted in https secured server. But when the users upgrade OS to 13.4.1 in their iPhone then it asking ‘Please install an external camera device’ when opening the site and doesn’t open camera. Please help to solve this issue.

87

Hmm. Does it work in Safari?

88

Yes it is working at safari.

89

Under iOS Privacy settings, does Chrome have permission to access the camera?

90

Yes in privacy settings for chrome there is an option to camera access as Request

91

Hi Kirupa,
DetectRTC.hasWebcam is getting false in chrome. Is the device.kind not considering “video”?. Can use any alternate one instead HTML5 video tag?
When testing with https://webcamtests.com/. It shows as in below screenshot. But I have checked this link after upgraded only.

image
image366×516 83.2 KB

92

Hi kirupa,
i tired your code in my Django project and its working fine in the same laptop in which i run localhost server. but when i trying to open in my android mobile by local area network the html page is open but nothing shows, not detecting camera, no error, nothing.
how can i run it in mobile?

93

Does the example in the tutorial work on your android mobile device?

94

no dear its only working in my laptop browser, but when i enter the " ip address : port " in android mobile browser it only shows the page with video frame but camera not streaming.

does it required further code for android devices?

95

No, there is no additional code needed. Just to clarify, does the example in this page work in your Android device?

96

yes dear the example in this page is working fine on my android mobile, that’s why i am curious that how your example working and same code i am applying is not working.

97

Is that something about front camera or back camera? or about https:? because in localhost it runs on http:

98

Ah! The http part is the problem. It needs to be https, and there are articles online that explain how to get that enabled for localhost using whatever build/testing setup you have going :grinning:

99

Oh! OK got it, thanks for your help dear. I am so satisfy with your forum.

100

Hey there - wondering if there is a way to display multiple streams on the same page? All from the same camera, same image. I tried to do this assigning a class instead of an id but I’m not getting much success:

To be clear: I’m not trying to add a second webcam, just trying to get the same version to show up multiple times.

Thanks for your help!

101

Hello, do you have a tutorial about how to send that stream to a RTMP server?

Thanks
Jaime

102

No - that gets too much into the weeds of whatever service you end up using. The closest is this article: https://www.kirupa.com/html5/simple_video_chat_with_webrtc.htm

:grinning:

103

Hey, This was awesome. I teach Carpentry and in 5 minutes with a little copy and pasting and some pruning I got it to work for my needs. 2 questions, can you select another video device? The default is the webcam on my laptop. I have a GoPro HERO 8 that I want to be able to display onto (into) chrome as a document camera work around. If I can do it, how? I basically need to identify a new source for the video… remember I’m a carpenter so go… s…l…o…w. Cheers, Peter

104

We’ll have to wait for the full instructions from Kirupa, but the short version is:

105

Thanks for the quick reply. I have the GoPro desktop utility and it will allow the go pro to be used in Zoom, go to meeting ect. I want to be able to use the camera outside of social media/meeting applications. I could use chrome to “host” the video.

I am not sure where in the HTML5 code to place the enumerateDevices command. I have tried several places but haven’t gotten it to execute. Any advice?