Track An Area Using Higher Resolution Mobile Phone Camera
An obsolete phone can be turned into a webcam using a custom application. Even older devices have higher resolutions compared to the default 640×480 WebRTC. Most smartphones come with Wi-Fi to connect to the local area network and do not need to be connected to the internet. PHP will be used for the server on the work-station and to receive the images at a specific interval. HTML5 Camera access requires an SSL Certificate. A self-signed Certificate will be created and served using stunnel.
For my use case, I raised chickens and want them to roam on the pasture when I am working indoors. I envisioned a camera setup running off a battery and solar panel and a miniature computer that uses a Wi-Fi connection to record and send photos or a video at a specific interval.
This concept can also work with tablets and notebooks. I chose to use old phones because they are smaller and use less power. Phones can charged only a few times per week while turned on for several hours per day. A phone can be mounted outside the phone has water-proof protection. Phones with motion detectors can also be used to turn on only if something in detected just outside of the target area.
Stunnel can be downloaded and installed manually or through a package manager for desktop operating systems. You can use any self-signed certificate in the stunnel configuration file. Stunnel was ran before the PHP built-in web server.
Modern web browsers allow higher resolutions for WebRTC such as 4K and 8K. Video constraints will be used to specify the minimum resolution, ideal resolution and maximum resolution. For the Chicken Camera Application, the highest resolutions will be achieved from the back facing camera.
Requirements For Security Camera
Glossary:
URL
Page to open.
Wi-Fi
Wireless network protocols based on the IEEE 802.11 standards for local area networks.
WLAN
Wireless LAN is a computer network that links 2 or more devices.
Tunneling
Communication protocol which allows movement of data from one network to another.
TLS
Transport Layer Security is a cryptographic protocol for secure communication over a network.
WebRTC
Web Real-Time Communication via application programming interfaces (APIs).
Hi-res
High-resolution has minimum of 300 pixels per inch (PPI) for images.
Discontinued Devices
| Name | Description | Recording | Power |
|---|---|---|---|
| Apple iPhone SE | Updated to iOS 15.8.3 and Safari 18.3. | Takes photos and videos on front and back cameras. | Lighting, USB 2.0 10W charging |
| Sony Xperia XA1 Ultra | Updated to Android 8.0 and lastest web browser. | Takes photos and videos on front and back cameras. | USB Type-C 2.0 10W charging |
| Name | Description | Example |
HTML High Resolution Take Photo Every 3 Seconds
<!DOCTYPE html> <html> <head> <title>Record Photos</title> <meta charset="utf-8" /> </head> <body> <button type="button">Record</button> <video></video> <script type="text/javaScript"> // JavaScript Goes Here </script> </body> </html>
JavaScript Take High Resolution Photo Every 3 Seconds
(() => {
let str = null;
let iid = null;
let vid = document.querySelector('video');
let btn = document.querySelector('button');
let sel = document.querySelector('select');
let cts = {
video: {
width: { min: 1920, ideal: 3840, max: 7680 },
height: { min: 1080, ideal: 2160, max: 4320 }
},
audio: false
};
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(() => {
navigator.mediaDevices.enumerateDevices().then((devices) => {
let vds = devices.filter(device => device.kind === 'videoinput');
let opt = vds.map(vd => {
return `<option value="${vd.deviceId}">${vd.label}</option>`;
});
sel.innerHTML = `<option value="">Select Camera</option>` + opt.join('');
});
});
sel.addEventListener('change', (evt) => {
if (str !== null) {
str.getTracks().forEach(track => {
track.stop();
vid.srcObject.removeTrack(track);
});
vid.pause();
vid.src = '';
str = null;
}
if ( sel.value !== "") {
cts.video.deviceId = sel.value;
navigator.mediaDevices.getUserMedia(cts).then((stream) => {
str = stream;
vid.srcObject = stream;
vid.play();
});
}
});
btn.addEventListener('click', (evt) => {
if (btn.innerHTML == 'Record') {
btn.innerHTML = 'Recording';
iid = setInterval(() => {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.width = vid.videoWidth;
canvas.height = vid.videoHeight;
context.drawImage(vid, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
let file = new File([blob], 'image.png', {type: blob.type});
let fd = new FormData();
fd.append('image', file);
fetch('save-video.php', {
method: 'POST',
body: fd
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
});
}, 3000);
} else {
btn.innerHTML = 'Record';
clearInterval(iid);
}
});
})();
JavaScript Refresh Photo Every 3 Seconds
// Reload Every 3 Seconds
setInterval(function(){
let img = document.querySelector('img');
if ( !img.src.includes('?') ) {
img.src = `${img.src}?${Date.now()}`;
} else {
img.src = img.src.slice(0, img.src.indexOf('?') + 1) + Date.now();
}
}, 3000);
PHP Upload Photo
if ( !empty($_FILES['image']) ) {
$file = $_FILES['image']['tmp_name'];
$destination = dirname(__FILE__) . '/image.png';
if (move_uploaded_file($file, $destination) ) {
echo json_encode(['status' => 'OK']);
}
}
die();
Stunnel Configuration
[https] accept = 192.168.1.22:8443 connect = 192.168.1.22:8000 cert = stunnel.pem
Usage
You can use any IDE or text editor and the web browser to compile and execute JavaScript code. For this tutorial, the OjamboShop.com Learning JavaScript Course Web IDE can be used to input and compile JavaScript code for the HTML5 Phone Security Camera.
Open Source
JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. This allows commercial use, modification, distribution, and allows making derivatives proprietary.
Live Stream
Every day, you can join a live stream and ask questions. Check Ojambo.com for details and instructions.
Learn Programming Courses:
Get the Learning JavaScript Course or the Learning PHP Course for your web browser on any device.
Learn Programming Books:
Learning JavaScript Book is available as Learning JavaScript Paperback or Learning JavaScript Ebook.
Learning PHP Book is available as Learning JavaScript Ebook.
Conclusion:
HTML5 makes it easy to request permission to use a phone camera and create a video or photograph at specified intervals. PHP is used to upload images and make them available for display on the receiving device. Stunnel is used as a proxy to add TLS encryption for the local area network. An old device with a camera such as a smartphone, tablet, laptop or miniature computer can be used as a high resolution security camera.
If you enjoy this article, consider supporting me by purchasing one of my WordPress Ojambo.com Plugins or programming OjamboShop.com Online Courses or publications at Edward Ojambo Programming Books or become a donor here Ojambo.com Donate
References:
- Stunnel Proxy encrypting TCP connections with SSL/TLS
- Customer Sets Price Plugin for WooCommerce on Ojambo.com
- Learning JavaScript Course on OjamboShop.com
- Learning Python Course on OjamboShop.com
- Learning PHP Course on OjamboShop.com
- Learning JavaScript Paperback on Amazon
- Learning JavaScript Ebook on Amazon
- Learning Python Ebook on Amazon
- Learning PHP Ebook on Amazon
- OjamboServices.com For Custom Websites, Applications & Tutorials