diff --git a/index.html b/index.html
index 605d608..8aa4657 100644
--- a/index.html
+++ b/index.html
@@ -90,8 +90,9 @@
.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
+ .mjx-full-width {text-align: center; display: table-cell!important; width: 10000em}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
- .mjx-math * {display: inline-block; text-align: left}
+ .mjx-math * {display: inline-block; -webkit-box-sizing: content-box!important; -moz-box-sizing: content-box!important; box-sizing: content-box!important; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
@@ -115,11 +116,12 @@
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
- .mjx-label {display: block}
+ .mjx-label {display: table-row}
.mjx-box {display: inline-block}
.mjx-block {display: block}
+ .mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
- .mjx-itable {display: inline-table}
+ .mjx-itable {display: inline-table; width: auto}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
@@ -130,6 +132,8 @@
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-ex-box-test {position: absolute; width: 1px; height: 60ex}
+ .mjx-line-box-test {display: table!important}
+ .mjx-line-box-test span {display: table-cell!important; width: 10000em!important; min-width: 0; max-width: none; padding: 0; border: 0; margin: 0}
.MJXc-TeX-unknown-R {font-family: monospace; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: monospace; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: monospace; font-style: normal; font-weight: bold}
@@ -471,8 +475,8 @@
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;">− − n
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;">− − n
d16bit to [0, 1] range:
@@ -636,11 +640,10 @@
d:
d
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;">− − n
Examples
-
- Playback of depth and color streams from same device group.
-
-
-navigator.mediaDevices.getUserMedia({
- video: {videoKind: {exact: "color"}, groupId: {exact: id}}
-}).then(function (stream) {
- // Wire the media stream into a <video> element for playback.
- // The RGB video is rendered.
- var video = document.querySelector('#video');
- video.srcObject = stream;
- video.play();
+
+
+async function attachVideoStream(el, kind, groupId) {
+ const constraints = {
+ video: {
+ mandatory: {
+ groupId: groupId
+ },
+ videoKind: { exact: kind }
+ }
}
-);
-navigator.mediaDevices.getUserMedia({
- video: {videoKind: {exact: "depth"}, groupId: {exact: id}}
-}).then(function (stream) {
- // Wire the depth-only stream into another <video> element for playback.
- // The depth information is rendered in its grayscale representation.
- var depthVideo = document.querySelector('#depthVideo');
- depthVideo.srcObject = stream;
- depthVideo.play();
- }
-);
+ const stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+ el.srcObject = stream;
+ el.play();
+
+ return el;
+}
+
+async function play() {
+ const colorEl = document.createElement("video");
+ const depthEl = document.createElement("video");
+
+ const body = document.querySelector('body');
+ body.appendChild(colorEl);
+ body.appendChild(depthEl);
+
+ // Assume that all our video inputs are depth stream capable.
+ const devices = await navigator.mediaDevices.enumerateDevices();
+ const sources = devices.filter(device => device.kind == "videoinput");
+
+ // Attached cameras usually comes last.
+ const camera = sources.pop();
+
+ // Regular RGB video will be rendered.
+ attachVideoStream(colorEl, "color", camera.groupId);
+
+ // Depth information will be rendered in its grayscale representation.
+ attachVideoStream(depthEl, "depth", camera.groupId);
+}
+
+play();
+
-
- WebGL Fragment Shader based post-processing
-
-
-// This code sets up a video element from a depth stream, uploads it to a WebGL
-// texture, and samples that texture in the fragment shader, reconstructing the
-// 16-bit depth values from the red and green channels.
-navigator.mediaDevices.getUserMedia({
- video: {videoKind: {exact: "depth"}}
-}).then(function (stream) {
- // wire the stream into a <video> element for playback
- var depthVideo = document.querySelector('#depthVideo');
- depthVideo.srcObject = stream;
- depthVideo.play();
-}).catch(function (reason) {
- // handle gUM error here
-});
+
+
+
+ This code sets up a video element from a depth stream, uploads it to
+ a WebGL texture, and samples that texture in the fragment shader,
+ reconstructing the 16-bit depth values from the red channel.
+
+
+async function getDepthVideo() {
+ // Wire the stream into an existing element with id 'depthVideo'.
+ const depthVideoEl = document.querySelector('#depthVideo');
+
+ const constraints = {
+ video: { videoKind: { exact: "depth" } }
+ }
+
+ try {
+ depthVideoEl.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
+ depthVideoEl.play();
+ } catch(err) {
+ console.error("An error occoured!")
+ }
+
+ return depthVideoEl;
+}
+
+function render() {
+ // Later, in the rendering loop...
+ gl.texImage2D(
+ gl.TEXTURE_2D,
+ 0,
+ gl.RGB,
+ gl.RGB,
+ gl.UNSIGNED_BYTE,
+ depthVideoEl
+ );
+
+ // ...
-// ... later, in the rendering loop ...
-gl.texImage2D(
- gl.TEXTURE_2D,
- 0,
- gl.RGB,
- gl.RGB,
- gl.UNSIGNED_BYTE,
- depthVideo
-);
+ requestAnimationFrame(render.bind(this));
+}
<script id="fragment-shader" type="x-shader/x-fragment">
varying vec2 v_texCoord;
@@ -1282,6 +1320,7 @@
}
</script>
+