Chrome WebKitGetUserMedia

javascript google-chrome webrtc

23,713

Please elaborate on your point and as to what exactly, is the problem, what error is encountered, so that one can pin point your mistake easily.

Though, I would suggest you an excellent read on Capturing Audio and Video from HTML5, http://www.html5rocks.com/en/tutorials/getusermedia/intro/.

Though, after following this article, I came across a bug, which does not allow one to load resource from localhost or one's machine on Google Chrome(which might also be the case with you) and which gets resolved once you host your HTML page on the net(try using Dropbox to upload your file publicly for free or get hosting for yourself).

Here's the code that you can refer to start with:

<html>
  <head>
    <title>HTML5 Webcam Test</title> 
    <style type="text/css">
      body{
        max-width: 300px;
        max-height: 300px;
      }
      #live_video{
        top: 0px;
        height: 100%;
        width: 100%;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <video id="live_video" autoplay controls></video>
    <script type="text/javascript">
      video = document.getElementById("live_video");
      navigator.webkitGetUserMedia({video:true, audio:true},
          function(stream) {
            video.src = window.webkitURL.createObjectURL(stream);
          }
      );
    </script>
  </body>
</html>

23,713

anony115511

Developer!

Updated on April 16, 2020

Comments

anony115511 about 4 years

I'm trying to get a webcamera stream working on my page, and I want to do it using WebKitGetUserMedia. I've googled alot and it feels like i've tried all examples out there but noone works for me. I'm obviously doing something wrong but I have no idea what.

So my question is, what do I have to do in order to get WebKitGetUserMedia working in chrome? I'm using Chrome v21. If someone have some complete html, js code example I'd be really happy to see it!
NiranjanBhat over 11 years

Thanks so much... I was also trying to run the HTML directly from the browser. Unlike you, I have a apache server in my machine. So I just dropped the html in the apache server's htdocs directory and got the code working.
Mohit Athwani over 10 years

is there a way to choose front or back camera on mobile devices ..??
nverba about 10 years

@MohitAthwani check the section titled 'Selecting a media source' from the HTML5rocks intro. I've been able to select either camera with this technique. Currently trying to figure out how to run them both at once without crashing though...