function Texture(gl) {
|
this.gl = gl
|
this.texture = gl.createTexture()
|
gl.bindTexture(gl.TEXTURE_2D, this.texture)
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
|
}
|
|
Texture.prototype.bind = function(n, program, name) {
|
var gl = this.gl
|
gl.activeTexture([gl.TEXTURE0, gl.TEXTURE1, gl.TEXTURE2][n])
|
gl.bindTexture(gl.TEXTURE_2D, this.texture)
|
gl.uniform1i(gl.getUniformLocation(program, name), n)
|
}
|
|
Texture.prototype.fill = function(width, height, data) {
|
var gl = this.gl
|
gl.bindTexture(gl.TEXTURE_2D, this.texture)
|
gl.texImage2D(
|
gl.TEXTURE_2D,
|
0,
|
gl.LUMINANCE,
|
width,
|
height,
|
0,
|
gl.LUMINANCE,
|
gl.UNSIGNED_BYTE,
|
data
|
)
|
}
|
|
export function WebGLPlayer(canvas) {
|
this.canvas = canvas
|
this.gl =
|
canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
|
this.initGL()
|
}
|
|
WebGLPlayer.prototype.initGL = function() {
|
if (!this.gl) {
|
console.log('[ER] WebGL not supported.')
|
return
|
}
|
|
var gl = this.gl
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)
|
var program = gl.createProgram()
|
var vertexShaderSource = [
|
'attribute highp vec4 aVertexPosition;',
|
'attribute vec2 aTextureCoord;',
|
'varying highp vec2 vTextureCoord;',
|
'void main(void) {',
|
' gl_Position = aVertexPosition;',
|
' vTextureCoord = aTextureCoord;',
|
'}',
|
].join('\n')
|
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
|
gl.shaderSource(vertexShader, vertexShaderSource)
|
gl.compileShader(vertexShader)
|
var fragmentShaderSource = [
|
'precision highp float;',
|
'varying lowp vec2 vTextureCoord;',
|
'uniform sampler2D YTexture;',
|
'uniform sampler2D UTexture;',
|
'uniform sampler2D VTexture;',
|
'const mat4 YUV2RGB = mat4',
|
'(',
|
' 1.1643828125, 0, 1.59602734375, -.87078515625,',
|
' 1.1643828125, -.39176171875, -.81296875, .52959375,',
|
' 1.1643828125, 2.017234375, 0, -1.081390625,',
|
' 0, 0, 0, 1',
|
');',
|
'void main(void) {',
|
' gl_FragColor = vec4( texture2D(YTexture, vTextureCoord).x, texture2D(UTexture, vTextureCoord).x, texture2D(VTexture, vTextureCoord).x, 1) * YUV2RGB;',
|
'}',
|
].join('\n')
|
|
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
|
gl.shaderSource(fragmentShader, fragmentShaderSource)
|
gl.compileShader(fragmentShader)
|
gl.attachShader(program, vertexShader)
|
gl.attachShader(program, fragmentShader)
|
gl.linkProgram(program)
|
gl.useProgram(program)
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
console.log('[ER] Shader link failed.')
|
}
|
var vertexPositionAttribute = gl.getAttribLocation(program, 'aVertexPosition')
|
gl.enableVertexAttribArray(vertexPositionAttribute)
|
var textureCoordAttribute = gl.getAttribLocation(program, 'aTextureCoord')
|
gl.enableVertexAttribArray(textureCoordAttribute)
|
|
var verticesBuffer = gl.createBuffer()
|
gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer)
|
gl.bufferData(
|
gl.ARRAY_BUFFER,
|
new Float32Array([
|
1.0,
|
1.0,
|
0.0,
|
-1.0,
|
1.0,
|
0.0,
|
1.0,
|
-1.0,
|
0.0,
|
-1.0,
|
-1.0,
|
0.0,
|
]),
|
gl.STATIC_DRAW
|
)
|
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0)
|
var texCoordBuffer = gl.createBuffer()
|
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
|
gl.bufferData(
|
gl.ARRAY_BUFFER,
|
new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0]),
|
gl.STATIC_DRAW
|
)
|
gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0)
|
|
gl.y = new Texture(gl)
|
gl.u = new Texture(gl)
|
gl.v = new Texture(gl)
|
gl.y.bind(0, program, 'YTexture')
|
gl.u.bind(1, program, 'UTexture')
|
gl.v.bind(2, program, 'VTexture')
|
}
|
|
WebGLPlayer.prototype.renderFrame = function(videoFrame, width, height) {
|
if (!this.gl) {
|
console.log('[ER] Render frame failed due to WebGL not supported.')
|
return
|
}
|
|
var gl = this.gl
|
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
|
gl.clearColor(0.0, 0.0, 0.0, 0.0)
|
gl.clear(gl.COLOR_BUFFER_BIT)
|
|
gl.y.fill(width, height, videoFrame.subarray(0, width * height))
|
gl.u.fill(
|
width >> 1,
|
height >> 1,
|
videoFrame.subarray(width * height, (width * height * 5) / 4)
|
)
|
gl.v.fill(
|
width >> 1,
|
height >> 1,
|
videoFrame.subarray((width * height * 5) / 4, (width * height * 3) / 2)
|
)
|
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
|
}
|
|
WebGLPlayer.prototype.fullscreen = function() {
|
let canvas = this.canvas.parentNode.parentNode.parentNode
|
if (canvas.RequestFullScreen) {
|
canvas.RequestFullScreen()
|
} else if (canvas.webkitRequestFullScreen) {
|
canvas.webkitRequestFullScreen()
|
} else if (canvas.mozRequestFullScreen) {
|
canvas.mozRequestFullScreen()
|
} else if (canvas.msRequestFullscreen) {
|
canvas.msRequestFullscreen()
|
} else {
|
alert("This browser doesn't supporter fullscreen")
|
}
|
}
|
|
WebGLPlayer.prototype.exitfullscreen = function() {
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.webkitExitFullscreen) {
|
document.webkitExitFullscreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
} else {
|
alert("Exit fullscreen doesn't work")
|
}
|
}
|
