mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-01 10:56:42 +02:00
Optimize Clarity Boost shader
This commit is contained in:
redphx
@@ -1,9 +1,15 @@
|
||||
precision mediump float;
|
||||
uniform sampler2D data;
|
||||
uniform vec2 iResolution;
|
||||
|
||||
const int FILTER_UNSHARP_MASKING = 1;
|
||||
const int FILTER_CAS = 2;
|
||||
|
||||
precision highp float;
|
||||
uniform sampler2D data;
|
||||
uniform vec2 iResolution;
|
||||
// constrast = 0.8
|
||||
const float CAS_CONTRAST_PEAK = (-3.0 * 0.8 + 8.0);
|
||||
|
||||
// Luminosity factor
|
||||
const vec3 LUMINOSITY_FACTOR = vec3(0.2126, 0.7152, 0.0722);
|
||||
|
||||
uniform int filterId;
|
||||
uniform float sharpenFactor;
|
||||
@@ -11,27 +17,24 @@ uniform float brightness;
|
||||
uniform float contrast;
|
||||
uniform float saturation;
|
||||
|
||||
vec3 textureAt(sampler2D tex, vec2 coord) {
|
||||
return texture2D(tex, coord / iResolution.xy).rgb;
|
||||
}
|
||||
vec3 clarityBoost(sampler2D tex, vec2 coord) {
|
||||
vec2 texelSize = 1.0 / iResolution.xy;
|
||||
|
||||
vec3 clarityBoost(sampler2D tex, vec2 coord)
|
||||
{
|
||||
// Load a collection of samples in a 3x3 neighorhood, where e is the current pixel.
|
||||
// a b c
|
||||
// d e f
|
||||
// g h i
|
||||
vec3 a = textureAt(tex, coord + vec2(-1, 1));
|
||||
vec3 b = textureAt(tex, coord + vec2(0, 1));
|
||||
vec3 c = textureAt(tex, coord + vec2(1, 1));
|
||||
vec3 a = texture2D(tex, coord + texelSize * vec2(-1, 1)).rgb;
|
||||
vec3 b = texture2D(tex, coord + texelSize * vec2(0, 1)).rgb;
|
||||
vec3 c = texture2D(tex, coord + texelSize * vec2(1, 1)).rgb;
|
||||
|
||||
vec3 d = textureAt(tex, coord + vec2(-1, 0));
|
||||
vec3 e = textureAt(tex, coord);
|
||||
vec3 f = textureAt(tex, coord + vec2(1, 0));
|
||||
vec3 d = texture2D(tex, coord + texelSize * vec2(-1, 0)).rgb;
|
||||
vec3 e = texture2D(tex, coord).rgb;
|
||||
vec3 f = texture2D(tex, coord + texelSize * vec2(1, 0)).rgb;
|
||||
|
||||
vec3 g = textureAt(tex, coord + vec2(-1, -1));
|
||||
vec3 h = textureAt(tex, coord + vec2(0, -1));
|
||||
vec3 i = textureAt(tex, coord + vec2(1, -1));
|
||||
vec3 g = texture2D(tex, coord + texelSize * vec2(-1, -1)).rgb;
|
||||
vec3 h = texture2D(tex, coord + texelSize * vec2(0, -1)).rgb;
|
||||
vec3 i = texture2D(tex, coord + texelSize * vec2(1, -1)).rgb;
|
||||
|
||||
if (filterId == FILTER_CAS) {
|
||||
// Soft min and max.
|
||||
@@ -54,10 +57,7 @@ vec3 clarityBoost(sampler2D tex, vec2 coord)
|
||||
// Shaping amount of sharpening.
|
||||
amplifyRgb = inversesqrt(amplifyRgb);
|
||||
|
||||
float contrast = 0.8;
|
||||
float peak = -3.0 * contrast + 8.0;
|
||||
vec3 weightRgb = -(1.0 / (amplifyRgb * peak));
|
||||
|
||||
vec3 weightRgb = -(1.0 / (amplifyRgb * CAS_CONTRAST_PEAK));
|
||||
vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
|
||||
|
||||
// 0 w 0
|
||||
@@ -70,9 +70,10 @@ vec3 clarityBoost(sampler2D tex, vec2 coord)
|
||||
|
||||
return outColor;
|
||||
} else if (filterId == FILTER_UNSHARP_MASKING) {
|
||||
vec3 gaussianBlur = (a * 1.0 + b * 2.0 + c * 1.0 +
|
||||
d * 2.0 + e * 4.0 + f * 2.0 +
|
||||
g * 1.0 + h * 2.0 + i * 1.0) / 16.0;
|
||||
vec3 gaussianBlur = (a + c + g + i) * 1.0 +
|
||||
(b + d + f + h) * 2.0 +
|
||||
e * 4.0;
|
||||
gaussianBlur /= 16.0;
|
||||
|
||||
// Return edge detection
|
||||
return e + (e - gaussianBlur) * sharpenFactor / 3.0;
|
||||
@@ -81,40 +82,30 @@ vec3 clarityBoost(sampler2D tex, vec2 coord)
|
||||
return e;
|
||||
}
|
||||
|
||||
vec3 adjustBrightness(vec3 color) {
|
||||
return (1.0 + brightness) * color;
|
||||
}
|
||||
|
||||
vec3 adjustContrast(vec3 color) {
|
||||
return 0.5 + (1.0 + contrast) * (color - 0.5);
|
||||
}
|
||||
|
||||
vec3 adjustSaturation(vec3 color) {
|
||||
const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
|
||||
vec3 grayscale = vec3(dot(color, luminosityFactor));
|
||||
|
||||
return mix(grayscale, color, 1.0 + saturation);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec3 color;
|
||||
vec2 uv = gl_FragCoord.xy / iResolution.xy;
|
||||
|
||||
if (sharpenFactor > 0.0) {
|
||||
color = clarityBoost(data, gl_FragCoord.xy);
|
||||
color = clarityBoost(data, uv);
|
||||
} else {
|
||||
color = textureAt(data, gl_FragCoord.xy);
|
||||
color = texture2D(data, uv).rgb;
|
||||
}
|
||||
|
||||
if (saturation != 0.0) {
|
||||
color = adjustSaturation(color);
|
||||
// Saturation
|
||||
if (saturation != 1.0) {
|
||||
vec3 grayscale = vec3(dot(color, LUMINOSITY_FACTOR));
|
||||
color = mix(grayscale, color, saturation);
|
||||
}
|
||||
|
||||
if (contrast != 0.0) {
|
||||
color = adjustContrast(color);
|
||||
// Contrast
|
||||
if (contrast != 1.0) {
|
||||
color = 0.5 + contrast * (color - 0.5);
|
||||
}
|
||||
|
||||
if (brightness != 0.0) {
|
||||
color = adjustBrightness(color);
|
||||
// Brightness
|
||||
if (brightness != 1.0) {
|
||||
color = brightness * color;
|
||||
}
|
||||
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
attribute vec2 position;
|
||||
attribute vec4 position;
|
||||
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0, 1);
|
||||
gl_Position = position;
|
||||
}
|
||||
|
||||
@@ -8,16 +8,16 @@ import { getPref } from "@/utils/settings-storages/global-settings-storage";
|
||||
const LOG_TAG = 'WebGL2Player';
|
||||
|
||||
export class WebGL2Player {
|
||||
#$video: HTMLVideoElement;
|
||||
#$canvas: HTMLCanvasElement;
|
||||
private $video: HTMLVideoElement;
|
||||
private $canvas: HTMLCanvasElement;
|
||||
|
||||
#gl: WebGL2RenderingContext | null = null;
|
||||
#resources: Array<any> = [];
|
||||
#program: WebGLProgram | null = null;
|
||||
private gl: WebGL2RenderingContext | null = null;
|
||||
private resources: Array<any> = [];
|
||||
private program: WebGLProgram | null = null;
|
||||
|
||||
#stopped: boolean = false;
|
||||
private stopped: boolean = false;
|
||||
|
||||
#options = {
|
||||
private options = {
|
||||
filterId: 1,
|
||||
sharpenFactor: 0,
|
||||
brightness: 0.0,
|
||||
@@ -25,112 +25,112 @@ export class WebGL2Player {
|
||||
saturation: 0.0,
|
||||
};
|
||||
|
||||
#animFrameId: number | null = null;
|
||||
private animFrameId: number | null = null;
|
||||
|
||||
constructor($video: HTMLVideoElement) {
|
||||
BxLogger.info(LOG_TAG, 'Initialize');
|
||||
this.#$video = $video;
|
||||
this.$video = $video;
|
||||
|
||||
const $canvas = document.createElement('canvas');
|
||||
$canvas.width = $video.videoWidth;
|
||||
$canvas.height = $video.videoHeight;
|
||||
this.#$canvas = $canvas;
|
||||
this.$canvas = $canvas;
|
||||
|
||||
this.#setupShaders();
|
||||
this.#setupRendering();
|
||||
this.setupShaders();
|
||||
this.setupRendering();
|
||||
|
||||
$video.insertAdjacentElement('afterend', $canvas);
|
||||
}
|
||||
|
||||
setFilter(filterId: number, update = true) {
|
||||
this.#options.filterId = filterId;
|
||||
this.options.filterId = filterId;
|
||||
update && this.updateCanvas();
|
||||
}
|
||||
|
||||
setSharpness(sharpness: number, update = true) {
|
||||
this.#options.sharpenFactor = sharpness;
|
||||
this.options.sharpenFactor = sharpness;
|
||||
update && this.updateCanvas();
|
||||
}
|
||||
|
||||
setBrightness(brightness: number, update = true) {
|
||||
this.#options.brightness = (brightness - 100) / 100;
|
||||
this.options.brightness = 1 + (brightness - 100) / 100;
|
||||
update && this.updateCanvas();
|
||||
}
|
||||
|
||||
setContrast(contrast: number, update = true) {
|
||||
this.#options.contrast = (contrast - 100) / 100;
|
||||
this.options.contrast = 1 + (contrast - 100) / 100;
|
||||
update && this.updateCanvas();
|
||||
}
|
||||
|
||||
setSaturation(saturation: number, update = true) {
|
||||
this.#options.saturation = (saturation - 100) / 100;
|
||||
this.options.saturation = 1 + (saturation - 100) / 100;
|
||||
update && this.updateCanvas();
|
||||
}
|
||||
|
||||
getCanvas() {
|
||||
return this.#$canvas;
|
||||
return this.$canvas;
|
||||
}
|
||||
|
||||
updateCanvas() {
|
||||
const gl = this.#gl!;
|
||||
const program = this.#program!;
|
||||
const gl = this.gl!;
|
||||
const program = this.program!;
|
||||
|
||||
gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.#$canvas.width, this.#$canvas.height);
|
||||
gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.$canvas.width, this.$canvas.height);
|
||||
|
||||
gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.#options.filterId);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.#options.sharpenFactor);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.#options.brightness);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.#options.contrast);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.#options.saturation);
|
||||
gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.options.filterId);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.options.sharpenFactor);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.options.brightness);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.options.contrast);
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.options.saturation);
|
||||
}
|
||||
|
||||
drawFrame() {
|
||||
const gl = this.#gl!;
|
||||
const $video = this.#$video;
|
||||
const gl = this.gl!;
|
||||
const $video = this.$video;
|
||||
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||
}
|
||||
|
||||
#setupRendering() {
|
||||
private setupRendering() {
|
||||
let animate: any;
|
||||
|
||||
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
|
||||
const $video = this.#$video;
|
||||
const $video = this.$video;
|
||||
animate = () => {
|
||||
if (this.#stopped) {
|
||||
if (this.stopped) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.drawFrame();
|
||||
this.#animFrameId = $video.requestVideoFrameCallback(animate);
|
||||
this.animFrameId = $video.requestVideoFrameCallback(animate);
|
||||
}
|
||||
|
||||
this.#animFrameId = $video.requestVideoFrameCallback(animate);
|
||||
this.animFrameId = $video.requestVideoFrameCallback(animate);
|
||||
} else {
|
||||
animate = () => {
|
||||
if (this.#stopped) {
|
||||
if (this.stopped) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.drawFrame();
|
||||
this.#animFrameId = requestAnimationFrame(animate);
|
||||
this.animFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
this.#animFrameId = requestAnimationFrame(animate);
|
||||
this.animFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
#setupShaders() {
|
||||
private setupShaders() {
|
||||
BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
|
||||
|
||||
const gl = this.#$canvas.getContext('webgl', {
|
||||
const gl = this.$canvas.getContext('webgl', {
|
||||
isBx: true,
|
||||
antialias: true,
|
||||
alpha: false,
|
||||
powerPreference: getPref(PrefKey.VIDEO_POWER_PREFERENCE),
|
||||
}) as WebGL2RenderingContext;
|
||||
this.#gl = gl;
|
||||
this.gl = gl;
|
||||
|
||||
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
|
||||
|
||||
@@ -145,7 +145,7 @@ export class WebGL2Player {
|
||||
|
||||
// Create and link program
|
||||
const program = gl.createProgram()!;
|
||||
this.#program = program;
|
||||
this.program = program;
|
||||
|
||||
gl.attachShader(program, vShader);
|
||||
gl.attachShader(program, fShader);
|
||||
@@ -162,7 +162,7 @@ export class WebGL2Player {
|
||||
|
||||
// Vertices: A screen-filling quad made from two triangles
|
||||
const buffer = gl.createBuffer();
|
||||
this.#resources.push(buffer);
|
||||
this.resources.push(buffer);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
||||
@@ -179,7 +179,7 @@ export class WebGL2Player {
|
||||
|
||||
// Texture to contain the video data
|
||||
const texture = gl.createTexture();
|
||||
this.#resources.push(texture);
|
||||
this.resources.push(texture);
|
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
||||
@@ -197,26 +197,26 @@ export class WebGL2Player {
|
||||
|
||||
resume() {
|
||||
this.stop();
|
||||
this.#stopped = false;
|
||||
this.stopped = false;
|
||||
BxLogger.info(LOG_TAG, 'Resume');
|
||||
|
||||
this.#$canvas.classList.remove('bx-gone');
|
||||
this.#setupRendering();
|
||||
this.$canvas.classList.remove('bx-gone');
|
||||
this.setupRendering();
|
||||
}
|
||||
|
||||
stop() {
|
||||
BxLogger.info(LOG_TAG, 'Stop');
|
||||
this.#$canvas.classList.add('bx-gone');
|
||||
this.$canvas.classList.add('bx-gone');
|
||||
|
||||
this.#stopped = true;
|
||||
if (this.#animFrameId) {
|
||||
this.stopped = true;
|
||||
if (this.animFrameId) {
|
||||
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
|
||||
this.#$video.cancelVideoFrameCallback(this.#animFrameId);
|
||||
this.$video.cancelVideoFrameCallback(this.animFrameId);
|
||||
} else {
|
||||
cancelAnimationFrame(this.#animFrameId);
|
||||
cancelAnimationFrame(this.animFrameId);
|
||||
}
|
||||
|
||||
this.#animFrameId = null;
|
||||
this.animFrameId = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,11 +224,11 @@ export class WebGL2Player {
|
||||
BxLogger.info(LOG_TAG, 'Destroy');
|
||||
this.stop();
|
||||
|
||||
const gl = this.#gl;
|
||||
const gl = this.gl;
|
||||
if (gl) {
|
||||
gl.getExtension('WEBGL_lose_context')?.loseContext();
|
||||
|
||||
for (const resource of this.#resources) {
|
||||
for (const resource of this.resources) {
|
||||
if (resource instanceof WebGLProgram) {
|
||||
gl.useProgram(null);
|
||||
gl.deleteProgram(resource);
|
||||
@@ -241,14 +241,14 @@ export class WebGL2Player {
|
||||
}
|
||||
}
|
||||
|
||||
this.#gl = null;
|
||||
this.gl = null;
|
||||
}
|
||||
|
||||
if (this.#$canvas.isConnected) {
|
||||
this.#$canvas.parentElement?.removeChild(this.#$canvas);
|
||||
if (this.$canvas.isConnected) {
|
||||
this.$canvas.parentElement?.removeChild(this.$canvas);
|
||||
}
|
||||
|
||||
this.#$canvas.width = 1;
|
||||
this.#$canvas.height = 1;
|
||||
this.$canvas.width = 1;
|
||||
this.$canvas.height = 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,35 +17,35 @@ export type StreamPlayerOptions = Partial<{
|
||||
}>;
|
||||
|
||||
export class StreamPlayer {
|
||||
#$video: HTMLVideoElement;
|
||||
#playerType: StreamPlayerType = StreamPlayerType.VIDEO;
|
||||
private $video: HTMLVideoElement;
|
||||
private playerType: StreamPlayerType = StreamPlayerType.VIDEO;
|
||||
|
||||
#options: StreamPlayerOptions = {};
|
||||
private options: StreamPlayerOptions = {};
|
||||
|
||||
#webGL2Player: WebGL2Player | null = null;
|
||||
private webGL2Player: WebGL2Player | null = null;
|
||||
|
||||
#$videoCss: HTMLStyleElement | null = null;
|
||||
#$usmMatrix: SVGFEConvolveMatrixElement | null = null;
|
||||
private $videoCss: HTMLStyleElement | null = null;
|
||||
private $usmMatrix: SVGFEConvolveMatrixElement | null = null;
|
||||
|
||||
constructor($video: HTMLVideoElement, type: StreamPlayerType, options: StreamPlayerOptions) {
|
||||
this.#setupVideoElements();
|
||||
this.setupVideoElements();
|
||||
|
||||
this.#$video = $video;
|
||||
this.#options = options || {};
|
||||
this.$video = $video;
|
||||
this.options = options || {};
|
||||
this.setPlayerType(type);
|
||||
}
|
||||
|
||||
#setupVideoElements() {
|
||||
this.#$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
|
||||
if (this.#$videoCss) {
|
||||
this.#$usmMatrix = this.#$videoCss.querySelector('#bx-filter-usm-matrix') as any;
|
||||
private setupVideoElements() {
|
||||
this.$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
|
||||
if (this.$videoCss) {
|
||||
this.$usmMatrix = this.$videoCss.querySelector('#bx-filter-usm-matrix') as any;
|
||||
return;
|
||||
}
|
||||
|
||||
const $fragment = document.createDocumentFragment();
|
||||
|
||||
this.#$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
|
||||
$fragment.appendChild(this.#$videoCss);
|
||||
this.$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
|
||||
$fragment.appendChild(this.$videoCss);
|
||||
|
||||
// Setup SVG filters
|
||||
const $svg = CE('svg', {
|
||||
@@ -56,7 +56,7 @@ export class StreamPlayer {
|
||||
CE('filter', {
|
||||
id: 'bx-filter-usm',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
}, this.#$usmMatrix = CE('feConvolveMatrix', {
|
||||
}, this.$usmMatrix = CE('feConvolveMatrix', {
|
||||
id: 'bx-filter-usm-matrix',
|
||||
order: '3',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
@@ -67,29 +67,29 @@ export class StreamPlayer {
|
||||
document.documentElement.appendChild($fragment);
|
||||
}
|
||||
|
||||
#getVideoPlayerFilterStyle() {
|
||||
private getVideoPlayerFilterStyle() {
|
||||
const filters = [];
|
||||
|
||||
const sharpness = this.#options.sharpness || 0;
|
||||
if (this.#options.processing === StreamVideoProcessing.USM && sharpness != 0) {
|
||||
const sharpness = this.options.sharpness || 0;
|
||||
if (this.options.processing === StreamVideoProcessing.USM && sharpness != 0) {
|
||||
const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
|
||||
const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
|
||||
this.#$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
|
||||
this.$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
|
||||
|
||||
filters.push(`url(#bx-filter-usm)`);
|
||||
}
|
||||
|
||||
const saturation = this.#options.saturation || 100;
|
||||
const saturation = this.options.saturation || 100;
|
||||
if (saturation != 100) {
|
||||
filters.push(`saturate(${saturation}%)`);
|
||||
}
|
||||
|
||||
const contrast = this.#options.contrast || 100;
|
||||
const contrast = this.options.contrast || 100;
|
||||
if (contrast != 100) {
|
||||
filters.push(`contrast(${contrast}%)`);
|
||||
}
|
||||
|
||||
const brightness = this.#options.brightness || 100;
|
||||
const brightness = this.options.brightness || 100;
|
||||
if (brightness != 100) {
|
||||
filters.push(`brightness(${brightness}%)`);
|
||||
}
|
||||
@@ -97,14 +97,14 @@ export class StreamPlayer {
|
||||
return filters.join(' ');
|
||||
}
|
||||
|
||||
#resizePlayer() {
|
||||
private resizePlayer() {
|
||||
const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
|
||||
const $video = this.#$video;
|
||||
const $video = this.$video;
|
||||
const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
|
||||
|
||||
let $webGL2Canvas;
|
||||
if (this.#playerType == StreamPlayerType.WEBGL2) {
|
||||
$webGL2Canvas = this.#webGL2Player?.getCanvas()!;
|
||||
if (this.playerType == StreamPlayerType.WEBGL2) {
|
||||
$webGL2Canvas = this.webGL2Player?.getCanvas()!;
|
||||
}
|
||||
|
||||
let targetWidth;
|
||||
@@ -166,67 +166,67 @@ export class StreamPlayer {
|
||||
}
|
||||
|
||||
// Update video dimensions
|
||||
if (isNativeTouchGame && this.#playerType == StreamPlayerType.WEBGL2) {
|
||||
if (isNativeTouchGame && this.playerType == StreamPlayerType.WEBGL2) {
|
||||
window.BX_EXPOSED.streamSession.updateDimensions();
|
||||
}
|
||||
}
|
||||
|
||||
setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
|
||||
if (this.#playerType !== type) {
|
||||
if (this.playerType !== type) {
|
||||
// Switch from Video -> WebGL2
|
||||
if (type === StreamPlayerType.WEBGL2) {
|
||||
// Initialize WebGL2 player
|
||||
if (!this.#webGL2Player) {
|
||||
this.#webGL2Player = new WebGL2Player(this.#$video);
|
||||
if (!this.webGL2Player) {
|
||||
this.webGL2Player = new WebGL2Player(this.$video);
|
||||
} else {
|
||||
this.#webGL2Player.resume();
|
||||
this.webGL2Player.resume();
|
||||
}
|
||||
|
||||
this.#$videoCss!.textContent = '';
|
||||
this.$videoCss!.textContent = '';
|
||||
|
||||
this.#$video.classList.add('bx-pixel');
|
||||
this.$video.classList.add('bx-pixel');
|
||||
} else {
|
||||
// Cleanup WebGL2 Player
|
||||
this.#webGL2Player?.stop();
|
||||
this.webGL2Player?.stop();
|
||||
|
||||
this.#$video.classList.remove('bx-pixel');
|
||||
this.$video.classList.remove('bx-pixel');
|
||||
}
|
||||
}
|
||||
|
||||
this.#playerType = type;
|
||||
this.playerType = type;
|
||||
refreshPlayer && this.refreshPlayer();
|
||||
}
|
||||
|
||||
setOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
|
||||
this.#options = options;
|
||||
this.options = options;
|
||||
refreshPlayer && this.refreshPlayer();
|
||||
}
|
||||
|
||||
updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
|
||||
this.#options = Object.assign(this.#options, options);
|
||||
this.options = Object.assign(this.options, options);
|
||||
refreshPlayer && this.refreshPlayer();
|
||||
}
|
||||
|
||||
getPlayerElement(playerType?: StreamPlayerType) {
|
||||
if (typeof playerType === 'undefined') {
|
||||
playerType = this.#playerType;
|
||||
playerType = this.playerType;
|
||||
}
|
||||
|
||||
if (playerType === StreamPlayerType.WEBGL2) {
|
||||
return this.#webGL2Player?.getCanvas();
|
||||
return this.webGL2Player?.getCanvas();
|
||||
}
|
||||
|
||||
return this.#$video;
|
||||
return this.$video;
|
||||
}
|
||||
|
||||
getWebGL2Player() {
|
||||
return this.#webGL2Player;
|
||||
return this.webGL2Player;
|
||||
}
|
||||
|
||||
refreshPlayer() {
|
||||
if (this.#playerType === StreamPlayerType.WEBGL2) {
|
||||
const options = this.#options;
|
||||
const webGL2Player = this.#webGL2Player!;
|
||||
if (this.playerType === StreamPlayerType.WEBGL2) {
|
||||
const options = this.options;
|
||||
const webGL2Player = this.webGL2Player!;
|
||||
|
||||
if (options.processing === StreamVideoProcessing.USM) {
|
||||
webGL2Player.setFilter(1);
|
||||
@@ -241,7 +241,7 @@ export class StreamPlayer {
|
||||
webGL2Player.setContrast(options.contrast || 100);
|
||||
webGL2Player.setBrightness(options.brightness || 100);
|
||||
} else {
|
||||
let filters = this.#getVideoPlayerFilterStyle();
|
||||
let filters = this.getVideoPlayerFilterStyle();
|
||||
let videoCss = '';
|
||||
if (filters) {
|
||||
videoCss += `filter: ${filters} !important;`;
|
||||
@@ -257,26 +257,26 @@ export class StreamPlayer {
|
||||
css = `#game-stream video { ${videoCss} }`;
|
||||
}
|
||||
|
||||
this.#$videoCss!.textContent = css;
|
||||
this.$videoCss!.textContent = css;
|
||||
}
|
||||
|
||||
this.#resizePlayer();
|
||||
this.resizePlayer();
|
||||
}
|
||||
|
||||
reloadPlayer() {
|
||||
this.#cleanUpWebGL2Player();
|
||||
this.cleanUpWebGL2Player();
|
||||
|
||||
this.#playerType = StreamPlayerType.VIDEO;
|
||||
this.playerType = StreamPlayerType.VIDEO;
|
||||
this.setPlayerType(StreamPlayerType.WEBGL2, false);
|
||||
}
|
||||
|
||||
#cleanUpWebGL2Player() {
|
||||
private cleanUpWebGL2Player() {
|
||||
// Clean up WebGL2 Player
|
||||
this.#webGL2Player?.destroy();
|
||||
this.#webGL2Player = null;
|
||||
this.webGL2Player?.destroy();
|
||||
this.webGL2Player = null;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.#cleanUpWebGL2Player();
|
||||
this.cleanUpWebGL2Player();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user