HTML<video> 网络摄像头访问在 Chrome 或 Safari 中不起作用答案

【问题标题】：HTML<video> webcam access not working in Chrome or SafariHTML<video> 网络摄像头访问在 Chrome 或 Safari 中不起作用
【发布时间】：2016-10-31 10:18:27
【问题描述】：

我正在尝试在网站上展示我的 Macbook 相机。它适用于 Firefox，但不适用于 Safari 或 Chrome。 http://idolmemory.com/camera_test.html

注意：我有另一个显示相机的网站，它在 Chrome 中运行良好。 https://www.ibiz.cards/

1) 是否有什么东西可能会阻止第一个域的摄像头？ 2) 为什么网络摄像头不能在 Safari 上运行？

这是我正在使用的代码：

<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>

编辑：因此 Chrome 无法正常工作，因为要显示网络摄像头，该网站必须具有 SSL。但我仍然想知道有关 Safari 的任何答案。

【问题讨论】：

标签： javascript html google-chrome safari webcam

【解决方案1】：

Navigator.getUserMedia 根据以下 API 警告已弃用：

此功能已从 Web 标准中删除。虽然有些浏览器可能仍然支持它，它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时休息。

来源： https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

正如您在上面看到的，Safari 根本不支持此功能，IE 也不支持。您应该改用较新的MediaDevices.getUserMedia。但是，他们也不支持这一点。

【讨论】：