Skip to content
This repository has been archived by the owner on Feb 1, 2022. It is now read-only.

Commit

Permalink
Improve examples a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenchris
kenchris committed Feb 22, 2017
1 parent 398e451 commit 9148e9f
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 117 deletions.
175 changes: 107 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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%}
Expand All @@ -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}
Expand Down Expand Up @@ -471,8 +475,8 @@ <h2>
</p>
<p>
<span id="MathJax-Element-1-Frame" class="mjx-chtml"><span id=
"MJXc-Node-1" class="mjx-math" role="math"><span id="MJXc-Node-2"
class="mjx-mrow"><span id="MJXc-Node-3" class="mjx-mstyle"><span id=
"MJXc-Node-1" class="mjx-math"><span id="MJXc-Node-2" class=
"mjx-mrow"><span id="MJXc-Node-3" class="mjx-mstyle"><span id=
"MJXc-Node-4" class="mjx-mrow"><span id="MJXc-Node-5" class=
"mjx-msub"><span class="mjx-base" style=
"margin-right: -0.003em;"><span id="MJXc-Node-6" class=
Expand All @@ -496,7 +500,7 @@ <h2>
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;"><span class=
"mjx-char MJXc-TeX-main-R" style=
"margin-top: 0.004em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-14"
"padding-top: 0.298em; padding-bottom: 0.446em;">−</span></span><span id="MJXc-Node-14"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
"padding-top: 0.225em; padding-bottom: 0.298em;">n</span></span><span id="MJXc-Node-15"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
Expand All @@ -516,7 +520,7 @@ <h2>
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;"><span class=
"mjx-char MJXc-TeX-main-R" style=
"margin-top: 0.004em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-23"
"padding-top: 0.298em; padding-bottom: 0.446em;">−</span></span><span id="MJXc-Node-23"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
"padding-top: 0.225em; padding-bottom: 0.298em;">n</span></span><span id="MJXc-Node-24"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
Expand All @@ -531,8 +535,8 @@ <h2>
</p>
<p>
<span id="MathJax-Element-2-Frame" class="mjx-chtml"><span id=
"MJXc-Node-27" class="mjx-math" role="math"><span id="MJXc-Node-28"
class="mjx-mrow"><span id="MJXc-Node-29" class="mjx-mstyle"><span id=
"MJXc-Node-27" class="mjx-math"><span id="MJXc-Node-28" class=
"mjx-mrow"><span id="MJXc-Node-29" class="mjx-mstyle"><span id=
"MJXc-Node-30" class="mjx-mrow"><span id="MJXc-Node-31" class=
"mjx-msub"><span class="mjx-base" style=
"margin-right: -0.003em;"><span id="MJXc-Node-32" class=
Expand Down Expand Up @@ -590,10 +594,10 @@ <h2>
<var>d<sub>16bit</sub></var> to [0, 1] range:
<p>
<span id="MathJax-Element-3-Frame" class="mjx-chtml"><span id=
"MJXc-Node-49" class="mjx-math" role="math"><span id=
"MJXc-Node-50" class="mjx-mrow"><span id="MJXc-Node-51" class=
"mjx-mstyle"><span id="MJXc-Node-52" class="mjx-mrow"><span id=
"MJXc-Node-53" class="mjx-msub"><span class="mjx-base" style=
"MJXc-Node-49" class="mjx-math"><span id="MJXc-Node-50" class=
"mjx-mrow"><span id="MJXc-Node-51" class="mjx-mstyle"><span id=
"MJXc-Node-52" class="mjx-mrow"><span id="MJXc-Node-53" class=
"mjx-msub"><span class="mjx-base" style=
"margin-right: -0.003em;"><span id="MJXc-Node-54" class=
"mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
"padding-top: 0.446em; padding-bottom: 0.298em; padding-right: 0.003em;">
Expand Down Expand Up @@ -636,11 +640,10 @@ <h2>
d</var>:
<p>
<span id="MathJax-Element-4-Frame" class="mjx-chtml"><span id=
"MJXc-Node-67" class="mjx-math" role="math"><span id=
"MJXc-Node-68" class="mjx-mrow"><span id="MJXc-Node-69" class=
"mjx-mstyle"><span id="MJXc-Node-70" class="mjx-mrow"><span id=
"MJXc-Node-71" class="mjx-mi"><span class=
"mjx-char MJXc-TeX-math-I" style=
"MJXc-Node-67" class="mjx-math"><span id="MJXc-Node-68" class=
"mjx-mrow"><span id="MJXc-Node-69" class="mjx-mstyle"><span id=
"MJXc-Node-70" class="mjx-mrow"><span id="MJXc-Node-71" class=
"mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
"padding-top: 0.446em; padding-bottom: 0.298em; padding-right: 0.003em;">
d</span></span><span id="MJXc-Node-72" class="mjx-mo" style=
"padding-left: 0.333em; padding-right: 0.333em;"><span class=
Expand Down Expand Up @@ -674,7 +677,7 @@ <h2>
class="mjx-mo" style=
"padding-left: 0.267em; padding-right: 0.267em;"><span class=
"mjx-char MJXc-TeX-main-R" style=
"margin-top: 0.004em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-86"
"padding-top: 0.298em; padding-bottom: 0.446em;">−</span></span><span id="MJXc-Node-86"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
"padding-top: 0.225em; padding-bottom: 0.298em;">n</span></span><span id="MJXc-Node-87"
class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style=
Expand Down Expand Up @@ -1213,59 +1216,94 @@ <h3>
<h2>
Examples
</h2>
<h3>
Playback of depth and color streams from same device group.
</h3>
<pre class="example">
navigator.mediaDevices.getUserMedia({
video: {videoKind: {exact: "color"}, groupId: {exact: id}}
}).then(function (stream) {
// Wire the media stream into a &lt;video&gt; element for playback.
// The RGB video is rendered.
var video = document.querySelector('#video');
video.srcObject = stream;
video.play();
<aside title="Playback of depth and color streams from same device group"
class="example">
<pre class="highlight">
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 &lt;video&gt; 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 =&gt; 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();

</pre>
<h3>
WebGL Fragment Shader based post-processing
</h3>
<pre class="example">
// 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 &lt;video&gt; element for playback
var depthVideo = document.querySelector('#depthVideo');
depthVideo.srcObject = stream;
depthVideo.play();
}).catch(function (reason) {
// handle gUM error here
});
</aside>
<aside title="WebGL Fragment Shader based post-processing" class=
"example">
<p>
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.
</p>
<pre class="highlight">
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));
}

&lt;script id="fragment-shader" type="x-shader/x-fragment"&gt;
varying vec2 v_texCoord;
Expand All @@ -1282,6 +1320,7 @@ <h3>
}
&lt;/script&gt;
</pre>
</aside>
</section>
<section class="informative">
<h2>
Expand Down
Loading

0 comments on commit 9148e9f

Please sign in to comment.