navigator.getUserMedia not working on Android / Chrome

Question

do you have any idea of why the following code doesn't work on Android/Chrome?

It works well on Desktop/Chrome.

Just in case, here you have the JSFiddle links:

https://jsfiddle.net/2yum1a0w

For success, open with Desktop/Chrome and go to section: Result...

https://jsfiddle.net/2yum1a0w/embedded

On Desktop/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Success Callback
---
# TEST 02 # Inside Success Callback

On Android/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Error Callback
NotAllowedError: Permission denied
---
# TEST 02 # Inside Error Callback
NotAllowedError: Permission denied

And by the way, on Desktop/Firefox I get:

navigator.mediaDevices...
[object MediaDevices]

along with the following console error:

TypeError: navigator.getUserMedia is not a function

Do you have any idea on how to make this work on Android/Chrome?

EDIT 1

Based on the answer from Joseph Gordy below, I tried:

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

which now works properly on Desktop/Firefox getting:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Success Callback

but on Android/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Error Callback
NotAllowedError: Permission denied

Thanks!

Answer 1

I've had the same problem. Mobile browser even haven't asked about permissions. And the reason was SSL! You have to use secure connection

Check "Secure context required" section here