Web cam API help [SOLVED]

1

So i’m trying to access this API: Windy: Wind map & weather forecast

The syntax is /webcams/list/nearby={lat},{lng},{radius}

It is supposed to provide local webcam footage of your local area.

I tried:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lon = position.coords.longitude;
      var lat = position.coords.latitude;
      var api ="/webcams/list/nearby="+lat+","+lon+",{50}";
      $.getJSON(api, function(data) {
        console.log(data)
      });
    });
 }

Codepen → https://codepen.io/Mike-was-here123/pen/QmvpPq

It isn’t sent to the html, just check the console.

I get the error:

OPTIONS https://codepen.io/webcams/list/nearby={\#########},{#########},{50} 404 ()
index.html:1

and

Failed to load https://codepen.io/webcams/list/nearby={########},{######},{50}: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access. The response had HTTP status code 404.

The pound signs are me blurring out my location.

Any way i can fix this? Access-Control-Allow-Origin stands out.

[SOULTION]

3

I just signed into my account, and fixed the lon and lat. I also removed the curly brackets. I still get the same 2 errors.

"Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource...therefore not allowed access...status code 404."

4

Your Codepen does not seem to have the changed code, so I can not see what you are trying. I signed up for an account and following the instructions, I was able to get a valid response back. I have hidden my authorization key with xxxxxxxxxxxxxxxxxxxxxx.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lon = position.coords.longitude;
    var lat = position.coords.latitude;
    var api = `https://webcamstravel.p.mashape.com/webcams/list/nearby=${lat},${lon},50?show=webcams%3Aimage%2Clocation&lang=en`;
    $.ajax({
      headers: {
        "X-Mashape-Key":"xxxxxxxxxxxxxxxxxxxxxx",
        "X-Mashape-Host": "webcamstravel.p.mashape.com"
      },
      url: api,
      success: function(data) {
        console.log(data);
      }
    });
  });
}
1 Like
5

I get a response, but even in a 400 kilometer radius i get no webcams. I’m only 145 miles away from New York in a pretty populated area. That means in the entire 502,400 square miles around me, there was not one webcam this API could find, including the entirely New York City. This is after like 20 seconds of loading.

Am i missing something?

7

I cant copy and paste: but here was the summery i got:

limit: 10
offset : 0
total: 0

Here was my code:

–> https://codepen.io/Mike-was-here123/pen/QmvpPq

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lon = position.coords.longitude;
    var lat = position.coords.latitude;
    var api =
      "https://webcamstravel.p.mashape.com/webcams/list/nearby=${lat},${lon},400?show=webcams%3Aimage%2Clocation&lang=en";
    $.ajax({
      headers: {
        "X-Mashape-Key": "259BoCo00EmshEY66V2fiO91BTNJp1bXmHLjsn84Q94brn3Z",
// removed a couple letters for show, i could privately message you my Key 
// or just check my code pen
        "X-Mashape-Host": "webcamstravel.p.mashape.com"
      },
      url: api,
      success: function(data) {
        console.log(data);
      }
    });
  });
}

You live in a pretty nice area btw. Let me guess, San Jose State University?

9

Thanks, now it worked. Even reading over the description of back ticks, not entirely sure why its different then using " “+value+” ".

How often did the API take a long time to load? I got mine working, but once in a while it will take like 30 seconds to load.

Not a big issue, not much you can do about it. Thanks very much!

11

Thanks, i changed that and hopefully it will load faster

The nearest camera was only 13.84 miles away in Maryland, pretty decent for weather.

13

Coming back to this now:

I noticed how there isn’t a link to a live feed, just a picture. If this website has accesses to 1000’s of webcam, how come it cant return a link to the web camera on its website?

15

After using the API iv noticed:

The images i get have less then 100px. I thought webcam api was a link to the live camera feed. I cant even make out anything in the picture when it contains 100px and they try to blow it up to the size of my screen.