GHzGlass
/
wxGameyuexiu


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!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>Unity WebGL Player | WXGame</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('bgbt.png'); /* 替换为您的图片路径 */
            background-size: cover; /* 背景图片覆盖整个按钮 */
            background-color: transparent;
            border: none;
            padding: 40px 150px; /* 内边距 */
            position: relative; top: 210px; left: -30px;
        }
 
    </style>
</head>
<body>
    <!--IMAGETARGETS-->
		<imagetarget id='bear' src='targets/bear.png'></imagetarget>
		<imagetarget id='bfly' src='targets/bfly.png'></imagetarget>
		<imagetarget id='flower' src='targets/flower.png'></imagetarget>
		<imagetarget id='lady' src='targets/lady.png'></imagetarget>
		<imagetarget id='reel' src='targets/reel.png'></imagetarget>
		<imagetarget id='rmn' src='targets/rmn.png'></imagetarget>
		<imagetarget id='kkk' src='targets/kkk.png'></imagetarget>

    <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>
        <button  class="image-button" id="startARButton" onclick="StartAR()" style="display:none">      </button>

        <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>-->
    </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>
    </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>
    <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/wxgame.loader.js"></script>
    <script>
            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.querySelector("#unity-loading-bar2");
        //    var progressBarFull = document.querySelector("#unity-progress-bar-full2");
            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/wxgame.data.unityweb",
                    frameworkUrl: "Build/wxgame.framework.js.unityweb",
                    codeUrl: "Build/wxgame.wasm.unityweb",
                    streamingAssetsUrl: "StreamingAssets",
                    companyName: "DefaultCompany",
                    productName: "WXGame",
                    productVersion: "0.1",
                    //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 + "%";
                    }
                ).then((unityInstance) => {
                    window.unityInstance = unityInstance;
                    RequestWebcam();
                  // loadingBar.style.display = "none";
                });


            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("Failed to start the experience. Camera permission was denied");
                    window.requestingForPermissions = false;
                }           
            }
            async function StartWebcam(){
                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("Failed to start the experience. " + error);
            });
        }
        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>