gallery/advancedViewer.html at master · vrml2/gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>3D Model Viewer/Recorder</title>
	<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/4.7.15/dist/x_ite.css"/>
	<script type="text/javascript" src="https://create3000.github.io/code/x_ite/4.7.15/dist/x_ite.min.js"></script>
	<script type="text/javascript">
		// pull a parameter off url
		function GetURLParameter(paramName){
			var fs = window.location.search.substring(1).split('&');
			for (var i = 0; i < fs.length; i++) {
				var f = fs[i].split('=',2);
				if (f[0] == paramName){
				    return f[1];
				}
			}
		}

		// insert a new X3DCanvas Element, inside the provided element, set its source from the page urls 'paramName' parameter and return the base of the url.
		function insertX3DCanvasChild(elem,paramName){
			var n = document.createElement("X3DCanvas")
			var a = document.createAttribute("src")
			a.value =GetURLParameter(paramName);
			n.setAttributeNode(a);
	        elem.appendChild(n)
<!--	        elem.focus()-->
 			return base(a.value)
 		}

		// strip path
		function base(url){
			return decodeURI(url).split('/').pop()
		}
	</script>

    <script type="text/javascript">
		function record(ms){
			var mr=new MediaRecorder(ms)
			mr.onwarning = function(e){
				console.log(e)
			}
			mr.onerror = function(e){
				alert(e)
			}
			mr.ondataavailable = function(e){
				downloadBlob(e.data)
			}
			return mr
		}

		function downloadBlob(b) {
			var url = URL.createObjectURL(b);
			const a = document.createElement('a');
			a.href = url;
			a.style.display = 'none';
<!--//			a.target="_blank" ;-->
			document.body.appendChild(a);
			setTimeout(() => {
				document.body.removeChild(a);
				window.URL.revokeObjectURL(url);
				}, 5000);
			a.click();
		}
	</script>

    <style>
    X3DCanvas {
      width: 100%;
      height: 100%;
    }

	.content {
		display: block;
		position: absolute;
		z-index:0;
	}

	.widget {
		display: block;
		position: absolute;
		z-index:1;
		font-size: 2em;
		font-weight: bold;
		opacity:0.75;
		border-radius: .5em;
		padding:0em 0.5em 0.3em;
		background-color: Grey;
		cursor: pointer;
		user-select: none;
	}

	.labelledBlinkingToggler {
		display:none;
	}

	.labelledBlinkingToggler:checked+span:first-child{
		animation: blinker .5s infinite;
	}

	.outlinedText {
		text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}

	@keyframes blinker {
		50% {
		    opacity: 0;
		}
	}
    </style>
</head>
<body onload="this.document.body.firstElementChild.firstElementChild.onload();">
<label class="widget" title="Model Reference">
<input class="labelledBlinkingToggler" type="checkbox"
onload="this.nextElementSibling.nextElementSibling.textContent=insertX3DCanvasChild(this.parentElement.nextElementSibling,'model')"
oninput="if (this.checked){
this[record]=record(this.parentElement.nextElementSibling.firstElementChild.children[0].children[1].children[0].captureStream(25));
this[record].start();
}else{
this[record].stop();
};">
</input>
<span title="Recording Status" style="color:red;font-size:larger;">●</span>
<span class="outlinedText">No Model Set</span>
</label>
<span></span>
<!--<input type="checkbox" oninput="alert(this.firstElementChild);if (this.checked){this.firstElementChild.textContent='🔇︎'}else{this.firstElementChild.textContent='🔊︎'}">-->
<!--<label><span title="Sound Status" style="color:blue;">🔊︎</span></label>-->
<!--</input>-->
</body>
</html>