Currently the Matterport SDK works in regular browsers like this:
<iframe id="showcase" width="740" height="480" src="/bundle/showcase.html?m=[MODEL_SID]" frameborder=”0” allowfullscreen allow="vr"'></iframe>
const showcase = document.getElementById('showcase');
showcase.addEventListener('load', async function() {
let sdk;
try {
sdk = await showcase.contentWindow.MP_SDK.connect(showcase, '{YOUR SDK KEY}');
}
catch(e) {
console.error(e);
return;
}
console.log('Hello Bundle SDK', sdk);
});
https://matterport.github.io/showcase-sdk/sdkbundle_home.html
However this doesn't seem to work in VR browsers such as the Oculus browser within Quest 2.
Expected results:
- Open page and see model in embedded iframe
- Navigate inside model normally and all SDK functions working
Actual results:
- Open page and see model in embedded iframe (but with large play button overlay)
- On click play overlay page breaks out of iframe into new page and displays in 360 mode
- SDK functions no longer work since URL is no longer our site
My question is, how can I use the Matterport SDK within VR browsers or prevent it from breaking out of iframe?
You can try embedding this link inside an iframe and then opening inside a VR browser to see this happening: