Created
August 1, 2022 17:57
-
-
Save sejidjorge/0979fc536fe2659bd60916841f2a418b to your computer and use it in GitHub Desktop.
A 360° video viewer using Babylon.js + hls.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.0.3/babylon.js"></script> | |
| <style> | |
| html, | |
| body { | |
| overflow: hidden; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #renderCanvas { | |
| width: 100%; | |
| height: 100%; | |
| touch-action: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="renderCanvas"></canvas> | |
| <video id="video"></video> | |
| <script> | |
| const canvas = document.getElementById('renderCanvas'); | |
| const engine = new BABYLON.Engine(canvas, true); | |
| const createScene = function (videoElem) { | |
| const scene = new BABYLON.Scene(engine); | |
| // https://babylonjsguide.github.io/basics/Cameras#arc-rotate-camera | |
| const camera = new BABYLON.ArcRotateCamera('MainCamera', -1, 0, 1, new BABYLON.Vector3(0, 0, 0), scene); | |
| camera.setTarget(BABYLON.Vector3.Zero()); | |
| camera.attachControl(canvas, true); | |
| const light = new BABYLON.HemisphericLight('Light', new BABYLON.Vector3(0, 0, 0), scene); | |
| const videoDome = new BABYLON.VideoDome( | |
| 'VideoDome', | |
| videoElem, | |
| {}, | |
| scene | |
| ); | |
| return scene; | |
| }; | |
| var videoElem = document.getElementById('video'); | |
| const scene = createScene(videoElem); | |
| const playPauseVideoDome = () => { | |
| const videoDome = scene.getNodeByName('VideoDome'); | |
| const video = videoDome.videoTexture.video; | |
| video.paused ? video.play() : video.pause(); | |
| } | |
| scene.onKeyboardObservable.add(e => { | |
| switch (e.event.type) { | |
| case 'keydown': | |
| if (e.event.key === ' ') { | |
| playPauseVideoDome(); | |
| } | |
| break; | |
| } | |
| }) | |
| const vrHelper = scene.createDefaultVRExperience(); | |
| vrHelper.enableInteractions(); | |
| vrHelper.onControllerMeshLoaded.add((webVRController) => { | |
| var controllerMesh = webVRController.mesh; | |
| webVRController.onTriggerStateChangedObservable.add(() => { | |
| playPauseVideoDome(); | |
| }); | |
| }); | |
| engine.runRenderLoop(() => { | |
| scene.render(); | |
| }); | |
| window.addEventListener('resize', function () { | |
| engine.resize(); | |
| }); | |
| const playVideoDome = () => { | |
| const videoDome = scene.getNodeByName('VideoDome') | |
| videoDome.videoTexture.video.play() | |
| } | |
| if (Hls.isSupported()) { | |
| const hls = new Hls({ autoStartLoad: false }); | |
| hls.loadSource('https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8'); | |
| hls.attachMedia(video); | |
| hls.on(Hls.Events.MANIFEST_PARSED, playVideoDome); | |
| hls.startLoad(); | |
| } else if (videoElem.canPlayType('application/vnd.apple.mpegurl')) { | |
| videoElem.src = 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8'; | |
| video.addEventListener('loadedmetadata', playVideoDome) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment