diff --git a/README.md b/README.md
index 4f69620..3be5ed4 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,8 @@ npm run dev
This builds the TypeScript player once, then serves `index.html` with Vite at a local URL.
+For headset testing, the page must be a secure context before the browser will expose immersive WebXR. A LAN URL such as `http://192.168.x.x:5173/` is useful for checking layout and media loading, but it will usually not show the headset's immersive VR prompt. Use an HTTPS URL with a trusted certificate, a trusted tunnel, or a deployed CDN/Pages URL for immersive testing.
+
## Development
The player source is TypeScript in `src/vr180player/`. Generated JavaScript files in `vr180player/` are ignored by git so CI/CD can build and publish them from source.
diff --git a/demo-xr-status.js b/demo-xr-status.js
new file mode 100644
index 0000000..742ffbc
--- /dev/null
+++ b/demo-xr-status.js
@@ -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);
+ }
+}
diff --git a/demo.css b/demo.css
index 4599998..502a21f 100644
--- a/demo.css
+++ b/demo.css
@@ -123,6 +123,29 @@ a {
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;
diff --git a/src/vr180player/bootstrap.ts b/src/vr180player/bootstrap.ts
index 273be9f..b07460a 100644
--- a/src/vr180player/bootstrap.ts
+++ b/src/vr180player/bootstrap.ts
@@ -82,6 +82,11 @@ function onDocumentReady(callback: () => void): void {
function completeXrSupportCheck(playButton: HTMLButtonElement, onComplete: () => void): void {
if (!navigator.xr) {
+ if (!window.isSecureContext) {
+ console.warn('VR_WEB_PLAYER_XR: Immersive WebXR requires a secure context. Serve the page over HTTPS, a trusted tunnel, or a deployed CDN URL to test in a headset.');
+ } else {
+ console.warn('VR_WEB_PLAYER_XR: navigator.xr is not available in this browser.');
+ }
markXrUnsupported(playButton);
onComplete();
return;
@@ -91,6 +96,7 @@ function completeXrSupportCheck(playButton: HTMLButtonElement, onComplete: () =>
if (supported) {
playButton.dataset.xrSupported = 'true';
} else {
+ console.warn('VR_WEB_PLAYER_XR: immersive-vr is not supported by this browser/device.');
markXrUnsupported(playButton);
}
diff --git a/test-3d-image.html b/test-3d-image.html
index 591fec7..23419b3 100644
--- a/test-3d-image.html
+++ b/test-3d-image.html
@@ -18,11 +18,14 @@
Back
+ Checking immersive WebXR support...
+
+
