Question

我一直在使用getUserMedia从浏览器访问相机。我在几种浏览器上尝试过它，除了在Firefox上它可以工作。它适用于Chrome，avast，opera mini。这是我的代码：

<button type="button" onclick="turnOn()">turn on cam</button>
function turnOn() {
     document.getElementsByTagName('video')[0].play();

     var video = document.querySelector('video')
      , canvas;

    /**
     *  generates a still frame image from the stream in the <video>
     *  appends the image to the <body>
     */

    // use MediaDevices API
    // docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
    if (navigator.mediaDevices) {
      // access the web cam
       navigator.mediaDevices.getUserMedia({video: true})
      // permission granted:
        .then(function(stream) {
          video.src = window.URL.createObjectURL(stream);
          /* video.addEventListener('click', takeSnapshot); */
        })
        // permission denied:
        .catch(function(error) {
          document.body.textContent = 'Could not access the camera. Error: ' + error.name + " " + error.message;
        });
    }
}

希望您能帮助我。谢谢！

Answer 1

第一个检测浏览器

How to detect Safari, Chrome, IE, Firefox and Opera browser?

Firefox和某些浏览器将很快停止接受MediaStream作为URL.createObjectURL静态方法的对象参数，这是开发人员之间讨论的结果。找到此类代码后，Firefox 54将在控制台中显示弃用警告。

如规范中的示例所示，应使用HTMLMediaElement.prototype.srcObject属性在或元素上设置MediaStream。

// Don't do this
video.src = URL.createObjectURL(stream);
// Do this
video.srcObject = stream;

更新：由于错误，在Firefox 54上不显示弃用警告。 Firefox 55及更高版本将正确显示它。

更新2：Firefox 62已删除了流参数支持。

参考站点：https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

Answer 2

替换：

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

具有：

video.srcObject = stream

来源：https://www.chromestatus.com/features/5618491470118912

TypeError：参数1对于URL.createObjectURL的任何1参数重载无效

2 个答案: