Fitc donttrusttheinternet [raw upload]

780 views

Published on

raw upload of my FITC presentation, had to remove some slides because of the 20MB limit of slideshare, will make blogpost tutorial with all the steps as soon as possible :)

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
780
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Fitc donttrusttheinternet [raw upload]

    1. 1. Don’t trust the internet Thijs Bernolet @recyclerobot recyclerobot.com
    2. 2. Don’t trust the internet Shawn Pucknell’s tripfrom his house to Amsterdam Thijs Bernolet @recyclerobot recyclerobot.com
    3. 3. about me
    4. 4. how society sees my trip toamsterdam
    5. 5. how my parents see my trip toamsterdam
    6. 6. how my friends see my trip toamsterdam
    7. 7. how I’m really doing my trip toamsterdam
    8. 8. how my trip to amsterdam really is <movie>
    9. 9. personal projects
    10. 10. MP3BRUTALIZER.COM
    11. 11. OCTOHEDRON.COM <movie>
    12. 12. NERDLAB.BE Retro games, Circuit bending, Interactieve visuals, Elektronische muziek, Useless domotica
    13. 13. Shawn Pucknell’s tripfrom his house to Amsterdam using google streetview
    14. 14. 2 parts 1. How did I get the address? 2. Google streetview moviemaker + code
    15. 15. Everyone does it : Geolocation
    16. 16. Some of the biggestplayers: 1. facebook 2. twitter 3. Foursquare 4. flickr/instagram 5. exif image data
    17. 17. 1. Facebook does not officially allow you to extract exact user location from graph API, even when the user has entered the information in the “about me” section
    18. 18. 1. Facebook allows for “home town” area > never exact location and “current location” explicit facebook app permissions
    19. 19. 1. Facebook facebook checkins if available a.k.a. very buggy
    20. 20. 1. Facebook solution: cURL ‘fake login’ & scrape WARNING: NOT COMPATIBLE WITH FACEBOOK PLATFORM POLICIES https://developers.facebook.com/ policy/
    21. 21. 1. Facebookphp cURL Setup:
    22. 22. 1. Facebookphp cURL Setup:
    23. 23. 1. Facebookphp cURL Setup: CHMOD 777
    24. 24. 1. Facebook you now have a valid FB session and can scrape trough your friendlist preg_matching the “address” table field
    25. 25. 2. Twitter strict permission based location API but different take on mobile devices depending on your iOS/Android app, you’ll most likely send location information along with your tweets
    26. 26. 2. Twitter posting from the twitter.com site and allowing geolocation you’ll most likely attach your area to your tweets
    27. 27. 2. Twitter you can also customize your location by searching for a previously mentioned location
    28. 28. 2. Twitter from mobile devices it sends geo location along without explicit permission, helping you to see “nearby local trends” note: your location is only posted when you actually click on the location icon
    29. 29. 2. Twitter developing your own twitter app will allow you to silently gather geolocation information about a person, even with a recursive fall back system if the person has a bad GPS signal thanks twitter!
    30. 30. 2. Twitter https://api.twitter.com/1/statuses/show/ 172379200131563520.json native API call shows you the “neighborhood” you’ve send your tweet {"created_at":"Wed Feb 22 17:56:18 +0000 2012","id":172379200131563520,"id_str":"172379200131563520","text":"tweet location","source":"web","truncated":false,"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_u ser_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id": 44895844,"id_str":"44895844","name":"Thijs Bernolet","screen_name":"recyclerobot","location":"Belgium","description":"Interactive giraffe, fulltime nerdlabber, visual orgasm with Octohedron and creative robot at Little Miss Robot","url":"http:// www.recyclerobot.com","protected":false,"followers_count":191,"friends_count":177,"listed_count":6,"created_at":"Fri Jun 05 13:51:22 +0000 2009","favourites_count":3,"utc_offset": 3600,"time_zone":"Brussels","geo_enabled":true,"verified":false,"statuses_count": 575,"lang":"en","contributors_enabled":false,"is_translator":false,"profile_background_color":"FFFFFF","profile_backgro und_image_url":"http://a0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_image_url_https":"https://si0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_tile":true,"profile_image_url":"http://a0.twimg.com/profile_images/ 1134396838/LMR00923MVC20100907_kleiner2_normal.jpg","profile_image_url_https":"https://si0.twimg.com/profile_images /1134396838/ LMR00923MVC20100907_kleiner2_normal.jpg","profile_link_color":"D66666","profile_sidebar_border_color":"FFFFFF","profile _sidebar_fill_color":"FFFFFF","profile_text_color":"757575","profile_use_background_image":true,"show_all_inline_media" :false,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":false,"notification s":null},"geo":null,"coordinates":null,"place":{"id":"6d46a7614a0145b7","url":"http://api.twitter.com/1/geo/id/ 6d46a7614a0145b7.json","place_type":"city","name":"Aalter","full_name":"Aalter, Gent","country_code":"BE","country":"Belgiu00eb","bounding_box":{"type":"Polygon","coordinates": [[[3.331299,51.016438],[3.525382,51.016438],[3.525382,51.122519],[3.331299,51.122519]]]},"attributes": {}},"contributors":null,"retweet_count":0,"favorited":false,"retweeted":false}
    31. 31. 2. Twitter https://api.twitter.com/1/statuses/show/ 172379200131563520.json native API call shows you the “neighborhood” you’ve send your tweet {"created_at":"Wed Feb 22 17:56:18 +0000 2012","id":172379200131563520,"id_str":"172379200131563520","text":"tweet location","source":"web","truncated":false,"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_u ser_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id": 44895844,"id_str":"44895844","name":"Thijs Bernolet","screen_name":"recyclerobot","location":"Belgium","description":"Interactive giraffe, fulltime nerdlabber, visual orgasm with Octohedron and creative robot at Little Miss Robot","url":"http:// www.recyclerobot.com","protected":false,"followers_count":191,"friends_count":177,"listed_count":6,"created_at":"Fri Jun 05 13:51:22 +0000 2009","favourites_count":3,"utc_offset": 3600,"time_zone":"Brussels","geo_enabled":true,"verified":false,"statuses_count": 575,"lang":"en","contributors_enabled":false,"is_translator":false,"profile_background_color":"FFFFFF","profile_backgro und_image_url":"http://a0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_image_url_https":"https://si0.twimg.com/profile_background_images/155884454/ "place_type":"city","name":"Aalter" pattern_017.gif","profile_background_tile":true,"profile_image_url":"http://a0.twimg.com/profile_images/ 1134396838/LMR00923MVC20100907_kleiner2_normal.jpg","profile_image_url_https":"https://si0.twimg.com/profile_images /1134396838/ LMR00923MVC20100907_kleiner2_normal.jpg","profile_link_color":"D66666","profile_sidebar_border_color":"FFFFFF","profile _sidebar_fill_color":"FFFFFF","profile_text_color":"757575","profile_use_background_image":true,"show_all_inline_media" :false,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":false,"notification s":null},"geo":null,"coordinates":null,"place":{"id":"6d46a7614a0145b7","url":"http://api.twitter.com/1/geo/id/ 6d46a7614a0145b7.json","place_type":"city","name":"Aalter","full_name":"Aalter, Gent","country_code":"BE","country":"Belgiu00eb","bounding_box":{"type":"Polygon","coordinates": [[[3.331299,51.016438],[3.525382,51.016438],[3.525382,51.122519],[3.331299,51.122519]]]},"attributes": {}},"contributors":null,"retweet_count":0,"favorited":false,"retweeted":false}
    32. 32. 2. Twitter https://api.twitter.com/1/statuses/show/ 173781331040415744.json mobile API call with custom twitter app shows you: {"created_at":"Sun Feb 26 14:47:52 +0000 2012","id":173781331040415744,"id_str":"173781331040415744","text":"This is my location","source":"u003ca href="http://twitter.com/#!/download/iphone" rel="nofollow"u003eTwitter for iPhoneu003c/a u003e","truncated":false,"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_ reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id":44895844,"id_str":"44895844","name":"Thijs Bernolet","screen_name":"recyclerobot","location":"Belgium","description":"Interactive giraffe, fulltime nerdlabber, visual orgasm with Octohedron and creative robot at Little Miss Robot","url":"http:// www.recyclerobot.com","protected":false,"followers_count":191,"friends_count":177,"listed_count":6,"created_at":"Fri Jun 05 13:51:22 +0000 2009","favourites_count":3,"utc_offset": 3600,"time_zone":"Brussels","geo_enabled":true,"verified":false,"statuses_count": 575,"lang":"en","contributors_enabled":false,"is_translator":false,"profile_background_color":"FFFFFF","profile_backgro und_image_url":"http://a0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_image_url_https":"https://si0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_tile":true,"profile_image_url":"http://a0.twimg.com/profile_images/ 1134396838/LMR00923MVC20100907_kleiner2_normal.jpg","profile_image_url_https":"https://si0.twimg.com/profile_images /1134396838/ LMR00923MVC20100907_kleiner2_normal.jpg","profile_link_color":"D66666","profile_sidebar_border_color":"FFFFFF","profile _sidebar_fill_color":"FFFFFF","profile_text_color":"757575","profile_use_background_image":true,"show_all_inline_media" :false,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":false,"notification s":null},"geo":{"type":"Point","coordinates":[51.06573600,3.72553367]},"coordinates":{"type":"Point","coordinates": [3.72553367,51.06573600]},"place":{"id":"67687709552688fe","url":"http://api.twitter.com/1/geo/id/ 67687709552688fe.json","place_type":"city","name":"Ghent","full_name":"Ghent, Ghent","country_code":"BE","country":"Belgium","bounding_box":{"type":"Polygon","coordinates":[[[3.579764,50.979531], [3.849360,50.979531],[3.849360,51.187961],[3.579764,51.187961]]]},"attributes":{}},"contributors":null,"retweet_count": 0,"favorited":false,"retweeted":false}
    33. 33. 2. Twitter https://api.twitter.com/1/statuses/show/ 173781331040415744.json mobile API call with custom twitter app shows you: {"created_at":"Sun Feb 26 14:47:52 +0000 2012","id":173781331040415744,"id_str":"173781331040415744","text":"This is my location","source":"u003ca href="http://twitter.com/#!/download/iphone" rel="nofollow"u003eTwitter for iPhoneu003c/a u003e","truncated":false,"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_ reply_to_user_id_str":null,"in_reply_to_screen_name":null,"user":{"id":44895844,"id_str":"44895844","name":"Thijs Bernolet","screen_name":"recyclerobot","location":"Belgium","description":"Interactive giraffe, fulltime nerdlabber, visual orgasm with Octohedron and creative robot at Little Miss Robot","url":"http:// www.recyclerobot.com","protected":false,"followers_count":191,"friends_count":177,"listed_count":6,"created_at":"Fri Jun 05 13:51:22 +0000 2009","favourites_count":3,"utc_offset": 3600,"time_zone":"Brussels","geo_enabled":true,"verified":false,"statuses_count": 575,"lang":"en","contributors_enabled":false,"is_translator":false,"profile_background_color":"FFFFFF","profile_backgro "type":"Point","coordinates": und_image_url":"http://a0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_image_url_https":"https://si0.twimg.com/profile_background_images/155884454/ pattern_017.gif","profile_background_tile":true,"profile_image_url":"http://a0.twimg.com/profile_images/ /1134396838/ [51.06573600,3.72553367]} 1134396838/LMR00923MVC20100907_kleiner2_normal.jpg","profile_image_url_https":"https://si0.twimg.com/profile_images LMR00923MVC20100907_kleiner2_normal.jpg","profile_link_color":"D66666","profile_sidebar_border_color":"FFFFFF","profile _sidebar_fill_color":"FFFFFF","profile_text_color":"757575","profile_use_background_image":true,"show_all_inline_media" :false,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":false,"notification s":null},"geo":{"type":"Point","coordinates":[51.06573600,3.72553367]},"coordinates":{"type":"Point","coordinates": [3.72553367,51.06573600]},"place":{"id":"67687709552688fe","url":"http://api.twitter.com/1/geo/id/ 67687709552688fe.json","place_type":"city","name":"Ghent","full_name":"Ghent, Ghent","country_code":"BE","country":"Belgium","bounding_box":{"type":"Polygon","coordinates":[[[3.579764,50.979531], [3.849360,50.979531],[3.849360,51.187961],[3.579764,51.187961]]]},"attributes":{}},"contributors":null,"retweet_count": 0,"favorited":false,"retweeted":false}
    34. 34. 2. Twitter
    35. 35. 3. Foursquare very easy to search for location most people on foursquare publish their checkins on twitter/facebook, so you just write a twitter scraper to get all the locations or use an online service
    36. 36. pleaserobme.com
    37. 37. 4. Flickr/instagram flickr and instagram recently allowed geolocation with posting of pictures, using a scraper you can easily automaticly extract the information
    38. 38. 4. Flickr
    39. 39. (5. EXIF Data) EXIF Viewer is a firefox addon that enables you to view the complete EXIF data of pictures, many mobile phones and high end cameras send location tags along with the picture in the EXIF data http://araskin.webs.com/exif/ exif.html
    40. 40. (5. EXIF Data)
    41. 41. (5. EXIF Data)
    42. 42. (5. EXIF Data) 46.586,23.460333
    43. 43. Using a combinationof the previous API’s *drumroll*
    44. 44. Google streetview movie maker things get nerdy
    45. 45. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4 Direction calculator + array credits: Thor Mitchell
    46. 46. Google streetview movie maker
    47. 47. Google streetview movie maker event listeners + load begin + end points
    48. 48. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    49. 49. Google streetview movie maker get directions , get polyline vertices and setup streetview coverage
    50. 50. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    51. 51. Google streetview movie maker get vertex point and check if streetview exists
    52. 52. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    53. 53. Google streetview movie maker timer functions to move view
    54. 54. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    55. 55. Google streetview movie maker timer functions to move view
    56. 56. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    57. 57. Google streetview movie maker calculate next
    58. 58. Google streetview movie maker calculate direction angle between 2 vertex points the magic part!
    59. 59. Google streetview movie maker 0. setup map + streetview > “load()” 1. Calculate route + vertices > “jumpInMyCar()” 2. Check if streetview exists for vertices > “checkCoverage()” 3. setup/continue loop timer > “moveMyCar()” 4. goto next vertex point > “jumpToVertex()” 5. calculate next vertex point + calculate the pan direction a. NodeJS > PhantomJS 6. call screenshot app b. Shell_exec SCROT 7. back to step 4
    60. 60. Google streetview movie maker set viewAngle streetview to direction vector and take screenshot
    61. 61. Google streetview movie maker screenshot possible ways: first idea: NodeJS & PhantomJS client Pain in the ass
    62. 62. Google streetview movie maker screenshot possible ways: first idea: NodeJS & PhantomJS clientUbuntu 10.04 > first compile QT4 with webkitapt-get install libqt4-core libqt4-dev libqt4-gui  qt4-dev-toolsgit clone and makegit clone git://github.com/ariya/phantomjs.git && cd phantomjsgit checkout 1.3qmake-qt4 && make
    63. 63. Google streetview movie maker NodeJS & PhantomJS > No WebGL headless render support nor flash support SCROT & firefox to the rescue Ubuntu 10.04: apt-get update apt-get install scrot firefox
    64. 64. Google streetview movie maker install flash universal for linux firefox Ubuntu 10.04: apt-get install flash-universal- binary
    65. 65. Google streetview movie maker BOTH need a virtual render display Xvfb Ubuntu 10.04 install: apt-get install xvfb xfonts-base xfonts-75dpi xfonts-100dpi font errors: apt-get install msttcorefonts cabextract x-ttcidfont-conf
    66. 66. Google streetview movie maker run firefox as seperate process and surf to your streetview application Ubuntu 10.04: nohup DISPLAY=:1 firefox http:// *****.recyclerobot.com/streetview.php - width=1024 -height=768 &
    67. 67. Google streetview movie maker encode your 100000 files with mencoder 1. create alphabetical list in TXT 2. render TXT list to movie Ubuntu 10.04: #~list -v > list.txt #~mencoder mf://@list.txt -mf fps=25 -ovc x264 -nosound -ofps 25.0 -noskip -of rawvideo -o output.mp4
    68. 68. The final result
    69. 69. https://vimeo.com/37753940

    ×