CODEWITHSUNDEEP
javascripthtmlgoogle-chromesafariwebcam
Chris
Chris

Reputation: 495

HTML<video> webcam access not working in Chrome or Safari

I am trying to display my Macbook's camera on a website. It works in Firefox, but not in Safari or Chrome. http://idolmemory.com/camera_test.html

Note: I have another site that displays the camera, and it works just fine in Chrome. https://www.ibiz.cards/

1) Is there something that could be blocking the camera for the first domain? 2) Why doesn't the webcam ever work on Safari?

Here is the code I'm using:

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

<script>
var video = document.querySelector("#thevideo");

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

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    alert("error loading camera");
}
</script>

Edit: So Chrome wasn't working because to display the webcam, the site must have SSL. But I still would like any answers about Safari.

Upvotes: 3

Views: 5419

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 23958

Navigator.getUserMedia is deprecated as per the API warning below:

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

Browser Support

Source: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

As you can see above, Safari does not support this at all, nor does IE. You should use the newer MediaDevices.getUserMedia instead. However, this is also not supported by them yet either.

Upvotes: 2

Related Questions