<template>
|
<div class="viewer">
|
<div id="sdkContainer"></div>
|
</div>
|
</template>
|
|
<script>
|
// import { Config, PixelStreaming } from '@/assets/js/lib-pixelstreamingfrontend.esm';
|
|
export default {
|
name: "Viewer",
|
components: {},
|
data() {
|
return {}
|
},
|
mounted() {
|
window.sgworld = new SmartEarth.SGWorld(
|
"sdkContainer",
|
{
|
serve: mapUrl,
|
x: 115.95338101508028,
|
y: 39.726857627913596,
|
z: 447.44939899881655,
|
heading: -81.9000473022461,
|
pitch: -59.400020599365234,
|
roll: -6.248129218058927,
|
},
|
|
() => {}
|
)
|
// const config = new Config({
|
// initialSettings: {
|
// AutoPlayVideo: true,
|
// AutoConnect: true,
|
// ss: window.SignallingServerUrl,
|
// StartVideoMuted: true,
|
// WaitForStreamer: true,
|
// HoveringMouse: true,
|
// }
|
// });
|
|
// // Create a PixelStreaming instance and attach the video element to an existing parent div
|
// window.pixelStreaming = new PixelStreaming(config, { videoElementParent: document.getElementById("videoParentElement") });
|
|
// // If browser denies autoplay, show "Click to play" and register a click-to-play handler
|
// window.pixelStreaming.addEventListener("playStreamRejected", () => {
|
// const clickToPlay = document.getElementById("clickToPlayElement");
|
// clickToPlay.className = "visible";
|
// clickToPlay.onclick = () => {
|
// pixelStreaming.play();
|
// clickToPlay.className = "";
|
// clickToPlay.onclick = undefined;
|
// }
|
// })
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.viewer {
|
background-color: black;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
}
|
|
.videoParentElement video {
|
object-fit: fill;
|
}
|
#sdkContainer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
