Je dois afficher une caméra de circulation en direct pour un endroit spécifique (Par exemple, route Tel aviv Ayalon). J'ai vu quelques exemples mais je n'arrive toujours pas à comprendre comment l'implémenter.Comment afficher une caméra de trafic en direct sur ma page Web?
Voici un exemple de ce dont j'ai besoin: En sélectionnant l'emplacement, il y a une caméra routière en direct.
J'ai essayé l'exemple suivant: https://github.com/pusher/pusher-realtime-tfl-cameras et http://jsbin.com/mazaf/3/edit?html,js,console,output
Voici mon code:
<html>
<body>
</body>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
// Open a Pusher connection to the Realtime TfL Traffic Camera API
var pusher = new Pusher("f1b8177ecbc7a66de0c7");
var channel = pusher.subscribe("cameras");
var tflURL = "http://tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/";
// Listen for new updates
channel.bind("cameras-update", function(cameras) {
var camerasArr = cameras.split("|");
console.log(tflURL + camerasArr[0] + ".jpg");
});
</script>
</html>
Voici ma sortie:
Pusher: État changé: initialisé -> connexion pusher.min.js: 8 Pousseur: Connexion: {"transport": "ws", "url": "wss: //ws-ap2.pusher.com: 443/app/e38b1f2ff9c8c301319c? protocol = 7 & client = js & version = 4.1.0 & flash = false "} pusher.min.js: 8 Pousseur: état modifié: connexion -> connecté à un nouvel ID de socket 208.479900 pusher.min.js: 8 Pusher: événement envoyé : {"event": "pusher: subscribe", "données": {"channel": "my-channel"}} pusher.min.js: 8 Pusher: Evénement recd: {"événement": "pusher_internal: subscription_succeeded "," data ": {}," channel ":" my-channel "} pusher.min.js: 8 Pusher: Pas de callback sur my-channel pour pusher: subscription_succeeded
Mais comment puis-je voir le live caméra en streaming?
Merci
"Cela vous permettra seulement d'accéder aux caméras TfL dans la région de Londres" - pas de problème, au début je voudrais montrer la région de Londres. –
Comme vous pouvez le voir, j'ai déjà lu Readme.md sur https://github.com/pusher/pusher-realtime-tfl-cameras et essayé l'exemple. Quelque chose me manque? –
'var channel = pusher.subscribe (" caméras "); var tflURL = "http://tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/"; // Reçoit nouvelles mises à jour channel.bind ("caméras de mise à jour", la fonction (caméras) {var camerasArr = cameras.split ("|"); console.log (tflURL + camerasArr [0] + ".jpg"); }); ' –