Simple Github PHP Code to Ask Camera Permission and Capture Photo to Upload to Website - NETSEC

Latest

Learning, Sharing, Creating

Cybersecurity Memo

Sunday, June 27, 2021

Simple Github PHP Code to Ask Camera Permission and Capture Photo to Upload to Website

 Github Project address: https://github.com/51sec/camera

Camera Project Description

This project is used to demonstrate how easy a web app can use your camera to take a photo. As long as you give permission to this web app to use your camera when you launched the page, it can take your camera photo right away without any further notification.
  • on the mobile devices, phone or tablet, it will use front camera to take the photo.
  • https connection will be required for most of browsers. Using http, most browsers will not be able to get Camera permission.



Demo: https://camera.51sec.eu.org

Screenshots

Basic web page to ask your permission to access your camera.  Web page to show you the captured camera photos.


You can modify home.php file line 46 for photo.php file location.
At Photo.php file line 25, you can modify the folder location for captured photos.

Demo Site on Free Php Hosting Website

It will be best to use free php web provider to ftp download codes in. 

Try to find free website provider from this blog post: https://blog.51sec.org/2022/10/popular-free-web-hosting-summary.html

Demo site: https://netsec.alwaysdata.net/  - https://camera.51sec.eu.org

It will ask your permission to access your camera. Once you allowed it, it will automatically take one photo from your camera. 


Steps:
1.  Go to github project https://github.com/51sec/camera  to download code in zip formwat


2. unzip the zip file so you will get camera-main folder which includes all files.


3. Using sftp/ftp to upload to your www folder which you get from those free php website providers.

For example, I am using free web hosting  service from alwaysdata.net, which provides a ftp/sftp access to the website folders.  (https://blog.51sec.org/2022/10/popular-free-web-hosting-summary.html#point7)

We can use online web ftp service (https://www.filestash.app/online-ftp-client.html) website to ftp the code files into the free web hosting folders provided by alwaysdata


Drag the unzipped folders and files into www folder as show below, your Camera website is good to go:


Files - Single-File PHP Application to Manage Files and Folders

Latest Version:

Github: https://github.com/mjau-mjau/files.photo.gallery

Requirements Files app requires a web server with PHP 5.5 or higher.

Files Phot Gallery (FPG) is a single-file PHP app that can be dropped into any folder on server, instantly creating a gallery of files and folders [Demo]

Installation steps:
2. drop into any folder and view from browser


It is free but with a license -popup when you access the page. 


Old version: 

Another Github project for version 0.4 : https://github.com/Qiantigers/files.photo.gallery
  • Special local js folder and file has to be put into same structure as well. 
  • Put files.js into cloud: https://cdn.jsdelivr.net/gh/sunpma/cdn/other/files.js
    • only one file .
    • Testing Site: https://netsec.alwaysdata.net/fpg/  (test/test)




Heroku Sites (Not Working for Free Plan Anymore)


Notes: Heroku free tier does not support web function. Following steps are not working for Heroku anymore.  


Web service is not part of free tier anymore. You will subscripte to Eco dynos plan for $5 to get 1000 dyno hours/month. 

Step1:

  • https://camera51.herokuapp.com/ : Once you accessed this page, either through computer, or mobile devices, it will ask your permission to access camera then it will take a photo from your camera automatically. The photo taken by camera will be saved into a folder named by your public ip. Captured Photo will be placed into website /photos/ folder

Note: The photo will be deleted automatically once Heroku app is in idle. It will be active 12 hours/day from 8AM - 8PM.

Step2: 

To manage the camera photo, you might need to use another php script to view/delete/upload your photos. In this project, I integrated the one from https://github.com/jcampbell1/simple-file-manager . The code has been put into index.php file under photos folder to make the whole project easy to use.

Notes: Original index.php and photo.php code is from SunPma's blog post,“https://sunpma.com/994.html”. I translated all to English and add simple-file-manager code into it. All codes are belongs to original authors.


Step3: 

Create a cron job at https://cron-job.org/  to access your site every 30 minutes to keep your Heroku app from sleeping. 




Again, Heroku demo site is not working anymore (April 202)


YouTube




References




No comments:

Post a Comment