2017-08-14 3 views
-1

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

Répondre

1

Vous devriez lire Readme.md sur https://github.com/pusher/pusher-realtime-tfl-cameras, principalement l'exemple de code en bas. Cela vous permettra seulement d'accéder aux caméras TfL dans la région de Londres, car ce sont toutes les expositions de l'API. Vous aurez besoin de trouver une source de vidéo en direct de cette rue avant de penser à l'intégrer dans votre application.

+0

"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. –

+0

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? –

+0

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