-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
65 lines (50 loc) · 2.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<title>Motion activated Security Camera with webRTC and devicemotion/orientation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script src="JS/motionDetector.js"></script>
<script src="JS/securityCamera.js"></script>
<link type="text/css" href="style.css" rel="stylesheet">
<script>
function initializePage() {
//initialize the motionDetector and camera
var video = document.querySelector("video")
var canvas = document.querySelector("canvas")
motionDetector.start(isInMotion); //start the motion detector with a callback to call when motion is detected
videoCamera.initialize(video, canvas)
}
function isInMotion() {
//a callback for the motionDetector to call when the device is in motion
var banner = document.querySelector('#wasShaken');
banner.innerHTML = "intruder alert";
banner.classList.add("alert")
var snapshotImage = videoCamera.takeSnapshot()
if (snapshotImage) {
document.querySelector("img").src = snapshotImage
//also save snapshot to localStorage?
//send snapshot via email, or some other way to alert
}
}
function clearMessage() {
//clear the "intruder alert" message
var banner = document.querySelector('#wasShaken');
banner.innerHTML = " ";
banner.classList.remove("alert")
}
var intervalID = window.setInterval(clearMessage, 5000);
//if no motion detected after 5 seconds, stop the message
window.addEventListener("load", initializePage)
</script>
</head>
<body>
<h1>Motion activated security camera using DeviceMotion/Orientation, canvas, WebRTC</h1>
<p>Read more about how its done at <a href="http://www.webdirections.org/?p=4693">Web Directions</a></p>
<p>Grab the code from <a href="https://github.com/JohnAllsopp/webRTC-Security-Camera">Github</a></p>
<video autoplay style="display:none;"></video>
<div id="wasShaken"> </div>
<img src="">
<canvas style="display:none;" width="1000" height="1000"></canvas>
</body>
</html>