Chiebot-Mirror
/
opencv_contrib
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated samples html

Browse Source
pull/3471/head
kallaballa 2 years ago
parent e8397beda8
commit 81b8778d97
18 changed files with 83 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      modules/v4d/samples/example_v4d_beauty-demo.html
  2. 13
      modules/v4d/samples/example_v4d_cube-demo.html
  3. 13
      modules/v4d/samples/example_v4d_custom_source_and_sink.html
  4. 15
      modules/v4d/samples/example_v4d_display_image.html
  5. 15
      modules/v4d/samples/example_v4d_display_image_fb.html
  6. 13
      modules/v4d/samples/example_v4d_font-demo.html
  7. 15
      modules/v4d/samples/example_v4d_font_rendering.html
  8. 15
      modules/v4d/samples/example_v4d_font_with_gui.html
  9. 13
      modules/v4d/samples/example_v4d_many_cubes-demo.html
  10. 15
      modules/v4d/samples/example_v4d_nanovg-demo.html
  11. 17
      modules/v4d/samples/example_v4d_optflow-demo.html
  12. 15
      modules/v4d/samples/example_v4d_pedestrian-demo.html
  13. 15
      modules/v4d/samples/example_v4d_render_opengl.html
  14. 17
      modules/v4d/samples/example_v4d_shader-demo.html
  15. 13
      modules/v4d/samples/example_v4d_vector_graphics.html
  16. 15
      modules/v4d/samples/example_v4d_vector_graphics_and_fb.html
  17. 15
      modules/v4d/samples/example_v4d_video-demo.html
  18. 15
      modules/v4d/samples/example_v4d_video_editing.html

15
modules/v4d/samples/example_v4d_beauty-demo.html
Unescape View File

@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

13
modules/v4d/samples/example_v4d_cube-demo.html
Unescape View File

@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

13
modules/v4d/samples/example_v4d_custom_source_and_sink.html
Unescape View File

@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_display_image.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Display Image</title>
<title>Display an Image through the Video-Pipeline</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_display_image_fb.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Display Image through Framebuffer</title>
<title>Display an Image through the FB Context</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

13
modules/v4d/samples/example_v4d_font-demo.html
Unescape View File

@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_font_rendering.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Font Rendering</title>
<title>Font rendering</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_font_with_gui.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Font with GUI</title>
<title>Font rendering with Form-based GUI</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

13
modules/v4d/samples/example_v4d_many_cubes-demo.html
Unescape View File

@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_nanovg-demo.html
Unescape View File

@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

17
modules/v4d/samples/example_v4d_optflow-demo.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Optflow Demo</title>
<title>Sparse Optical Flow Demo</title>
<style>
body {
font-family: arial;
@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_pedestrian-demo.html
Unescape View File

@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_render_opengl.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Render OpenGL</title>
<title>Render OpenGL Blue Screen</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

17
modules/v4d/samples/example_v4d_shader-demo.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Shader Demo</title>
<title>Mandelbrot Shader Demo</title>
<style>
body {
font-family: arial;
@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

13
modules/v4d/samples/example_v4d_vector_graphics.html
Unescape View File

@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_vector_graphics_and_fb.html
Unescape View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Vector Graphics and Framebuffer</title>
<title>Vector Graphics and Frambuffer access</title>
<style>
body {
font-family: arial;
@ -16,11 +16,6 @@
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
#emscripten_logo {
display: inline-block;
margin: 0;
}
.spinner {
height: 30px;
width: 30px;
@ -98,7 +93,6 @@
<button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
@ -114,16 +108,15 @@
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
console.log("fixed canvas size");
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
},
preRun: [],
postRun: [],
@ -201,7 +194,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_video-demo.html
Unescape View File

@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

15
modules/v4d/samples/example_v4d_video_editing.html
Unescape View File

@ -105,9 +105,7 @@
<span><button id="captureBtn">Start Capture</button><button id="fullscreenBtn">Fullscreen</button>
</span>
</span>
<canvas id="offscreenCanvas" width="960" height="540" style="display: none;"></canvas>
<canvas id="cameraCanvas" width="960" height="540" style="display: none;"></canvas>
<video id="v4dVideoElement" width="960" height="540" autoplay style="display: none;"></video>
<video id="v4dVideoElement" width="960" height="960" autoplay style="display: none;"></video>
<div class="emscripten" id="status">Downloading...</div>
@ -125,19 +123,18 @@
var fsButton = document.querySelector("#fullscreenBtn");
var captureBtn = document.querySelector("#captureBtn");
var videoElement = document.querySelector("#v4dVideoElement");
var cameraCanvas = document.querySelector("#cameraCanvas");
function fixCanvasSize() {
Module.canvas.style.width = ((960) / window.devicePixelRatio)+ "px";
Module.canvas.style.height = ((540) / window.devicePixelRatio) + "px";
Module.canvas.style.height = ((960) / window.devicePixelRatio) + "px";
Module.canvas.width = 960;
Module.canvas.height = 540;
Module.canvas.height = 960;
}
var Module = {
onRuntimeInitialized: function() {
fixCanvasSize();
Module._v4dInitCapture(960, 540);
Module._v4dInitCapture(960,960);
},
preRun: [],
postRun: [],
@ -209,7 +206,7 @@
}
captureBtn.addEventListener('click', async function() {
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 540 } , audio: false });
let stream = await navigator.mediaDevices.getUserMedia({ video: { width: 960, height: 960 } , audio: false });
videoElement.addEventListener(
"playing",
() => {
@ -245,7 +242,7 @@
window.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
console.log("Element: " + document.fullscreenElement.id + " entered fullscreen mode.");
} else {
console.log('Leaving fullscreen mode.');
}

Write Preview
Loading…
Cancel
Save