javascript - getUserMedia not working in Chrome - Stack Overflow

admin管理员组

文章数量:1334938

I'm trying to setup video streaming site. I found, that you can use webcam from browser with help of getUserMedia. Here is my javascript code, that I wrote:

function stream() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||     navigator.msGetUserMedia || navigator.oGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: true}, load, error);
    }
}

function load(source) {
    document.getElementById("video").src = window.URL.createObjectURL(source);
    alert("Connected");
}

function error(e) {
    alert("Error:") + e;
}

Here I have my HTML tag:

<video id="video" autoplay></video>

My problem is, that when I open my site and allow browser to use webcam and microphone, I can hear myself, but video isn't loaded. Video frame resizes to 2px x 2px black square. Where am I doing mistakes?

I'm trying to setup video streaming site. I found, that you can use webcam from browser with help of getUserMedia. Here is my javascript code, that I wrote:

function stream() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||     navigator.msGetUserMedia || navigator.oGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: true}, load, error);
    }
}

function load(source) {
    document.getElementById("video").src = window.URL.createObjectURL(source);
    alert("Connected");
}

function error(e) {
    alert("Error:") + e;
}

Here I have my HTML tag:

<video id="video" autoplay></video>

My problem is, that when I open my site and allow browser to use webcam and microphone, I can hear myself, but video isn't loaded. Video frame resizes to 2px x 2px black square. Where am I doing mistakes?

• javascript
• html
• video
• webcam

Share Improve this question Follow asked May 2, 2015 at 19:49 LinhyCZLinhyCZ 3111 gold badge11 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

While I can't reproduce your issue on either Chrome or Firefox, I believe your issue is with the attempt to use autoplay. The remended way to display a webcam stream is to add a listener for loadedmetadata and explicitly call play. My suspicion is that your browser is attempting to play the stream before it knows the width and height, leading to an invalid state.

MDN snippet: (https://developer.mozilla/en-US/docs/Web/API/Navigator/getUserMedia)

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occured: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

The key part for you is:

video.onloadedmetadata = function(e) {
  video.play();
};

Also, I don't believe that msGetUserMedia or oGetUserMedia exist. You should avoid adding browser prefixes without verifying that they exist (since they may exist somewhere with a different API).

---

And of course, it's always worth checking that you actually have a webcam and it is connected! (e.g. can you use it from another application? how about from another website?)

The problem is that you are trying to access your ../*.html file directly. Chrome won't correctly for a number of features due to the Same Origin Policy. There are two solutions.

Set up a simple http server. You can do this by enabling apache to serve your local files for you.

Disable same origin policy for chrome.

A quick google for both will turn up several full detailed examples on how to do either. I would suggest option 1 because this will emulate how your webpage will behave when it is live.

You can pass the stream directly to the video tag. There is no need to create an object URL. My solution is an edit to the @Dave's solution.

 video.srcObject = stream;

instead of this

 video.src = window.URL.createObjectURL(stream);

本文标签： javascriptgetUserMedia not working in ChromeStack Overflow