Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experiment - modify screen capture stream #57

Merged
merged 5 commits into from Dec 25, 2023
Merged

Experiment - modify screen capture stream #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64af53b
Merge pull request #44 from KaliedaRik/v8-dev
KaliedaRik Dec 23, 2023
7aa3474
initial attempt
KaliedaRik Dec 24, 2023
bd01000
clean up demo
KaliedaRik Dec 24, 2023
cec6e27
clean up video asset code
KaliedaRik Dec 24, 2023
0ab1510
rebuild documentation for new demo DOM-019
KaliedaRik Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
71 changes: 71 additions & 0 deletions demo/dom-019.html
View file
Open in desktop
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo DOM 019</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />

<style>
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
body {
margin: 1rem 0;
}
.canvas-hold {
width: 100%;
height: 100vh;
}
</style>
</head>

<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - DOM test 019</h1>
<h2>Screen Capture API - apply a filter to a browser web page</h2>
<p>Demo will show a web page opened in a separate browser tab; this page will request access to the other page before displaying it.</p>

<div class="controls">
<div class="yellow label">Filter</div>
<div class="yellow">
<select class="controlItem" id="backgroundFilter">
<option value="">None</option>
<option value="grayscale">Grayscale</option>
<option value="sepia">Sepia</option>
<option value="invert">Invert</option>
<option value="red">Red</option>
<option value="background-blur">Blur</option>
<option value="pixelate">Pixelate</option>
</select>
</div>
</div>

<div class="canvas-hold">
<canvas
id="mycanvas"
data-scrawl-canvas
data-is-responsive="true"
></canvas>
</div>

<p id="reportmessage"></p>

<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>...</li>
</ul>

<p><b>Touch test:</b> not required</p>

<p><a href="../docs/demo/dom-019.html">Annotated code</a></p>
</div>

<script src="dom-019.js" type="module"></script>

</body>

</html>
108 changes: 108 additions & 0 deletions demo/dom-019.js
View file
Open in desktop
@@ -0,0 +1,108 @@
// # Demo Screencapture 001
// Screen Capture API - apply a filter to a browser web page

// [Run code](../../demo/dom-019.html)
import * as scrawl from '../source/scrawl.js';

import { reportSpeed } from './utilities.js';


// #### Scene setup
const canvas = scrawl.library.artefact.mycanvas;


scrawl.makeFilter({
name: 'grayscale',
method: 'grayscale',
}).clone({
name: 'sepia',
method: 'sepia',
}).clone({
name: 'invert',
method: 'invert',
}).clone({
name: 'red',
method: 'red',
});

scrawl.makeFilter({
name: 'pixelate',
method: 'pixelate',
tileWidth: 4,
tileHeight: 4,
});

scrawl.makeFilter({
name: 'background-blur',
method: 'gaussianBlur',
radius: 2,
});

// ##### Import and use stream capture
let myBackground;

// Capture the media stream
scrawl.importScreenCapture({
name: 'my-screen-capture',
})
.then(mycamera => {

// Take the media stream and display it in our canvas element
myBackground = scrawl.makePicture({

name: 'background',
asset: mycamera.name,
order: 2,

dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
});
})
.catch(err => console.log(err.message));


// #### Scene animation
// Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');


// Create the Display cycle animation
scrawl.makeRender({

name: 'demo-animation',
target: canvas,
afterShow: report,
});


// #### User interaction
// Event listeners
scrawl.addNativeListener(['input', 'change'], (e) => {

e.preventDefault();
e.returnValue = false;

if (e && e.target) {

const id = e.target.id,
val = e.target.value;

if (myBackground && 'backgroundFilter' === id) {

myBackground.clearFilters();

if (val) myBackground.addFilters(val);
}
}
}, '.controlItem');

// Set DOM form initial input values
// @ts-expect-error
document.querySelector('#backgroundFilter').value = '';
// @ts-expect-error
document.querySelector('#outlineFilter').value = '1';


// #### Development and testing
console.log(scrawl.library);

6 changes: 6 additions & 0 deletions demo/index.html
View file
Open in desktop
Expand Up @@ -1132,6 +1132,12 @@ <h2>DOM and Stack tests</h2>
<a href="dom-018.html">DOM-018</a>
Fullscreen API functionality
</div>

<div class="no-padding"><img src="thumbs/dom-019.webp" /></div>
<div>
<a href="dom-019.html">DOM-019</a>
Screen Capture API - apply a filter to a browser web page
</div>
</div>

<h2>Packet code tests</h2>
Expand Down
Binary file added demo/thumbs/dom-019.webp
View file
Open in desktop
Binary file not shown.
5 changes: 5 additions & 0 deletions docs/demo/canvas-001.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-002.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-003.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-004.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-005.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-006.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-007.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-008.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-009.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-010.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-011.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-012.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-013.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-014.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-015.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-015a.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down
5 changes: 5 additions & 0 deletions docs/demo/canvas-016.html
View file
Open in desktop
Expand Up @@ -440,6 +440,11 @@
</a>


<a class="source" href="dom-019.html">
./demo/dom-019.js
</a>


<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
Expand Down