当浏览器不是 Safari 时，只有 JS 运行脚本

Question

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

因为我知道没有办法绕过它，所以我需要接受它行不通的事实。唯一的问题是，出于某种原因，这个 Javascript 停止了我的地理定位 Javascript 在页面下方进一步停止工作，而它在所有其他网络浏览器之前和在所有其他网络浏览器上都运行良好。

我假设有某种方法可以检查如果浏览器不是 Safari，那么我的网络摄像头的 Javascript 可以运行和 Safari 上的地理定位代码可以运行应该怎样？

提前致谢。

主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'));
        });
    }

})();

当浏览器不是 Safari 时，只有 JS 运行脚本

JS Only run script when browser is NOT Safari

javascript

html

safari

getusermedia

当浏览器不是 Safari 时，只有 JS 运行 脚本

JS Only run script when browser is NOT Safari

javascript

html

safari

getusermedia

当浏览器不是 Safari 时，只有 JS 运行脚本