GHzGlass
/
wxGameyuexiu


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content='width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=yes'>
    <title>{{{ PRODUCT_NAME }}}</title>
    <link rel="stylesheet" href="TemplateData/style.css">

    <style>
       html{
            height: -webkit-fill-available;
            position: fixed; /* 或者 absolute，取决于你的布局需求 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('StreamingAssets/ui/bg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            min-height: -webkit-fill-available;
            width: 100vw;
            overflow: hidden;
        }
        .ctaDiv {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 99;
        } .image-button {
            background-image: url('StreamingAssets/ui/initbt.png'); /* 替换为您的图片路径 */
            background-size: cover; /* 背景图片覆盖整个按钮 */
            background-color: transparent;
            border: none;
            padding: 30px 130px; /* 内边距 */
            position: relative; top: 210px; left: -30px;
        }
 .loading {
   position: relative; 
   top: 540px;
    width: 30px;
    height: 30px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #B0BBB6; 
    border-radius: 50%;
    animation: spin 2s linear infinite;
    margin: 100px auto;
  }.progressBar {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
.progress {
  width: 100%;
  height:40px;
}
       
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
    </style>
</head>
<body>
    <!--IMAGETARGETS-->

    <video id="webcam-video" muted autoplay playsinline style="width:1px;position:absolute"></video>

    <!-- <video id="webcam-video" muted autoplay playsinline style="width:100%; height:100%; object-fit:cover; position:absolute"></video> -->
    <canvas id="video-canvas" style="width:100%; height:100%; object-fit:cover; position:absolute">


    </canvas>
    <div id="startARDiv" class="ctaDiv">
        <!--   <select id="chooseCamSel" style="display: block;" onchange="SelectCam()"></select>
     <p style="text-align: center; width:60vw;">This augmented reality experience requires access to your device's camera</p>

        <div id="unity-loading-bar2" style="display:block">
            <div id="unity-progress-bar-empty2"  style="display:block; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('TemplateData/progress-bar-empty-light.png') no-repeat center ">
                <div id="unity-progress-bar-full2" style="display:block;position: relative; top: 210px;width: 0%; height: 18px; margin-top: 10px; background: url('TemplateData/progress-bar-full-light.png') no-repeat center "></div>
            </div>
        </div>-->
        <button  class="image-button" id="startARButton" onclick="StartAR()" style="display:none">      </button>
    </div>
    <div id="screenshotDiv" style="display: none;" class="ctaDiv">
        <div style="position:relative; background-color:white; padding:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);">
            <img id="screenshotImg" src="" alt="screenshot" style="width:80vw; height:80vh">
            <button onclick="document.getElementById('screenshotDiv').style.display = 'none';" style="position:absolute; transform:translateY(-100%); right:0; top:0">Close</button>
        </div>
    </div>
    <div id="confirmUrlDiv" style="display: none;" class="ctaDiv">
        <div style="position:relative; background-color:white; padding:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25); width: 80vw; display:flex; flex-direction: column; align-items: center;">
            <p id="confirmUrlText" style="text-align: center; width:80%; overflow: hidden; text-overflow: ellipsis;">Are you sure you want to visit url.com?</p>
            <div>
                <button onclick="window.open(newUrlString, '_blank').focus(); document.getElementById('confirmUrlDiv').style.display = 'none'">VISIT SITE</button>
                <button onclick="document.getElementById('confirmUrlDiv').style.display = 'none'">GO BACK</button>
            </div>
        </div>
    </div>
    <div id="errorDiv" class="ctaDiv" style="display: none; background:#aaa">
        <p id="errorText" style="text-align: center; width:60vw; color:white"></p>
            <button onclick="refreshPage()">刷新页面</button>
    </div>
    <div id="unity-container" class="unity-mobile">
        <canvas id="unity-canvas" style="width: 100%; height: 100%; background: #0000; z-index: -99">


        </canvas>
        <canvas id="video-canvas">


        </canvas>
 
    </div>

<div class="progressBar" id="progressBar" style="display:none;">
    <id id="myProgress2" style="text-align: center; color: #2F4F4F;">0</id>
    <progress class="progress" id="myProgress" value="0" max="100"></progress>
</div>
 <!--
    <div id="startmusic" class="music1">
        <button onclick="playMusic()">播放背景音乐</button>
        <button onclick="stopMusic()">停止背景音乐</button>
    </div>-->
    <div class="loading" id="loadingbar" style="display:none;"></div>

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="arcamera.js" type="text/javascript"></script>
    <script src="itracker.js" type="text/javascript"></script>
    <script src="wtracker.js" type="text/javascript"></script>
    <script src="Build/{{{ LOADER_FILENAME }}}"></script>
    <script>    // JavaScript用于更新进度条的值
        function updateProgress(value) {
            var progressBar = document.getElementById("myProgress");
            
            progressBar.value = value;
            var progressBar2 = document.getElementById("myProgress2");
        progressBar2.textContent = value + '%';
        }
        function changeBackground() {
        var body = document.querySelector("html");
        body.style.backgroundImage = "url('StreamingAssets/ui/black.jpg')";
    }
            function refreshPage() {
                location.reload();
            }
            var initialize = async() =>{
                var unityCanvas = document.querySelector("#unity-canvas");
                var videoCanvas = document.querySelector("#video-canvas");
                window.arCamera = new ARCamera(unityCanvas, videoCanvas);
 window.wTracker = new WorldTracker(arCamera);
            try{
                await wTracker.initialize("./opencv.js");
                console.log("World tracker initialized!");   
            }
            catch (error) {
                console.error("Failed to initialize world tracker. Are you missing opencv.js?", error);
                ShowError("Failed to initialize the World Tracker.\n" + error);
                return;
            }

                window.iTracker = new ImageTracker(arCamera);
                try{
                    await window.iTracker.initialize();
                    console.log("ImageTracker initialized!");
                }
                catch{
                    console.error("Failed to initialize ImageTracker. Are you missing opencv.js? " + error);
                    ShowError("Failed to initialize the experience.");
                    return;
                }
                
                await LoadWebcams();
           //     StartAR();
                document.getElementById("startARButton").style.display = "block";
            }
            initialize();

            var container = document.querySelector("#unity-container");
            var canvas = document.querySelector("#unity-canvas");
            var loadingBar = document.getElementById("progressBar");
            var progressBarFull = document.querySelector("#unity-progress-bar-full");
            function StartAR() {
                canvas.style.width = window.innerWidth + "px";
                canvas.style.height = window.innerHeight + "px";
                
                document.getElementById("startARDiv").style.display = "none";
                createUnityInstance(document.querySelector("#unity-canvas"), {
                    dataUrl: "Build/{{{ DATA_FILENAME }}}",
                    frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
                #if USE_WASM
                    codeUrl: "Build/{{{ CODE_FILENAME }}}",
                #endif
                #if MEMORY_FILENAME
                    memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
                #endif
                #if SYMBOLS_FILENAME
                    symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
                #endif
                    streamingAssetsUrl: "StreamingAssets",
                    companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
                    productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
                    productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
                    //webglContextAttributes: { "preserveDrawingBuffer": true },
                    // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
                    // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
                    },
                    (progress) => {
                      //  progressBarFull.style.width = 100 * progress + "%";
       updateProgress(100 * progress);
                    }
                ).then((unityInstance) => {
                    window.unityInstance = unityInstance;
                   loadingBar.style.display = "none";
                   changeBackground();
                }).catch((message) => {
       // alert("加载出错重新加载"+message); 
                    ShowError("网络异常请重新加载");
      });
            StartMotionSensors();
            
            StartGPS();
                loadingBar.style.display = "block";
            }
             //Set Facing Mode here ('environment', 'user', '')
		window.unityFacingMode = "environment"
            window.WEBCAM_SETTINGS = {
                video: {
                    facingMode: unityFacingMode,
                },
                audio: false
            };
            window.requestingForPermissions = false;
            async function RequestWebcam(){
                window.requestingForPermissions = true;
                try{
                    window.webcamStream = await navigator.mediaDevices.getUserMedia(window.WEBCAM_SETTINGS);
                    console.log("Webcam access granted");
                    requestingForPermissions = false;
                }
                catch (err) {
                    //user denied camera permission - show error panel
                    console.error("getUserMedia error - " , err);
                    ShowError("允许权限并刷新页面后继续导览");
                    window.requestingForPermissions = false;
                }           
            }
            function ShowWx(urls)
            {
                console.log("Waiting for permissions..."+urls);
                wx.miniProgram.navigateTo({url: urls});
            }
            async function StartWebcam(){
                await RequestWebcam();
                console.log("StartWebcam")
                while (window.requestingForPermissions) {
                    // Wait until requestingForPermissions becomes true.
                    console.log("Waiting for permissions...");
                    await new Promise(resolve => setTimeout(resolve, 100)); // Adjust the delay time as needed.
                }
                console.log("Got Permissions");
                if(window.webcamStream)
                {
                    const video = document.querySelector("#webcam-video");
                    video.srcObject = webcamStream;
                    try {
                        await arCamera.startWebcam(video);
                        console.log("Webcam started successfully");
                        window.unityInstance.SendMessage('ARCamera', 'OnStartWebcamSuccess');
                    }
                    catch(err){
                        console.error("Webcam failed to start - ", err);
                        window.unityInstance.SendMessage('ARCamera', 'OnStartWebcamFail');
                    }   
                }
                else{
                    console.error("Webcam failed to start - permission not yet granted");
                    window.unityInstance.SendMessage('ARCamera', 'OnStartWebcamFail');
                }  
            }
            async function LoadWebcams(){
                let camDevices = [];
                // let backCams = [];
                let devices = await navigator.mediaDevices.enumerateDevices();
                var ctr = 0;
                devices.forEach(mediaDevice => {
                    if (mediaDevice.kind === 'videoinput') {
                        if(window.unityFacingMode == 'environment' && !mediaDevice.label.includes('facing front')){
                            //back cam only
                            camDevices.push(mediaDevice);
                        }
                        else if(window.unityFacingMode == 'user' && mediaDevice.label.includes('facing front')){
                            //front cam only
                            camDevices.push(mediaDevice);
                        }
                        else{
                            //back and front
                            camDevices.push(mediaDevice);
                        }   
                        
                        ctr++;
                    }
                });
             //   var select = document.getElementById("chooseCamSel");
          //      select.style.display = "block";
                var count = 0;
                //reverse array because some Android phones can't distinguish front and back cams at first load
                //and when this happens, most of the time, front cam goes first and back cam goes last
                camDevices = camDevices.reverse();
                camDevices.forEach(mediaDevice => {
                    const option = document.createElement('option');
                    option.value = mediaDevice.deviceId;
                    let label = `Camera ${count}`;
                    if (mediaDevice.label) {
                        label = mediaDevice.label
                    }
                    const textNode = document.createTextNode(label);
                    option.appendChild(textNode);
                   // select.appendChild(option);
                    count++;
                });
              //  iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
            }
            function SelectCam(){
                var select = document.getElementById("chooseCamSel");
                window.deviceId = select.value;
                window.WEBCAM_SETTINGS.video['deviceId'] = deviceId;
                //console.log(window.WEBCAM_SETTINGS);
             //   iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
            }
            async function FlipCam(){
                arCamera.stopWebcam();
                window.WEBCAM_SETTINGS.video.deviceId = '';
                if(window.WEBCAM_SETTINGS.video.facingMode == 'user'){
                    window.WEBCAM_SETTINGS.video.facingMode = 'environment';
                    arCamera.setFlipped(false);
                }
                else{
                    window.WEBCAM_SETTINGS.video.facingMode = 'user';
                    arCamera.setFlipped(true);
                }
                window.webcamStream = await navigator.mediaDevices.getUserMedia(window.WEBCAM_SETTINGS);
                const video = document.querySelector("#webcam-video");
                video.srcObject = webcamStream;
                await arCamera.startWebcam(video);
            }
            function ShowError(error){
                document.getElementById("errorDiv").style.display = "flex";
                document.getElementById("errorText").innerHTML = error;
            }
            function ShowScreenshot(dataUrl){
                document.getElementById("screenshotDiv").style.display = "flex";
                document.getElementById("screenshotImg").src = dataUrl;
                document.getElementById("screenshotImg").style.width = "80vw";
                document.getElementById("screenshotImg").style.height = 80 / window.innerWidth * window.innerHeight + "vw";
            }
            function ShowConfirmUrl(url){
                document.getElementById("confirmUrlDiv").style.display = "flex";
                window.newUrlString = url;
                document.getElementById("confirmUrlText").innerText = "Are you sure you want to visit " + url;                
            }
            window.ITRACKER_GLOBALS = {
                //place global settings here
                INTERNAL_SMOOTHFACTOR_POS: .075,
            }
             function StartMotionSensors(){
            window.wTracker.startAngles()
            .then(()=>{
                console.log("Motion sensors started");
            })
            .catch(error=>{
                console.error("Failed to start motion sensors - " + error);
                ShowError("允许权限并刷新页面后继续导览");
            });
        }
        function StartGPS(){            
            window.wTracker.startGPS()
            .then((pos)=>{
                console.log("GPS started", pos);
            })
            .catch(error=>{
                console.error("Failed to start GPS - " + error);
                //ShowError("Failed to start GPS " + error);
            });
        }
            
    </script>
</body>
</html>