Question

在我的网站上，我有一个页面，它使用navigator.getUserMedia的Javascript方法和IE和Firefox的类似方法连接到用户的网络摄像头。除了我的iPhone和iPad上的Safari之外，这适用于所有浏览器，我发现Safari不支持任何类型的getUserMedia。

因为我知道没有办法绕过它，所以我需要忍受这样的事实。唯一的麻烦是，出于某种原因，这个Javascript已经停止了我的Geolocation Javascript进一步向下停止工作，当它在所有其他Web浏览器之前和之后完美运行时。

我认为有一种方法可以检查如果浏览器不是Safari，那么我的网络摄像头的Javascript可以运行，Safari上的Geolocation代码可以运行吗？

提前致谢。

主PHP页面代码

 "Some html here"

<script src="photo.js"></script>

"Some html here"

      <script>
    var x = document.getElementById("demo");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }


    function showPosition(position) {
     /*   x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude; */
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        document.cookie = "lat" + "=" + lat + ";";
        document.cookie = "lon" + "=" + lon + ";";
    }

    </script>

Photo.js

(function() {
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        photo = document.getElementById('photo'),
        vendorUrl = window.URL || window.webkitURL;

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

    navigator.getMedia({
        video: true,
        audio: false
    }, function(stream) {
        video.src = vendorUrl.createObjectURL(stream);
        video.play();
    }, function(error) {
        // An error occured
        // error.code
    });

    document.getElementById('capture').addEventListener('click', function() {
        context.drawImage(video, 0, 0, 400, 300);
        photo.setAttribute('src', canvas.toDataURL('image/png'));
    });

})();

Answer 1

使用特征检测：

function hasUserMedia() {
  return !!navigator.getUserMedia;
}

function myLogic() {
  if(!hasUserMedia()} {
    return;  // short-circuit your webcam logic
  }
  // configure the webcam
}

Answer 2

您不应该检查它是哪个浏览器，您应该检查该功能是否受支持。

说实话：

if (typeof navigator.getUserMedia === "function") {
  runCode();
} else {
  // Don't run code
}

此外，navigator.getUserMedia()已弃用，已替换为navigator.mediaDevices.getUserMedia()（https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia）。这是一个更全面的例子：

if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === "function") {
  // Run modern code using navigator.mediaDevices.getUserMedia()
  runModernCode();
} else if (typeof navigator.getUserMedia === "function") {
  // Run legacy code using navigator.getUserMedia()
  runLegacyCode();
} else {
  // Don't run code
}

Answer 3

在问题更新后添加另一个答案以包含JS文件

您可以在photo.js文件中进行功能检测，修改如下：

(function() {
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        photo = document.getElementById('photo'),
        vendorUrl = window.URL || window.webkitURL;

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

    if (typeof navigator.getMedia === "function") {
        navigator.getMedia({
            video: true,
            audio: false
        }, function(stream) {
            video.src = vendorUrl.createObjectURL(stream);
            video.play();
        }, function(error) {
            // An error occured
            // error.code
        });

        document.getElementById('capture').addEventListener('click', function() {
            context.drawImage(video, 0, 0, 400, 300);
            photo.setAttribute('src', canvas.toDataURL('image/png'));
        });
    }

})();

JS仅在浏览器不是Safari时运行脚本

3 个答案: