JS Exécuter uniquement le script lorsque le navigateur n'est PAS Safari

Question

Sur mon site Web, j'ai une page qui se connecte à la webcam de l'utilisateur en utilisant la méthode Javascript de navigator.getUserMedia et les méthodes similaires pour IE et Firefox. Cela fonctionne parfaitement sur tous les navigateurs en dehors de Safari sur mon iPhone et iPad et je trouve que Safari ne supporte aucun type de getUserMedia. Parce que je sais qu'il n'y a pas moyen de contourner cela, je dois juste vivre avec le fait que ça ne marchera pas. Le seul problème est que, pour une raison ou pour une autre, ce Javascript a arrêté ma page de géolocalisation Javascript en bas de la page pour arrêter de fonctionner quand cela a fonctionné parfaitement avant et sur tous les autres navigateurs Web.

Je suppose qu'il existe un moyen de vérifier que si le navigateur n'est pas Safari alors le Javascript pour ma webcam peut fonctionner et le code de géolocalisation sur Safari peut fonctionner comme il se doit.

Merci d'avance.

principal PHP Page Code du

"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

Ajouter une autre réponse après la question a été mise à jour pour inclure le fichier JS

Vous pouvez en vedette détecter dans votre fichier photo.js, modifier comme ceci:

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

})(); 

Answer 2

Utiliser la détection de fonction:

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

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

Answer 3

Vous ne devriez pas vérifier quel navigateur il est, vous devriez vérifiez si la fonctionnalité est prise en charge ou non.

Pour faire simple:

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

En outre, navigator.getUserMedia() est dépréciée et remplacé par navigator.mediaDevices.getUserMedia() (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia). Voici un exemple plus complet:

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 
}