Seattle Traffic Cameras
A static Seattle/King County-area traffic camera viewer hosted on GitHub pages.
You can view the live site here or by clicking the screenshot below!
To-Do List
- Ability to save currently open cameras to the URL hash to be re-loaded later
- Camera name and close button on individual cameras in list (hover over stream)
- A built-in method of recording video streams and saving them as .mp4 or .webm files (requires above item first)
- Integrate data from sfdlive to show active fire department calls on the map
- “Close all” button
- Move certain parameters to a config file (such as marker colors)
- Investigate possibility of a low framerate mode for when many cameras are pulled up at once
- Add drag function to camera streams so the layout can be rearranged
- Internal: Add GitHub action to automatically generate updated camera list and commit to repository (every 24h perhaps?)
Guide
When the site is first opened, a map will be visible on the bottom 2/3 of the screen. Markers will load in on the map (slowly or quickly depending on your internet connection); these are all traffic cameras. Many of the highway cameras are operated by WSDOT and are only still images that update every minute or so, whereas the rest (in the Seattle area) are operated by SDOT and are live video streams.
The loading process that occurs when you open the site is verifying that the SDOT cameras are working. There are usually quite a few broken SDOT cams at any given time, and that process will remove them from the map. It can be skipped if you’re on a poor internet connection or it’s being slow for some other reason (by pressing the blue button below the location search bar), but this will cause broken streams to be visible and may become tedious. The results of the camera testing will be cached and future loads should be faster (unless the cache entries are overwritten, which is possible if you’re using your browser heavily for a long period of time).
Cameras
You can open and close cameras by clicking on their associated markers on the map. They will appear below the map, which can be hidden by clicking on the map button at the top right. Alternatively, hovering over camera feeds (or holding down on them on mobile) will show a close button that can be used instead. If you’d like to close all open cameras at once, press the red Close All button at the top right.
The green play button at the top right will play and fast-forward all video streams to roughly the current time (it will always be off by about 10-20 seconds, as the SDOT streams send new data in chunks every 10s).
The size of all cameras can be adjusted with the video width slider at the top right. This is adjusted by percentage of total screen width, so 25% means four cameras will fit on each row.
Searching locations
A location search bar is available at the top left of the map. It uses Nominatim to perform a geolocation search and displays the result location on the map with a red marker. This marker can be clicked to dismiss. You do not need to put “Seattle, WA” or something similar at the end of your search, as “seattle” is appended to the end of each search query automatically. This makes it useful for searching intersections, as you can type stuff like “3rd & seneca” and it will pull up the intersection on the map. Addresses work as well, of course. Although be warned, results are not flawless and don’t work at all sometimes.
Persistence
Currently open cameras, video width, and whether the map is open or not are all properties that are saved to the URL. This means reloading the page (or copying the current URL in your browser and sharing it) should bring up essentially the exact same view.
For example, here is Rainier Ave S from I-90 to S Othello Street with the map closed.
Or, for something a bit more crazy, click the screenshot below for every single (working) Downtown Seattle traffic camera west of I-5. This will load over 60 simultaneous video streams, so make sure your device and internet can handle that!