2017-08-14 6 views
-1

私は特定の場所(例えば、Tel aviv Ayalon road)のライブトラフィックカメラを表示する必要があります。 いくつかの例を見ましたが、それを実装する方法をまだ理解できません。ウェブページにライブトラフィックカメラを表示する方法は?

ここに私が必要とするものの例があります:場所を選択することによって、ライブロードカメラがあります。

私は、次の例を試してみた:ここ

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

は私の出力です::https://github.com/pusher/pusher-realtime-tfl-camerasとここ

http://jsbin.com/mazaf/3/edit?html,js,console,outputは私のコードです

プッシャー:状態変更:初期化 - >接続する:pusher.min.js:8プッシャー:接続:{"トランスポート": "ws"、 "url": "wss://ws-ap2.pusher.com:443/app/e38b1f2ff9c8c301319c?protocol = 7プッシャー:状態変更:接続 - >新しいソケットIDと接続208.479900 pusher.min.js:8プッシャー:イベントが送信されました。 {"event": "pusher_internal:subscription_succeeded"} "イベント": "イベント": "イベント": "イベント" "、" data ":{}、" channel ":" my-channel "} pusher.min.js:8プッシャー:my-channelでプッシャーのコールバックがありません:subscribe_succeeded

カメラストリーミング?

おかげ

答えて

1

あなたは、https://github.com/pusher/pusher-realtime-tfl-camerasに下部に主にコード例をReadme.mdをお読みください。これにより、ロンドンエリアのTfLカメラにアクセスできるようになります。これはすべてAPIの公開であるためです。あなたはあなたのアプリにそれを統合することを考える前に、その通りからライブビデオのソースを見つける必要があります。

+0

"これはロンドンエリアのTfLカメラにのみアクセスできるようになります" - 問題はありませんが、最初はロンドンエリアを表示したいと思います。 –

+0

ご覧のとおり、私はすでにReadme.mdをhttps://github.com/pusher/pusher-realtime-tfl-camerasで読み、その例を試しました。 何か不足していますか? –

+0

'var channel = pusher.subscribe(" cameras "); var tflURL = "http://tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/"; //新しい更新 channel.bind( "カメラのアップデート" 機能(カメラ){ するvar camerasArr = cameras.split(のために聞く "|"); はconsole.log(tflURL + camerasArr [0] + ".jpg"); }); ' –

関連する問題