1

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video-container">
<video id="camera-stream" width="500" autoplay>
</video>
</div>
<script src="script.js"></script>
</body>
</html>

Script.js

window.onload = function() {

// Normalize the various vendor prefixed versions of getUserMedia.

navigator.getUserMedia = (navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia || 
                        navigator.msGetUserMedia);

// Check that the browser supports getUserMedia.

// If it doesn't show an alert, otherwise continue.

if (navigator.getUserMedia) {

// Request the camera.

navigator.getUserMedia(

// Constraints

{
  video: true
},

// Success Callback

function(localMediaStream) {

// Get a reference to the video element on the page.

var vid = document.getElementById('camera-stream');

// Create an object URL for the video stream and use this // to set the video source.

vid.src = window.URL.createObjectURL(localMediaStream);

},

// Error Callback

function(err) {

// Log the error to the console.

  console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
 );

} else {
alert('Sorry, your browser does not support getUserMedia');
}
}

when i run this code in local it does work. But when i upload it to my site which is moneypro.online it only shows my css. why is that?

Ginxxx
  • 1,602
  • 2
  • 25
  • 54
  • Your problem could be that in some browsers like Chrome (since ver 47), `getUserMedia` is allowed only on **https** [See this for more info](http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https) – szegheo May 02 '17 at 11:07
  • so what should i do sir @ARS81 – Ginxxx May 02 '17 at 11:12

1 Answers1

1

Open the console of your browser and see if you have a warning like this:

[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

On localhost it could be ok, but getUserMedia which is needed for camera access is not allowed on http (at least in Chrome since ver 47), so try to serve your site over https

Try to get a valid SSL certificate for your site from here: https://letsencrypt.org/

Or in your case if you are on HostGator, see their docs for getting SSL: http://support.hostgator.com/articles/ssl-certificates/acquire-ssl/how-do-i-purchase-an-ssl-and-what-type-is-it

szegheo
  • 4,175
  • 4
  • 31
  • 35
  • I don't know how to use it really . >. – Ginxxx May 02 '17 at 11:24
  • @TheGinxx009 Moving to https is complex, you must have a valid ssl and you have to set it on the server. In your case I recommend you to get in contact with your provider (HostGator) asking for some help about it. Maybe they have a free testing ssl option which is free and you can easily test it out. Good luck! – szegheo May 02 '17 at 11:33