-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
119 lines (94 loc) · 3.17 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>ARphone</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
</head>
<body style="background-color:black;">
<canvas id="canvas" style="margin:auto; display:block;" />
<video id="video" style="display:none;" muted />
<script type="text/javascript">
var TO_RADIANS = Math.PI / 180.0;
var TO_DEGREES = 180.0 / Math.PI;
var HORIZONTAL_FOV = 63.5;
var VERTICAL_FOV = 50;
var DRAW_COLOR = "#3ded2d";
var pitch = 0;
var roll = 0;
window.addEventListener("deviceorientation", handleOrientationChanged, true);
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.font = "3rem sans-serif";
ctx.fillStyle = DRAW_COLOR;
ctx.strokeStyle = DRAW_COLOR;
ctx.textAlign = "center";
ctx.fillText("Touch screen to start", canvas.width/2, canvas.height/2);
var video = document.getElementById("video");
canvas.addEventListener("click", function () {
video.play();
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
draw();
});
navigator.mediaDevices.enumerateDevices()
.then(devices =>
devices.filter(device => device.label.includes("back")))
.then(cameras => {
console.log("Using device: " + JSON.stringify(cameras[0]));
startVideoStream(cameras[0]);
});
// var constraints = { video: { facingMode: "environment" } };
// constraints på facingMode virker ikke, https://bugs.chromium.org/p/chromium/issues/detail?id=290161
// MediaStreamTrack.getSources() er deprecated, se
// https://developers.google.com/web/updates/2016/12/chrome-56-deprecations#remove_mediastreamtrackgetsources
function startVideoStream(camera) {
var constraints = { video: { deviceId: camera.deviceId } };
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
video.src = window.URL.createObjectURL(stream)
});
};
function handleOrientationChanged(event) {
pitch = -event.gamma;
roll = -event.beta;
if (pitch > 0) {
pitch = pitch - 90;
} else {
pitch = pitch + 90;
}
if (pitch > 0) {
if (roll > 0) {
roll = -roll + 180;
} else {
roll = -roll - 180;
}
}
}
function draw(timeStamp) {
requestAnimationFrame(draw);
if (!video.paused) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.font = "1.5rem sans-serif";
ctx.fillStyle = DRAW_COLOR;
ctx.strokeStyle = DRAW_COLOR;
ctx.textAlign = "right";
ctx.fillText(pitch.toFixed(1), canvas.width*0.95, canvas.height/2);
ctx.fillText(roll.toFixed(1), canvas.width/2, canvas.height*0.95);
var horizon_x = 0.25 * canvas.width * Math.cos(roll*TO_RADIANS);
var horizon_y = 0.25 * canvas.width * Math.sin(roll*TO_RADIANS);
var vPixPerDegree = canvas.height / VERTICAL_FOV;
var pitch_offset = pitch * vPixPerDegree;
ctx.beginPath();
ctx.moveTo(canvas.width/2 - horizon_x, canvas.height/2 - horizon_y + pitch_offset);
ctx.lineTo(canvas.width/2 + horizon_x, canvas.height/2 + horizon_y + pitch_offset);
ctx.stroke();
}
</script>
</body>
</html>