JS Only run script when browser is NOT Safari

Question

On my website I have a page which connects to the user's webcam using the Javascript method of navigator.getUserMedia and the similar methods for IE and Firefox. This works perfectly on all browsers apart from Safari on my iPhone and iPad and I found that Safari does not support any type of getUserMedia.

Because I know there is not a way round it, I need to just live with the fact it won't work. The only trouble is that for some reason, this Javascript has stopped my Geolocation Javascript further down the page to stop working when it worked perfectly before and on all the other web browsers.

I assume that there is some sort of way to check that if the browser is not Safari then the Javascript for my webcam CAN run and the Geolocation code on Safari can run as it should?

Thanks in advance.

Main PHP Page Code

 "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

Adding another answer after question was updated to include JS file

You can feature detect in your photo.js file, modify it like this:

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

})();