webrtc视频处理之webgl

最新推荐文章于 2026-03-20 00:04:18 发布

原创最新推荐文章于 2026-03-20 00:04:18 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webrtc #音视频 #webgl

文章介绍了如何结合WebGL和WebRTC技术，在浏览器中对视频通话进行实时美颜处理。首先获取视频流，然后创建WebGL上下文，接着编写和链接顶点及片段着色器程序，用于图像处理。最后，将Canvas的输出捕获到新的视频流中，实现美颜后的视频传输。

WebGL是一种基于OpenGL ES 2.0的3D绘图标准，可以通过JavaScript API在浏览器中渲染3D图形。在使用WebRTC进行视频通话时，我们可以通过WebGL在视频中进行美颜等特效处理。

1、获取视频流

使用getUserMedia()函数或者其他获取视频流的方法从本地或远程获取视频流

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then((stream) => {
  const video = document.createElement('video');
  video.srcObject = stream;
  video.play();
  // ...
});

2、创建 WebGL 上下文

WebGL 使用 Canvas 元素作为图形输出的目标，所以需要获取到 canvas 的 WebGL 上下文。可以使用 canvas.getContext('webgl') 方法来获取 WebGL 上下文。

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

3、编写着色器程序

// 顶点着色器代码
const vertexShaderSource = `
  attribute vec2 a_position;
  attribute vec2 a_texCoord;
  varying vec2 v_texCoord;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    v_texCoord = a_texCoord;
  }
`;

// 片段着色器代码
const fragmentShaderSource = `
  precision highp float;
  uniform sampler2D u_image;
  varying vec2 v_texCoord;
 
  void main() {
    vec4 rgba = texture2D(u_image,v_texCoord);
    gl_FragColor=vec4(rgba.r,rgba.g,rgba.b,rgba.a);
  }
`;

4、编写 WebGL 程序

将着色器编译为着色器程序并链接到 WebGL 上下文中，可以在 WebGL 中使用它们进行图像处理。WebGL 使用缓冲区来传递数据到着色器。

// 创建着色器程序的函数
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(vertexShader));
    return null;
  }
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);
  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(fragmentShader));
    return null;
  }
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program));
    return null;
  }
  return program;
}

// 创建着色器程序
const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);

// 获取着色器程序中的变量和属性
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord');
const imageUniformLocation = gl.getUniformLocation(program, 'u_image');

// 创建纹理对象
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 创建顶点和纹理坐标缓冲区
const positionBuffer = gl.createBuffer();
const texCoordBuffer = gl.createBuffer();

// 向顶点和纹理坐标缓冲区写入数据
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0, 1.0,
    1.0, 1.0
]), gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0.0, 1.0,
    1.0, 1.0,
    0.0, 0.0,
    1.0, 0.0
]), gl.STATIC_DRAW);

// 加载视频并绑定到纹理对象上
video.addEventListener('play', function() {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;
  setInterval(function() {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
    draw();
  }, 1000 / 30);
});

// 绘制函数
function draw() {
  gl.useProgram(program);

  // 设置顶点和纹理坐标
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  gl.enableVertexAttribArray(texCoordAttributeLocation);
  gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  gl.uniform1i(imageUniformLocation, 0);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

5、将 Canvas 输出到视频流中

const canvasStream = canvas.captureStream(); 
const videoTrack = canvasStream.getVideoTracks()[0];
const audioTrack = stream.getAudioTracks()[0];

const outputStream = new MediaStream([videoTrack, audioTrack]);