demo: add m3u8 HLS video demo

* docs: add m3u8 hls demo * docs: replace demo thumb & descriptions
benmccann · Sep 7, 2021 · 5769f82 · 5769f82
1 parent 57b4980
commit 5769f82
Show file tree

Hide file tree

Showing 16 changed files with 185 additions and 3 deletions.
diff --git a/demo/_data/egjs.yml b/demo/_data/egjs.yml
@@ -112,6 +112,11 @@ subComponents:
           description: View partial panorama image by setting yawRange, pitchRange, fovRange
           link: examples/panoviewer/etc/partial_panorama.html
           sort: 15
+        - name: m3u8 HLS video
+          image: panoviewer/hls.png
+          description: Play .m3u8 HLS video with hls.js
+          link: examples/panoviewer/etc/hls.html
+          sort: 16
     - name: Cubemap
       id: cubemap
       image: cubemap.jpg

diff --git a/demo/common/img/panoviewer/hls.png b/demo/common/img/panoviewer/hls.png
diff --git a/demo/examples/img/m3u8/equi.m3u8 b/demo/examples/img/m3u8/equi.m3u8
@@ -0,0 +1,23 @@
+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:10.000000,
+equi0.ts
+#EXTINF:10.000000,
+equi1.ts
+#EXTINF:10.000000,
+equi2.ts
+#EXTINF:10.000000,
+equi3.ts
+#EXTINF:10.000000,
+equi4.ts
+#EXTINF:10.000000,
+equi5.ts
+#EXTINF:10.000000,
+equi6.ts
+#EXTINF:10.000000,
+equi7.ts
+#EXTINF:6.360000,
+equi8.ts
+#EXT-X-ENDLIST
diff --git a/demo/examples/img/m3u8/equi0.ts b/demo/examples/img/m3u8/equi0.ts
diff --git a/demo/examples/img/m3u8/equi1.ts b/demo/examples/img/m3u8/equi1.ts
diff --git a/demo/examples/img/m3u8/equi2.ts b/demo/examples/img/m3u8/equi2.ts
diff --git a/demo/examples/img/m3u8/equi3.ts b/demo/examples/img/m3u8/equi3.ts
diff --git a/demo/examples/img/m3u8/equi4.ts b/demo/examples/img/m3u8/equi4.ts
diff --git a/demo/examples/img/m3u8/equi5.ts b/demo/examples/img/m3u8/equi5.ts
diff --git a/demo/examples/img/m3u8/equi6.ts b/demo/examples/img/m3u8/equi6.ts
diff --git a/demo/examples/img/m3u8/equi7.ts b/demo/examples/img/m3u8/equi7.ts
diff --git a/demo/examples/img/m3u8/equi8.ts b/demo/examples/img/m3u8/equi8.ts
diff --git a/demo/examples/panoviewer/etc/hls.html b/demo/examples/panoviewer/etc/hls.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <title>eg.view360 examples HLS</title>
+    <link rel="stylesheet" type="text/css" href="../../../common/css/demo.css">
+    <link rel="stylesheet" type="text/css" href="../../../common/css/PanoControls.css">
+
+    <script src="../../../common/js/jquery-2.2.4.js"></script>
+    <script src="../../../common/js/codepen.js"></script>
+    <script src="../../../common/js/qrcode.js"></script>
+    <script src="../../../common/js/screenfull.min.js"></script>
+    <script src="../../../common/js/PieView.js"></script>
+    <script src="../../../release/latest/dist/view360.pkgd.js"></script>
+    <script src="../../../common/js/PanoControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.min.js"></script>
+    <script src="../../../common/js/initXR.js"></script>
+</head>
+
+<body>
+  <div class="qrcode"></div>
+  <header>
+    <div class="home">
+      <a href="../../../panoviewer.html">
+        <img class="egjs_logo" src="./../../../common/img/type_black.svg">
+        PanoViewer
+      </a>
+    </div>
+    <h1>m3u8 HLS video</h1>
+  </header>
+  <h2>Play m3u8 HLS 360 video with PanoViewer, with <a href="https://github.com/video-dev/hls.js/" target="_blank">hls.js</a></h2>
+  <div class="infos">
+    <p class="info">
+      <span class="head">projection</span>: <a href="https://naver.github.io/egjs-view360/release/latest/doc/eg.view360.PanoViewer.PROJECTION_TYPE.html" target="_blank"><span class="value">STEREOSCOPIC_EQUI</span></a>
+    </p>
+    <p class="info">
+      <span class="head">video</span>: <a href="../../img/m3u8/equi.m3u8" target="_blank"><span class="value">Visions - Burano in VR by Maja Wrońska (https://vimeo.com/244870931)</span></a>
+    </p>
+  </div>
+  <div class="viewer">
+    <video id="video" playsinline="playsinline" controls loop preload="auto" crossorigin="anonymous"></video>
+    <div class="container"></div>
+    <div class="play-container">
+      <button class="play"></button>
+    </div>
+  </div>
+  <div class="source">
+    <pre>
+var videoUrl = "../../img/m3u8/equi.m3u8";
+var PanoViewer = eg.view360.PanoViewer;
+var panoviewer = document.querySelector(".viewer");
+var container = document.querySelector(".viewer .container");
+var video = document.getElementById("video");
+var btn = document.getElementById("play");
+
+if (Hls.isSupported()) {
+  var hls = new Hls();
+  hls.loadSource(videoUrl);
+  hls.attachMedia(video);
+} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+  video.src = videoUrl;
+}
+
+video.addEventListener("play", () => {
+  var PanoViewer = eg.view360.PanoViewer;
+  var container = document.querySelector(".container");
+  var viewer = new PanoViewer(container, {
+    video: video,
+    projectionType: "equirectangular"
+  });
+
+  window.addEventListener("resize", function () {
+    panoViewer.updateViewportDimensions();
+  });
+
+  document.querySelector(".play-container").style.display = "none";
+
+  window.addEventListener("resize", function (e) {
+    viewer.updateViewportDimensions();
+  });
+
+  PanoControls.init(panoviewer, viewer);
+  PanoControls.showLoading();
+});
+
+document.querySelector(".play-container .play").addEventListener("click", function () {
+  video.play();
+});
+    </pre>
+  </div>
+</body>
+<script>
+  var videoUrl = "../../img/m3u8/equi.m3u8";
+  var PanoViewer = eg.view360.PanoViewer;
+  var panoviewer = document.querySelector(".viewer");
+  var container = document.querySelector(".viewer .container");
+  var video = document.getElementById("video");
+  var btn = document.getElementById("play");
+
+  if (Hls.isSupported()) {
+    var hls = new Hls();
+    hls.loadSource(videoUrl);
+    hls.attachMedia(video);
+  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = videoUrl;
+  }
+
+  video.addEventListener("play", () => {
+    var PanoViewer = eg.view360.PanoViewer;
+    var container = document.querySelector(".container");
+    var viewer = new PanoViewer(container, {
+      video: video,
+      projectionType: "equirectangular"
+    });
+
+    window.addEventListener("resize", function () {
+      panoViewer.updateViewportDimensions();
+    });
+
+    document.querySelector(".play-container").style.display = "none";
+
+    window.addEventListener("resize", function (e) {
+      viewer.updateViewportDimensions();
+    });
+
+    PanoControls.init(panoviewer, viewer);
+    PanoControls.showLoading();
+  });
+
+  document.querySelector(".play-container .play").addEventListener("click", function () {
+    video.play();
+  });
+</script>
+</html>
diff --git a/demo/panoviewer.md b/demo/panoviewer.md
@@ -4,4 +4,4 @@ subComponentName: PanoViewer
 demo: _includes/panoviewer/panoviewer_demo.html
 features: _includes/panoviewer/panoviewer_features.md
 started: _includes/panoviewer/panoviewer_started.md
----
+---
diff --git a/package.json b/package.json
@@ -7,9 +7,8 @@
 	"es2015": "dist/view360.esm.js",
 	"types": "declaration/index.d.ts",
 	"scripts": {
-		"start": "webpack-dev-server --open --host 0.0.0.0",
+		"start": "rollup -c ./rollup.config.dev.js -w",
 		"build": "rm -rf ./dist && rollup -c && npm run declaration && npm run printsizes",
-		"watch": "rollup -c -w",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
 		"test": "karma start",

diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -0,0 +1,17 @@
+import buildHelper from "@egjs/build-helper";
+
+const name = "eg.view360";
+const plugins = [];
+
+export default buildHelper([
+  {
+    name,
+    input: "./src/index.umd.ts",
+    output: "./dist/view360.pkgd.js",
+    format: "umd",
+    commonjs: true,
+    resolve: true,
+    plugins
+  }
+]);
+