forked from EXT/VR180-Web-Player
This commit is contained in:
Aiden
31
test-pages/demo-xr-status.js
Normal file
31
test-pages/demo-xr-status.js
Normal file
@@ -0,0 +1,31 @@
|
||||
const statusElement = document.querySelector('[data-demo-xr-status]');
|
||||
|
||||
if (statusElement) {
|
||||
updateXrStatus(statusElement);
|
||||
}
|
||||
|
||||
async function updateXrStatus(element) {
|
||||
if (!window.isSecureContext) {
|
||||
element.textContent = 'Immersive WebXR is blocked on this origin. Use HTTPS, a trusted tunnel, or a deployed CDN URL for headset testing.';
|
||||
element.dataset.state = 'blocked';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!navigator.xr) {
|
||||
element.textContent = 'Immersive WebXR is unavailable in this browser.';
|
||||
element.dataset.state = 'blocked';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const supported = await navigator.xr.isSessionSupported('immersive-vr');
|
||||
element.textContent = supported
|
||||
? 'Immersive WebXR is available. Use the player button to enter VR.'
|
||||
: 'This browser reports that immersive-vr is not supported.';
|
||||
element.dataset.state = supported ? 'ready' : 'blocked';
|
||||
} catch (error) {
|
||||
element.textContent = 'Unable to check immersive-vr support. See the browser console for details.';
|
||||
element.dataset.state = 'blocked';
|
||||
console.error('DEMO_XR_STATUS_ERROR:', error);
|
||||
}
|
||||
}
|
||||
162
test-pages/demo.css
Normal file
162
test-pages/demo.css
Normal file
@@ -0,0 +1,162 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #151515;
|
||||
background: #f4f4f2;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
min-height: 100vh;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.demo-shell {
|
||||
width: min(100%, 1040px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.demo-brand {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.demo-kicker {
|
||||
margin: 8px 0 0;
|
||||
max-width: 700px;
|
||||
color: #555;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #c7c7c0;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 150px;
|
||||
padding: 18px;
|
||||
border: 1px solid #d5d5cf;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.demo-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #83837a;
|
||||
}
|
||||
|
||||
.demo-card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.demo-card p,
|
||||
.demo-meta {
|
||||
margin: 0;
|
||||
color: #5c5c55;
|
||||
}
|
||||
|
||||
.demo-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
color: #66665f;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.demo-player {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.demo-player-frame {
|
||||
width: min(100%, 960px);
|
||||
}
|
||||
|
||||
.demo-note {
|
||||
max-width: 760px;
|
||||
margin: 18px 0 0;
|
||||
color: #606058;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.demo-xr-status {
|
||||
max-width: 760px;
|
||||
margin: 0 0 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d5d5cf;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #4f4f48;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.demo-xr-status[data-state="blocked"] {
|
||||
border-color: #d7a13a;
|
||||
background: #fff8e8;
|
||||
color: #5f4515;
|
||||
}
|
||||
|
||||
.demo-xr-status[data-state="ready"] {
|
||||
border-color: #7eb07b;
|
||||
background: #eff8ef;
|
||||
color: #275425;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.demo-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.demo-topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-brand {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
46
test-pages/index.html
Normal file
46
test-pages/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR Web Player Test Pages</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR Web Player Tests</h1>
|
||||
<p class="demo-kicker">Open a focused page for each media and projection combination.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="demo-grid" aria-label="Player test pages">
|
||||
<a class="demo-card" href="./test-3d-image.html">
|
||||
<h2>3D Image</h2>
|
||||
<p>Flat SBS image on a rectangular plane.</p>
|
||||
<span class="demo-meta">image / plane</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-vr180-3d-image.html">
|
||||
<h2>VR180 3D Image</h2>
|
||||
<p>SBS image on the VR180 hemisphere.</p>
|
||||
<span class="demo-meta">image / vr180</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-3d-video.html">
|
||||
<h2>3D Video</h2>
|
||||
<p>Flat SBS video on a rectangular plane.</p>
|
||||
<span class="demo-meta">video / plane</span>
|
||||
</a>
|
||||
<a class="demo-card" href="./test-vr180-3d-video.html">
|
||||
<h2>VR180 3D Video</h2>
|
||||
<p>SBS video on the VR180 hemisphere.</p>
|
||||
<span class="demo-meta">video / vr180</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<p class="demo-note">Image tests use files in <code>../media/</code>. Video tests expect <code>../media/sbs-video.mp4</code>.</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
31
test-pages/test-3d-image.html
Normal file
31
test-pages/test-3d-image.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>3D Image Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="../vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">3D Image</h1>
|
||||
<p class="demo-kicker">Projection: plane. Media: side-by-side image.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<p class="demo-xr-status" data-demo-xr-status>Checking immersive WebXR support...</p>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="plane">
|
||||
<img src="../media/169_3d_test.png" alt="Demo SBS image" title="3D Image Plane" crossorigin="anonymous">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./demo-xr-status.js"></script>
|
||||
<script type="module" src="../vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
33
test-pages/test-3d-video.html
Normal file
33
test-pages/test-3d-video.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>3D Video Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="../vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">3D Video</h1>
|
||||
<p class="demo-kicker">Projection: plane. Media: side-by-side video.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<p class="demo-xr-status" data-demo-xr-status>Checking immersive WebXR support...</p>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="plane">
|
||||
<video poster="../poster.jpg" title="3D Video Plane" crossorigin="anonymous" playsinline preload="metadata">
|
||||
<source src="../media/sbs-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./demo-xr-status.js"></script>
|
||||
<script type="module" src="../vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
test-pages/test-vr180-3d-image.html
Normal file
31
test-pages/test-vr180-3d-image.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR180 3D Image Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="../vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR180 3D Image</h1>
|
||||
<p class="demo-kicker">Projection: VR180. Media: side-by-side image.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<p class="demo-xr-status" data-demo-xr-status>Checking immersive WebXR support...</p>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="vr180">
|
||||
<img src="../media/VR180_SBS_Test.png" alt="Demo VR180 SBS image" title="VR180 3D Image" crossorigin="anonymous">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./demo-xr-status.js"></script>
|
||||
<script type="module" src="../vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
33
test-pages/test-vr180-3d-video.html
Normal file
33
test-pages/test-vr180-3d-video.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>VR180 3D Video Test</title>
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="../vr180player/vr180-player.css" data-vr-web-player-stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<main class="demo-page">
|
||||
<div class="demo-shell demo-player">
|
||||
<header class="demo-topbar">
|
||||
<div>
|
||||
<h1 class="demo-brand">VR180 3D Video</h1>
|
||||
<p class="demo-kicker">Projection: VR180. Media: side-by-side video.</p>
|
||||
</div>
|
||||
<a class="demo-back" href="./index.html">Back</a>
|
||||
</header>
|
||||
|
||||
<p class="demo-xr-status" data-demo-xr-status>Checking immersive WebXR support...</p>
|
||||
|
||||
<div class="demo-player-frame" data-vr-web-player data-projection="vr180">
|
||||
<video poster="../poster.jpg" title="VR180 3D Video" crossorigin="anonymous" playsinline preload="metadata">
|
||||
<source src="../media/sbs-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./demo-xr-status.js"></script>
|
||||
<script type="module" src="../vr180player/vr180-player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user