A Pen by Jorge Luís on CodePen.
Created
August 1, 2022 17:59
-
-
Save sejidjorge/b50730e73fd99c683943658cba9650fe 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> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hls palyer + babylon js