Web cam API help [SOLVED]

#1

So i’m trying to access this API: https://developers.webcams.travel/#webcams/list/nearby

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]

#2

You need to thoroughly read the documentation for the API. You must sign up for a RapidAPI account or you will not be able to access the api. The

When you wrote the above code, the url would be pointing to a local folder, which in this case would be located on Codepen, since you were executing the script from Codepen. Also, the API documentation references to { } does not mean you include the curly brackets. They are there to let you know a value goes there. Also, if you look closely, the API expects the nearby querystring parameter to start with latitude. Your url string started with longitude.

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

#6

I don’t know what to tell you. When I run mine with just a 10 mile radius, I get the following:

{
  "status": "OK",
  "result": {
    "offset": 0,
    "limit": 10,
    "total": 6,
    "webcams": [{
      "id": "1183553729",
      "status": "active",
      "title": "San Jose",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1183553729.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1183553729.jpg",
          "preview": "https://images.webcams.travel/preview/1183553729.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1183553729.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1183553729.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1183553729.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1183553729.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1183553729.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521686948
      },
      "location": {
        "city": "San Jose",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": 37.3385,
        "longitude": -121.89537,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/San_Jose%2C_California"
      }
    }, {
      "id": "1259732604",
      "status": "active",
      "title": "Sunnyvale: Webcam",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1259732604.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1259732604.jpg",
          "preview": "https://images.webcams.travel/preview/1259732604.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1259732604.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1259732604.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1259732604.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1259732604.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1259732604.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521686739
      },
      "location": {
        "city": "Sunnyvale",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": 37.34703,
        "longitude": -122.002187,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/Sunnyvale%2C_California"
      }
    }, {
      "id": "1349794808",
      "status": "active",
      "title": "San Jose: Sky View",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1349794808.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1349794808.jpg",
          "preview": "https://images.webcams.travel/preview/1349794808.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1349794808.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1349794808.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1349794808.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1349794808.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1349794808.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521686530
      },
      "location": {
        "city": "San Jose",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": 37.339386,
        "longitude": -121.894955,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/San_Jose%2C_California"
      }
    }, {
      "id": "1349794810",
      "status": "active",
      "title": "San Jose: Sky View",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1349794810.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1349794810.jpg",
          "preview": "https://images.webcams.travel/preview/1349794810.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1349794810.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1349794810.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1349794810.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1349794810.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1349794810.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521687161
      },
      "location": {
        "city": "San Jose",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": 37.339386,
        "longitude": -121.894955,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/San_Jose%2C_California"
      }
    }, {
      "id": "1349794811",
      "status": "active",
      "title": "San Jose: Sky View",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1349794811.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1349794811.jpg",
          "preview": "https://images.webcams.travel/preview/1349794811.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1349794811.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1349794811.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1349794811.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1349794811.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1349794811.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521686570
      },
      "location": {
        "city": "San Jose",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": 37.339386,
        "longitude": -121.894955,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/San_Jose%2C_California"
      }
    }, {
      "id": "1387797607",
      "status": "active",
      "title": "San Jose: HamCam",
      "image": {
        "current": {
          "icon": "https://images.webcams.travel/icon/1387797607.jpg",
          "thumbnail": "https://images.webcams.travel/thumbnail/1387797607.jpg",
          "preview": "https://images.webcams.travel/preview/1387797607.jpg",
          "toenail": "https://images.webcams.travel/thumbnail/1387797607.jpg"
        },
        "daylight": {
          "icon": "https://images.webcams.travel/daylight/icon/1387797607.jpg",
          "thumbnail": "https://images.webcams.travel/daylight/thumbnail/1387797607.jpg",
          "preview": "https://images.webcams.travel/daylight/preview/1387797607.jpg",
          "toenail": "https://images.webcams.travel/daylight/thumbnail/1387797607.jpg"
        },
        "sizes": {
          "icon": {
            "width": 48,
            "height": 48
          },
          "thumbnail": {
            "width": 200,
            "height": 112
          },
          "preview": {
            "width": 400,
            "height": 224
          },
          "toenail": {
            "width": 200,
            "height": 112
          }
        },
        "update": 1521687227
      },
      "location": {
        "city": "San Jose",
        "region": "California",
        "region_code": "US.CA",
        "country": "United States of America",
        "country_code": "US",
        "continent": "North America",
        "continent_code": "NA",
        "latitude": xx.xxxxx,
        "longitude": -xxx.xxxxx,
        "timezone": "America/Los_Angeles",
        "wikipedia": "https://en.wikipedia.org/wiki/San_Jose%2C_California"
      }
    }]
  }
}

What does your response look like?

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

#8

Yes, I live in San Jose.

You might want to put the following before the $.ajax call. Your api string is not what you think it is. I used a template literal. Template Literals do not use " or ’ Instead they use ` (a backtick)

console.log(api);
#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!

#10

I did notice a few times it takes longer. There may be some rate limiting that prevents too many requests. When dealing with APIs, it is always a good idea to turn off the Auto-Updating Preview feature of Codepen (under Settings…Behavior), so that you have to click Run to execute the code. If not, then every time you type a couple of characters on the keyboard, the code runs again.

1 Like
#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.

#12

The only thing I noticed about most of the camera images is that at night, you just see a black image.

1 Like
#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?

#14

That question would be better posed to the API creator.

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

#16