From: paul <paul@plutz.net>
Date: Thu, 17 May 2018 01:29:58 +0000 (+0000)
Subject: viewer for stereoscopic VR video
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=46b3b62f20f07b224aaf839cd396bb21e56c49ac;p=serve0

viewer for stereoscopic VR video

svn path=/trunk/; revision=198
---

diff --git a/pages/stereoview.sh b/pages/stereoview.sh
new file mode 100755
index 0000000..3f7a986
--- /dev/null
+++ b/pages/stereoview.sh
@@ -0,0 +1,30 @@
+#!/bin/zsh
+
+# Copyright 2018 Paul Hänsch
+#
+# This file is part of Serve0.
+# 
+# Serve0 is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+# 
+# Serve0 is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+# 
+# You should have received a copy of the GNU Affero General Public License
+# along with Serve0.  If not, see <http://www.gnu.org/licenses/>. 
+
+. $_EXEC/pages/common.sh
+
+info="${_GET[i]}"
+render="$(validate "${_GET[r]}" '(180|360)' 360)"
+location="$(invalidate "${_GET[l]}" '(.*/)?\.\.(/.*)?|' /)"
+directory="${location%/*}"
+
+TITLE="$info"
+
+[ -n "$info" ] && video="videos/$info" \
+               || video="${location#/}"
diff --git a/templates/stereoview.html.sh b/templates/stereoview.html.sh
new file mode 100755
index 0000000..c618ef6
--- /dev/null
+++ b/templates/stereoview.html.sh
@@ -0,0 +1,94 @@
+# Copyright 2018 Paul Hänsch
+#
+# This file is part of Serve0
+# 
+# Serve0 is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+# 
+# Serve0 is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+# 
+# You should have received a copy of the GNU Affero General Public License
+# along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
+
+cat <<EOF
+  <canvas id="lv" width="400" height="480" style="width: 50%; margin: 0;">
+  </canvas><canvas id="rv" width="400" height="480" style="width: 50%; margin: 0;"></canvas>
+
+  <video id="video" onclick="videoPlay();" style="position: absolute; top: 0;">
+    <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
+  </video>
+
+  <script type="text/javascript">
+  var render = "${render}"
+  var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
+  var video, scale, lv, rv, debug;
+  var w, h, scale;
+
+  function draw() {
+    ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
+    tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
+    v = tz / 9.81 / 2;
+    r = ty / 9.81 * -90;
+    ox = ox + ty * 2;
+
+    if ( render = "180" ) {
+      if      (ox > w / 8)   { ox = w / 8; }
+      else if ( ox < -w / 8) { ox = -w / 8; }
+      sy = ( v * h + h / 4) |0;
+      lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
+      rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    } else {
+      sx = (w / 8 * 3 + ox) % (w) |0;
+      lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
+      rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+      if (sx < 0) {
+        lc.drawImage(video, sx + w, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
+        rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+      } else if ( sx + w / 4 > w) {
+        lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
+        rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+      }
+    }
+
+    lv.setAttribute("style", "transform: rotate("+r+"deg);")
+    rv.setAttribute("style", "transform: rotate("+r+"deg);")
+
+    requestAnimationFrame(draw);
+  };
+  function videoPlay(){
+    w = video.videoWidth; h = video.videoHeight;
+    scale = lv.width / (w / 4); 
+    video.play();
+    video.setAttribute("style", "display: none;");
+    draw();
+  };
+
+  video = document.getElementById("video");
+  lv = document.getElementById("lv");
+  rv = document.getElementById("rv");
+  debug = document.getElementById("debug");
+
+  lv.setAttribute("width", "" + lv.offsetWidth);
+  rv.setAttribute("width", "" + rv.offsetWidth);
+  lv.setAttribute("height", "" + lv.offsetHeight);
+  rv.setAttribute("height", "" + rv.offsetHeight);
+
+  lc = lv.getContext("2d");
+  rc = rv.getContext("2d");
+
+  window.addEventListener("devicemotion", function(event) {
+    // x[cnt] = event.accelerationIncludingGravity.x;
+    y[cnt] = event.accelerationIncludingGravity.y;
+    z[cnt] = event.accelerationIncludingGravity.z;
+    cnt = (cnt + 1) % 6;
+  }, true);
+
+  </script>
+EOF
+
+# vi:set filetype=html:
diff --git a/templates/view.html.sh b/templates/view.html.sh
index b2c48db..1462421 100755
--- a/templates/view.html.sh
+++ b/templates/view.html.sh
@@ -47,6 +47,8 @@ cat <<EOF
   <h1>$(htmlsafe "$info")</h1>
 
   <a href="$(urlsafe "$video")">Download</a>
+  <a href="/?p=stereoview&amp;r=180&amp;i=$(urlsafe "$info")">View 180º Steroscopic</a>
+  <a href="/?p=stereoview&amp;r=360&amp;i=$(urlsafe "$info")">View 360º Steroscopic</a>
   <video autoplay controls>
     <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
   </video>