|
@@ -3,12 +3,21 @@
|
|
<head>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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'>
|
|
<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 | {{{ PRODUCT_NAME }}}</title>
|
|
+ <title>{{{ PRODUCT_NAME }}}</title>
|
|
<link rel="stylesheet" href="TemplateData/style.css">
|
|
<link rel="stylesheet" href="TemplateData/style.css">
|
|
|
|
|
|
<style>
|
|
<style>
|
|
- html{
|
|
+ html{
|
|
height: -webkit-fill-available;
|
|
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 {
|
|
body {
|
|
margin: 0;
|
|
margin: 0;
|
|
@@ -28,21 +37,62 @@
|
|
right: 0;
|
|
right: 0;
|
|
top: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
- background: #fffa;
|
|
|
|
z-index: 99;
|
|
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>
|
|
</style>
|
|
</head>
|
|
</head>
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<video id="webcam-video" muted autoplay playsinline style="width:1px;position:absolute"></video>
|
|
<video id="webcam-video" muted autoplay playsinline style="width:1px;position:absolute"></video>
|
|
|
|
+
|
|
|
|
|
|
- <canvas id="video-canvas" style="width:100%; height:100%; object-fit:cover; position:absolute"></canvas>
|
|
+ <canvas id="video-canvas" style="width:100%; height:100%; object-fit:cover; position:absolute">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </canvas>
|
|
<div id="startARDiv" class="ctaDiv">
|
|
<div id="startARDiv" class="ctaDiv">
|
|
- <select id="chooseCamSel" style="display: none;" onchange="SelectCam()"></select>
|
|
+
|
|
- <p style="text-align: center; width:60vw;">This augmented reality experience requires access to your device's camera</p>
|
|
+ <p style="text-align: center; width:60vw;">This augmented reality experience requires access to your device's camera</p>
|
|
- <button id="startARButton" onclick="StartAR()" style="display:none">ALLOW ACCESS</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>-->
|
|
|
|
+ <button class="image-button" id="startARButton" onclick="StartAR()" style="display:none"> </button>
|
|
</div>
|
|
</div>
|
|
<div id="screenshotDiv" style="display: none;" class="ctaDiv">
|
|
<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);">
|
|
<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);">
|
|
@@ -61,25 +111,65 @@
|
|
</div>
|
|
</div>
|
|
<div id="errorDiv" class="ctaDiv" style="display: none; background:#aaa">
|
|
<div id="errorDiv" class="ctaDiv" style="display: none; background:#aaa">
|
|
<p id="errorText" style="text-align: center; width:60vw; color:white"></p>
|
|
<p id="errorText" style="text-align: center; width:60vw; color:white"></p>
|
|
|
|
+ <button onclick="refreshPage()">刷新页面</button>
|
|
</div>
|
|
</div>
|
|
<div id="unity-container" class="unity-mobile">
|
|
<div id="unity-container" class="unity-mobile">
|
|
- <canvas id="unity-canvas" style="width: 100%; height: 100%; background: #0000; z-index: -99"></canvas>
|
|
+ <canvas id="unity-canvas" style="width: 100%; height: 100%; background: #0000; z-index: -99">
|
|
- <div id="unity-loading-bar">
|
|
+
|
|
- <div id="unity-logo"></div>
|
|
+
|
|
- <div id="unity-progress-bar-empty">
|
|
+ </canvas>
|
|
- <div id="unity-progress-bar-full"></div>
|
|
+ <canvas id="video-canvas">
|
|
- </div>
|
|
+
|
|
- </div>
|
|
+
|
|
- <canvas id="video-canvas"></canvas>
|
|
+ </canvas>
|
|
|
|
+
|
|
</div>
|
|
</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 src="arcamera.js" type="text/javascript"></script>
|
|
<script src="arcamera.js" type="text/javascript"></script>
|
|
<script src="itracker.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 src="Build/{{{ LOADER_FILENAME }}}"></script>
|
|
- <script>
|
|
+ <script>
|
|
|
|
+ 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 initialize = async() =>{
|
|
var unityCanvas = document.querySelector("#unity-canvas");
|
|
var unityCanvas = document.querySelector("#unity-canvas");
|
|
var videoCanvas = document.querySelector("#video-canvas");
|
|
var videoCanvas = document.querySelector("#video-canvas");
|
|
window.arCamera = new ARCamera(unityCanvas, videoCanvas);
|
|
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);
|
|
window.iTracker = new ImageTracker(arCamera);
|
|
try{
|
|
try{
|
|
await window.iTracker.initialize();
|
|
await window.iTracker.initialize();
|
|
@@ -92,14 +182,14 @@
|
|
}
|
|
}
|
|
|
|
|
|
await LoadWebcams();
|
|
await LoadWebcams();
|
|
|
|
+ // StartAR();
|
|
document.getElementById("startARButton").style.display = "block";
|
|
document.getElementById("startARButton").style.display = "block";
|
|
}
|
|
}
|
|
-
|
|
|
|
initialize();
|
|
initialize();
|
|
|
|
|
|
var container = document.querySelector("#unity-container");
|
|
var container = document.querySelector("#unity-container");
|
|
var canvas = document.querySelector("#unity-canvas");
|
|
var canvas = document.querySelector("#unity-canvas");
|
|
- var loadingBar = document.querySelector("#unity-loading-bar");
|
|
+ var loadingBar = document.getElementById("progressBar");
|
|
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
|
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
|
function StartAR() {
|
|
function StartAR() {
|
|
canvas.style.width = window.innerWidth + "px";
|
|
canvas.style.width = window.innerWidth + "px";
|
|
@@ -127,26 +217,30 @@
|
|
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
|
|
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
|
|
},
|
|
},
|
|
(progress) => {
|
|
(progress) => {
|
|
- progressBarFull.style.width = 100 * progress + "%";
|
|
+ // progressBarFull.style.width = 100 * progress + "%";
|
|
|
|
+ updateProgress(100 * progress);
|
|
}
|
|
}
|
|
).then((unityInstance) => {
|
|
).then((unityInstance) => {
|
|
window.unityInstance = unityInstance;
|
|
window.unityInstance = unityInstance;
|
|
- RequestWebcam();
|
|
+ loadingBar.style.display = "none";
|
|
-
|
|
+ changeBackground();
|
|
- loadingBar.style.display = "none";
|
|
+ }).catch((message) => {
|
|
- });
|
|
+ // alert("加载出错重新加载"+message);
|
|
|
|
+ ShowError("网络异常请重新加载");
|
|
|
|
+ });
|
|
|
|
+ StartMotionSensors();
|
|
|
|
+
|
|
|
|
+ StartGPS();
|
|
loadingBar.style.display = "block";
|
|
loadingBar.style.display = "block";
|
|
}
|
|
}
|
|
- //Set Facing Mode here ('environment', 'user', '')
|
|
+ //Set Facing Mode here ('environment', 'user', '')
|
|
- window.unityFacingMode = "environment";
|
|
+ window.unityFacingMode = "environment"
|
|
-
|
|
|
|
window.WEBCAM_SETTINGS = {
|
|
window.WEBCAM_SETTINGS = {
|
|
video: {
|
|
video: {
|
|
facingMode: unityFacingMode,
|
|
facingMode: unityFacingMode,
|
|
},
|
|
},
|
|
audio: false
|
|
audio: false
|
|
};
|
|
};
|
|
-
|
|
|
|
window.requestingForPermissions = false;
|
|
window.requestingForPermissions = false;
|
|
async function RequestWebcam(){
|
|
async function RequestWebcam(){
|
|
window.requestingForPermissions = true;
|
|
window.requestingForPermissions = true;
|
|
@@ -158,22 +252,19 @@
|
|
catch (err) {
|
|
catch (err) {
|
|
//user denied camera permission - show error panel
|
|
//user denied camera permission - show error panel
|
|
console.error("getUserMedia error - " , err);
|
|
console.error("getUserMedia error - " , err);
|
|
- ShowError("Failed to start the experience. Camera permission was denied");
|
|
+ ShowError("允许权限并刷新页面后继续导览");
|
|
window.requestingForPermissions = false;
|
|
window.requestingForPermissions = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
async function StartWebcam(){
|
|
async function StartWebcam(){
|
|
|
|
+ await RequestWebcam();
|
|
console.log("StartWebcam")
|
|
console.log("StartWebcam")
|
|
-
|
|
|
|
while (window.requestingForPermissions) {
|
|
while (window.requestingForPermissions) {
|
|
// Wait until requestingForPermissions becomes true.
|
|
// Wait until requestingForPermissions becomes true.
|
|
console.log("Waiting for permissions...");
|
|
console.log("Waiting for permissions...");
|
|
await new Promise(resolve => setTimeout(resolve, 100)); // Adjust the delay time as needed.
|
|
await new Promise(resolve => setTimeout(resolve, 100)); // Adjust the delay time as needed.
|
|
}
|
|
}
|
|
-
|
|
|
|
console.log("Got Permissions");
|
|
console.log("Got Permissions");
|
|
-
|
|
|
|
if(window.webcamStream)
|
|
if(window.webcamStream)
|
|
{
|
|
{
|
|
const video = document.querySelector("#webcam-video");
|
|
const video = document.querySelector("#webcam-video");
|
|
@@ -181,7 +272,6 @@
|
|
try {
|
|
try {
|
|
await arCamera.startWebcam(video);
|
|
await arCamera.startWebcam(video);
|
|
console.log("Webcam started successfully");
|
|
console.log("Webcam started successfully");
|
|
-
|
|
|
|
window.unityInstance.SendMessage('ARCamera', 'OnStartWebcamSuccess');
|
|
window.unityInstance.SendMessage('ARCamera', 'OnStartWebcamSuccess');
|
|
}
|
|
}
|
|
catch(err){
|
|
catch(err){
|
|
@@ -201,7 +291,6 @@
|
|
var ctr = 0;
|
|
var ctr = 0;
|
|
devices.forEach(mediaDevice => {
|
|
devices.forEach(mediaDevice => {
|
|
if (mediaDevice.kind === 'videoinput') {
|
|
if (mediaDevice.kind === 'videoinput') {
|
|
-
|
|
|
|
if(window.unityFacingMode == 'environment' && !mediaDevice.label.includes('facing front')){
|
|
if(window.unityFacingMode == 'environment' && !mediaDevice.label.includes('facing front')){
|
|
//back cam only
|
|
//back cam only
|
|
camDevices.push(mediaDevice);
|
|
camDevices.push(mediaDevice);
|
|
@@ -218,8 +307,8 @@
|
|
ctr++;
|
|
ctr++;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- var select = document.getElementById("chooseCamSel");
|
|
+ // var select = document.getElementById("chooseCamSel");
|
|
- select.style.display = "block";
|
|
+ // select.style.display = "block";
|
|
var count = 0;
|
|
var count = 0;
|
|
//reverse array because some Android phones can't distinguish front and back cams at first load
|
|
//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
|
|
//and when this happens, most of the time, front cam goes first and back cam goes last
|
|
@@ -233,23 +322,21 @@
|
|
}
|
|
}
|
|
const textNode = document.createTextNode(label);
|
|
const textNode = document.createTextNode(label);
|
|
option.appendChild(textNode);
|
|
option.appendChild(textNode);
|
|
- select.appendChild(option);
|
|
+ // select.appendChild(option);
|
|
count++;
|
|
count++;
|
|
});
|
|
});
|
|
- iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
|
|
+ // iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
|
|
}
|
|
}
|
|
function SelectCam(){
|
|
function SelectCam(){
|
|
var select = document.getElementById("chooseCamSel");
|
|
var select = document.getElementById("chooseCamSel");
|
|
window.deviceId = select.value;
|
|
window.deviceId = select.value;
|
|
window.WEBCAM_SETTINGS.video['deviceId'] = deviceId;
|
|
window.WEBCAM_SETTINGS.video['deviceId'] = deviceId;
|
|
//console.log(window.WEBCAM_SETTINGS);
|
|
//console.log(window.WEBCAM_SETTINGS);
|
|
- iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
|
|
+ // iTracker.WEBCAM_NAME = select.options[select.selectedIndex].innerHTML;
|
|
}
|
|
}
|
|
-
|
|
|
|
async function FlipCam(){
|
|
async function FlipCam(){
|
|
arCamera.stopWebcam();
|
|
arCamera.stopWebcam();
|
|
window.WEBCAM_SETTINGS.video.deviceId = '';
|
|
window.WEBCAM_SETTINGS.video.deviceId = '';
|
|
-
|
|
|
|
if(window.WEBCAM_SETTINGS.video.facingMode == 'user'){
|
|
if(window.WEBCAM_SETTINGS.video.facingMode == 'user'){
|
|
window.WEBCAM_SETTINGS.video.facingMode = 'environment';
|
|
window.WEBCAM_SETTINGS.video.facingMode = 'environment';
|
|
arCamera.setFlipped(false);
|
|
arCamera.setFlipped(false);
|
|
@@ -259,37 +346,50 @@
|
|
arCamera.setFlipped(true);
|
|
arCamera.setFlipped(true);
|
|
}
|
|
}
|
|
window.webcamStream = await navigator.mediaDevices.getUserMedia(window.WEBCAM_SETTINGS);
|
|
window.webcamStream = await navigator.mediaDevices.getUserMedia(window.WEBCAM_SETTINGS);
|
|
-
|
|
|
|
const video = document.querySelector("#webcam-video");
|
|
const video = document.querySelector("#webcam-video");
|
|
video.srcObject = webcamStream;
|
|
video.srcObject = webcamStream;
|
|
-
|
|
|
|
await arCamera.startWebcam(video);
|
|
await arCamera.startWebcam(video);
|
|
}
|
|
}
|
|
-
|
|
|
|
function ShowError(error){
|
|
function ShowError(error){
|
|
document.getElementById("errorDiv").style.display = "flex";
|
|
document.getElementById("errorDiv").style.display = "flex";
|
|
document.getElementById("errorText").innerHTML = error;
|
|
document.getElementById("errorText").innerHTML = error;
|
|
}
|
|
}
|
|
-
|
|
|
|
function ShowScreenshot(dataUrl){
|
|
function ShowScreenshot(dataUrl){
|
|
document.getElementById("screenshotDiv").style.display = "flex";
|
|
document.getElementById("screenshotDiv").style.display = "flex";
|
|
document.getElementById("screenshotImg").src = dataUrl;
|
|
document.getElementById("screenshotImg").src = dataUrl;
|
|
document.getElementById("screenshotImg").style.width = "80vw";
|
|
document.getElementById("screenshotImg").style.width = "80vw";
|
|
document.getElementById("screenshotImg").style.height = 80 / window.innerWidth * window.innerHeight + "vw";
|
|
document.getElementById("screenshotImg").style.height = 80 / window.innerWidth * window.innerHeight + "vw";
|
|
}
|
|
}
|
|
-
|
|
|
|
function ShowConfirmUrl(url){
|
|
function ShowConfirmUrl(url){
|
|
document.getElementById("confirmUrlDiv").style.display = "flex";
|
|
document.getElementById("confirmUrlDiv").style.display = "flex";
|
|
window.newUrlString = url;
|
|
window.newUrlString = url;
|
|
document.getElementById("confirmUrlText").innerText = "Are you sure you want to visit " + url;
|
|
document.getElementById("confirmUrlText").innerText = "Are you sure you want to visit " + url;
|
|
}
|
|
}
|
|
-
|
|
|
|
window.ITRACKER_GLOBALS = {
|
|
window.ITRACKER_GLOBALS = {
|
|
//place global settings here
|
|
//place global settings here
|
|
INTERNAL_SMOOTHFACTOR_POS: .075,
|
|
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>
|
|
</script>
|
|
</body>
|
|
</body>
|
|
-</html>
|
|
+</html>
|