|
| 1 | +<!DOCTYPE html> |
1 | 2 | <html>
|
2 |
| - |
3 | 3 | <head>
|
4 |
| - <title>NFT_test</title> |
5 |
| - <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1"> |
6 |
| - <style> |
7 |
| - html, |
8 |
| - body { |
9 |
| - margin: 0; |
10 |
| - padding: 0; |
11 |
| - } |
12 |
| - </style> |
13 |
| - <link rel="stylesheet" type="text/css" href="../css/style.css"> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <title>NFT marker example with a WebWorker and Three.js</title> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1"> |
| 7 | + <link rel="stylesheet" href="../css/video-style.css"> |
14 | 8 | </head>
|
| 9 | +<body class="loading"> |
| 10 | + <div id="loading" > |
| 11 | + <img src="../Data/logo.gif"/> |
| 12 | + <span class="loading-text">Loading, please wait</span> |
| 13 | + </div> |
| 14 | + <!-- |
| 15 | + ================== |
| 16 | + STATS |
| 17 | + ================== |
| 18 | + --> |
| 19 | + |
| 20 | + <div id="stats" class="ui stats"> |
| 21 | + |
| 22 | + <div id="stats1" class="stats-item"> |
| 23 | + <p class="stats-item-title"> |
| 24 | + Main |
| 25 | + </p> |
| 26 | + </div> |
| 27 | + |
| 28 | + <div id="stats2" class="stats-item"> |
| 29 | + <p class="stats-item-title"> |
| 30 | + Worker |
| 31 | + </p> |
| 32 | + </div> |
| 33 | + |
| 34 | + </div> |
15 | 35 |
|
16 |
| -<body> |
17 |
| - <div class="grey-cover"> |
18 |
| - <div class="loading"> |
19 |
| - <img src="../Data/logo.gif"/> |
20 |
| - <span class="loading-text">Loading, please wait</span> |
21 |
| - </div> |
22 |
| - </div> |
23 |
| - <div style="position:absolute; color:white; top:0;left:0" id="stats1"> |
24 |
| - <div>Main</div> |
25 |
| - </div> |
26 |
| - <div style="position:absolute; color:white; top:80px;left:0" id="stats2"> |
27 |
| - <div>Worker</div> |
28 |
| - </div> |
29 |
| - <div id="container"> |
30 |
| - <video loop autoplay muted playsinline id="video"></video> |
31 |
| - <canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas> |
32 |
| - </div> |
| 36 | + <!-- |
| 37 | + ================== |
| 38 | + CAMERA VIDEO & CANVAS |
| 39 | + ================== |
| 40 | + --> |
| 41 | + |
| 42 | + <div id="app"> |
| 43 | + <video |
| 44 | + loop |
| 45 | + autoplay |
| 46 | + muted |
| 47 | + playsinline |
| 48 | + id="video"> |
| 49 | + </video> |
| 50 | + |
| 51 | + <canvas id="canvas"></canvas> |
| 52 | + </div> |
| 53 | + |
| 54 | + <a |
| 55 | + href="https://raw.githubusercontent.com/artoolkit/artoolkit5/master/doc/Marker%20images/pinball.jpg" |
| 56 | + class="ui marker" |
| 57 | + target="_blank"> |
| 58 | + 🖼 Marker Image |
| 59 | + </a> |
33 | 60 |
|
34 | 61 | <script src="../js/third_party/three.js/stats.min.js"></script>
|
35 | 62 | <script src="../js/third_party/three.js/three.min.js"></script>
|
36 | 63 | <script src="threejs_worker.js"></script>
|
37 | 64 |
|
38 | 65 | <script>
|
39 |
| - var statsMain = new Stats(); |
40 |
| - statsMain.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom |
41 |
| - statsMain.domElement.style.position = 'relative'; |
42 |
| - statsMain.domElement.style.left = '0px'; |
43 |
| - statsMain.domElement.style.top = '0px'; |
44 |
| - document.getElementById("stats1").appendChild(statsMain.dom); |
45 |
| - |
46 |
| - var statsWorker = new Stats(); |
47 |
| - statsWorker.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom |
48 |
| - statsWorker.domElement.style.position = 'relative'; |
49 |
| - statsWorker.domElement.style.left = '0px'; |
50 |
| - statsWorker.domElement.style.top = '0px'; |
51 |
| - document.getElementById("stats2").appendChild(statsWorker.dom); |
52 |
| - |
53 |
| - var container = document.getElementById('container'); |
54 |
| - var greyCover = document.querySelector('.grey-cover'); |
55 |
| - var video = document.getElementById('video'); |
56 |
| - var canvas_draw = document.getElementById('canvas_draw'); |
| 66 | + |
| 67 | + /** |
| 68 | + * STATS |
| 69 | + */ |
| 70 | + var statsMain = new Stats(); |
| 71 | + statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom |
| 72 | + document.getElementById( 'stats1' ).appendChild( statsMain.dom ); |
| 73 | + |
| 74 | + var statsWorker = new Stats(); |
| 75 | + statsWorker.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom |
| 76 | + document.getElementById( 'stats2' ).appendChild( statsWorker.dom ); |
| 77 | + |
| 78 | + /** |
| 79 | + * APP / ELEMENTS |
| 80 | + */ |
| 81 | + var container = document.getElementById( 'app' ); |
| 82 | + var video = document.getElementById( 'video' ); |
| 83 | + var canvas = document.getElementById( 'canvas' ); |
| 84 | + |
| 85 | + /** |
| 86 | + * APP / VIDEO STREAM |
| 87 | + */ |
57 | 88 |
|
58 | 89 | if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
59 |
| - var hint = {}; |
60 |
| - if (isMobile()) { |
61 |
| - hint = { |
62 |
| - facingMode: { "ideal": "environment" }, |
63 |
| - audio: false, |
64 |
| - video: { |
65 |
| - width: { min: 240, max: 240 }, |
66 |
| - height: { min: 360, max: 360 }, |
67 |
| - }, |
68 |
| - }; |
69 |
| - } |
70 |
| - |
71 |
| - navigator.mediaDevices.getUserMedia({ video: hint }).then(function (stream) { |
72 |
| - video.srcObject = stream; |
73 |
| - video.addEventListener("loadedmetadata", function() { |
74 |
| - video.play(); |
75 |
| - start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()}, function(){statsWorker.update()}, greyCover); |
76 |
| - }); |
77 |
| - }); |
78 |
| - } |
| 90 | + var hint = { |
| 91 | + audio: false, |
| 92 | + video: true |
| 93 | + }; |
| 94 | + if( window.innerWidth < 800 ) { |
| 95 | + var width = ( window.innerWidth < window.innerHeight ) ? 240 : 360; |
| 96 | + var height = ( window.innerWidth < window.innerHeight ) ? 360 : 240; |
| 97 | + |
| 98 | + var aspectRatio = window.innerWidth / window.innerHeight; |
| 99 | + |
| 100 | + console.log( width, height ); |
| 101 | + |
| 102 | + hint = { |
| 103 | + audio: false, |
| 104 | + video: { |
| 105 | + facingMode: 'environment', |
| 106 | + width: { min: width, max: width } |
| 107 | + }, |
| 108 | + }; |
| 109 | + |
| 110 | + console.log( hint ); |
| 111 | + } |
| 112 | + |
| 113 | + navigator.mediaDevices.getUserMedia( hint ).then( function( stream ) { |
| 114 | + video.srcObject = stream; |
| 115 | + video.addEventListener( 'loadedmetadata', function() { |
| 116 | + video.play(); |
| 117 | + |
| 118 | + console.log( 'video', video, video.videoWidth, video.videoHeight ); |
| 119 | + |
| 120 | + start( |
| 121 | + container, |
| 122 | + markers['pinball'], |
| 123 | + video, |
| 124 | + video.videoWidth, |
| 125 | + video.videoHeight, |
| 126 | + canvas, |
| 127 | + function() { |
| 128 | + statsMain.update() |
| 129 | + }, |
| 130 | + function() { |
| 131 | + statsWorker.update(); |
| 132 | + }, |
| 133 | + null |
| 134 | + ); |
| 135 | + } ); |
| 136 | + } ); |
| 137 | + } |
79 | 138 | </script>
|
80 | 139 | </body>
|
81 | 140 |
|
|
0 commit comments