Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Mark Petersen
Mark Petersen
4,049 Points

Accessing the Device Camera with getUserMedia

Below codes was successfully working until i have added some additional codes because i am trying to make aware of users that their camera ready / available or not.My html looks like: 

    <div id="notes">
    </div>
    <div id="video-container">
    <video id="camera-stream" width="500" autoplay></video>
    </div>

And here the .js

  <script type="text/javascript">
    window.onload = function() {
    var statusHTML = '<ul>';
  navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || 
                            navigator.msGetUserMedia);
if (navigator.getUserMedia) {
  navigator.getUserMedia(
    {
      video: true,
      audio: true
    },
    function(localMediaStream) {
statusHTML += '<li>You have a camera!</li>';
var vid = document.getElementById('camera-stream');
vid.src = window.URL.createObjectURL(localMediaStream);
    },
    function(err) {
  statusHTML += '<li>You dont have a camera!</li>';
      console.log('The following error occurred when trying to use getUserMedia: ' + err);
    }
  );
  statusHTML += '</ul>';
  document.getElementById('notes').innerHTML = statusHTML;
} else {
  alert('Sorry, your browser does not support getUserMedia');
}
}
</script>'''

I have added this 4 codes which does not work and i am not sure if i am doing right:

  var statusHTML = '<ul>';
  statusHTML += '<li>You have a camera!</li>';
  statusHTML += '<li>You dont have a camera!</li>';
  statusHTML += '</ul>';
  document.getElementById('notes').innerHTML = statusHTML;

All in all I am trying to print a message to the page that ass soon as user load the page It should says they have available camera or not. Any help will be highly appreciated.

Joseph Wasden
Joseph Wasden
20,407 Points

It's hard to tell from your comments where you have added the new code. could you provide the code with the added code in it as well, and mark it with comments or something similar?