cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

How to use navigator Object?

Janakiraman-P
15-Moonstone

How to use navigator Object?

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

ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

5 REPLIES 5

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,

Thank you @Ciprian-Traian ,

 

I`m done with that.

Announcements


Top Tags