mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-24 01:25:58 +01:00
Code Activity

Simplify interface to video filters.

Browse source 
Remove support for WebGL contexts, use concrete types.
This commit is contained in:
Juliusz Chroboczek 2024-11-17 15:48:12 +01:00
parent b54119d508
commit 9eb7428b98
1 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
static/galene.js
View file

@ -1025,11 +1025,9 @@ function cancelReconsiderParameters() {
/** /**
* @typedef {Object} filterDefinition * @typedef {Object} filterDefinition
* @property {string} [description] * @property {string} [description]
* @property {string} [contextType] * @property {(this: Filter) => void} [init]
* @property {Object} [contextAttributes]
* @property {(this: Filter, ctx: RenderingContext) => void} [init]
* @property {(this: Filter) => void} [cleanup] * @property {(this: Filter) => void} [cleanup]
* @property {(this: Filter, src: CanvasImageSource, width: number, height: number, ctx: RenderingContext) => boolean} f * @property {(this: Filter, src: HTMLVideoElement, ctx: CanvasRenderingContext2D) => boolean} draw
*/ */
/** /**
@ -1054,9 +1052,7 @@ function Filter(stream, definition) {
/** @type {HTMLCanvasElement} */ /** @type {HTMLCanvasElement} */
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
/** @type {any} */ /** @type {any} */
this.context = this.canvas.getContext( this.context = this.canvas.getContext('2d', {alpha: false});
definition.contextType || '2d',
definition.contextAttributes || null);
/** @type {MediaStream} */ /** @type {MediaStream} */
this.captureStream = null; this.captureStream = null;
/** @type {MediaStream} */ /** @type {MediaStream} */
@ -1093,11 +1089,16 @@ Filter.prototype.start = function() {
this.video.muted = true; this.video.muted = true;
this.video.play(); this.video.play();
if(this.definition.init) if(this.definition.init)
this.definition.init.call(this, this.context); this.definition.init.call(this);
this.timer = setInterval(() => this.draw(), 1000 / this.frameRate); this.timer = setInterval(() => this.draw(), 1000 / this.frameRate);
} }
Filter.prototype.draw = function() { Filter.prototype.draw = function() {
if(this.video.videoWidth === 0 && this.video.videoHeight === 0) {
// video not started yet
return;
}
// check framerate every 30 frames // check framerate every 30 frames
if((this.count % 30) === 0) { if((this.count % 30) === 0) {
let frameRate = 0; let frameRate = 0;
@ -1116,10 +1117,7 @@ Filter.prototype.draw = function() {
let ok = false; let ok = false;
try { try {
ok = this.definition.f.call(this, this.video, ok = this.definition.draw.call(this, this.video, this.context);
this.video.videoWidth,
this.video.videoHeight,
this.context);
} catch(e) { } catch(e) {
console.error(e); console.error(e);
} }
@ -1182,30 +1180,32 @@ function setFilter(c) {
let filters = { let filters = {
'mirror-h': { 'mirror-h': {
description: "Horizontal mirror", description: "Horizontal mirror",
f: function(src, width, height, ctx) { draw: function(src, ctx) {
if(!(ctx instanceof CanvasRenderingContext2D)) if(!(ctx instanceof CanvasRenderingContext2D))
throw new Error('bad context type'); throw new Error('bad context type');
if(ctx.canvas.width !== width || ctx.canvas.height !== height) { if(ctx.canvas.width !== src.videoWidth ||
ctx.canvas.width = width; ctx.canvas.height !== src.videoHeight) {
ctx.canvas.height = height; ctx.canvas.width = src.videoWidth;
ctx.canvas.height = src.videoHeight;
} }
ctx.scale(-1, 1); ctx.scale(-1, 1);
ctx.drawImage(src, -width, 0); ctx.drawImage(src, -src.videoWidth, 0);
ctx.resetTransform(); ctx.resetTransform();
return true; return true;
}, },
}, },
'mirror-v': { 'mirror-v': {
description: "Vertical mirror", description: "Vertical mirror",
f: function(src, width, height, ctx) { draw: function(src, ctx) {
if(!(ctx instanceof CanvasRenderingContext2D)) if(!(ctx instanceof CanvasRenderingContext2D))
throw new Error('bad context type'); throw new Error('bad context type');
if(ctx.canvas.width !== width || ctx.canvas.height !== height) { if(ctx.canvas.width !== src.videoWidth ||
ctx.canvas.width = width; ctx.canvas.height !== src.videoHeight) {
ctx.canvas.height = height; ctx.canvas.width = src.videoWidth;
ctx.canvas.height = src.videoHeight;
} }
ctx.scale(1, -1); ctx.scale(1, -1);
ctx.drawImage(src, 0, -height); ctx.drawImage(src, 0, -src.videoHeight);
ctx.resetTransform(); ctx.resetTransform();
return true; return true;
}, },