Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X
Hi All,
I`m creating a widget which want use user media. I`m getting an exception while running the following code snippet
"navigator.mediaDevices.getUserMedia".
Exception: Cannot read property 'getUserMedia' of undefined
Any idea?
Regards,
Janakiraman P
Solved! Go to Solution.
Hello @ Janakiraman-P ,
It would seem that you need to use navigator.mediaDevices.getUserMedia() then the API should work.
It is not implemented yet in Chrome, but it works there if you use the official adapter.js WebRTC polyfill: https://jsfiddle.net/srn9db4h/
Example:
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => video.srcObject = stream)
.catch(e => log(e.name + ": "+ e.message));
var log = msg => div.innerHTML += msg + "<br>";
Firefox and Edge support it natively FWIW.
Update: Chrome (50) appears to support this now. And Chrome 52 even supports srcObject
To access navigator.mediaDevices you must connect your site with HTTPS connection. There are no access this feature with HTTP
Direct access to the camera is a powerful feature. It requires consent from the user, and your site MUST be on a secure origin (HTTPS)
Although this is not recommended but still you can try this to test your project by disabling security for media.
chrome://flags/#unsafely-treat-insecure-origin-as-secure
you can add your IP and chrome will treat it as secure
You can check more details at WebRTC getUserMedia promise api support in Chrome and web fundamentals media capturing issues
Hello @ Janakiraman-P ,
It would seem that you need to use navigator.mediaDevices.getUserMedia() then the API should work.
It is not implemented yet in Chrome, but it works there if you use the official adapter.js WebRTC polyfill: https://jsfiddle.net/srn9db4h/
Example:
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => video.srcObject = stream)
.catch(e => log(e.name + ": "+ e.message));
var log = msg => div.innerHTML += msg + "<br>";
Firefox and Edge support it natively FWIW.
Update: Chrome (50) appears to support this now. And Chrome 52 even supports srcObject
To access navigator.mediaDevices you must connect your site with HTTPS connection. There are no access this feature with HTTP
Direct access to the camera is a powerful feature. It requires consent from the user, and your site MUST be on a secure origin (HTTPS)
Although this is not recommended but still you can try this to test your project by disabling security for media.
chrome://flags/#unsafely-treat-insecure-origin-as-secure
you can add your IP and chrome will treat it as secure
You can check more details at WebRTC getUserMedia promise api support in Chrome and web fundamentals media capturing issues
Hi @Ciprian-Traian ,
That`s Great!.
HTTPS and localhost are the good solutions as you said.
I have another issue to finish this widget is, unable to use the widget multiple times in the same mashup.
Observations:
widget result==>IMAGE
1) If I use one widget, everything goes well
2) when i use multiple, result of all the widget goes to one particular target, though its bound to diff.
target==>value display.
any idea?
Thanks,
Janakiraman P
Hello @Janakiraman-P,
Would it be possible to open a new community post for the second issue since the first issue was solved.
Thank you,