webgl_video_processor/video_capturer/rtmp_video_capturer.js

// 获取 video 元素的宽度和高度
var rtmp_videoChannelWidth;
var rtmp_videoChannelHeight;
// 创建 ImageCapture 对象
var rtmp_videoChannelCapture;
var rtmp_usVideoElement;
var rtmp_captureCanvas;

/// 初始化 imageCapture 并返回 video 宽高
/// [video_id] 传入需要捕获的 video 元素的 id
function initRTMPVideoCapture(video_id) {
  try {
    // 获取video元素
    rtmp_usVideoElement = document.getElementById(video_id);

    try {
      // 获取video流
      let stream = rtmp_usVideoElement.captureStream();
      let track = stream.getVideoTracks()[0];
      // 获取video的宽度和高度
      const settings = track.getSettings();
      rtmp_videoChannelWidth = settings.width;
      rtmp_videoChannelHeight = settings.height;

      // 创建ImageCapture对象
      rtmp_videoChannelCapture = new ImageCapture(track);
    } catch (error) {
      rtmp_videoChannelCapture = null;
      // 获取video元素的宽度和高度
      rtmp_videoChannelWidth = rtmp_usVideoElement.videoWidth;
      rtmp_videoChannelHeight = rtmp_usVideoElement.videoHeight;
    }

    // 初始化canvas
    rtmp_captureCanvas = document.createElement("canvas");
    rtmp_captureCanvas.width = rtmp_videoChannelWidth;
    rtmp_captureCanvas.height = rtmp_videoChannelHeight;
    return [rtmp_videoChannelWidth, rtmp_videoChannelHeight];
  } catch (error) {
    return [0, 0];
  }
}

function setRTMPClipSize(width, height) {
  rtmp_captureCanvas.width = width;
  rtmp_captureCanvas.height = height;
}

/// 捕获视频帧并转换为二进制数组返回
function captureRTMPOneFrame() {
  if (rtmp_videoChannelCapture == null) {
    const context = rtmp_captureCanvas.getContext("2d");
    context.drawImage(
      rtmp_usVideoElement,
      0,
      0,
      rtmp_videoChannelWidth,
      rtmp_videoChannelHeight
    );
    const dataUrl = rtmp_captureCanvas.toDataURL("image/jpeg");
    const binary = atob(dataUrl.split(",")[1]);
    const uint8Array = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
      uint8Array[i] = binary.charCodeAt(i);
    }
    return Promise.resolve(uint8Array);
  } else {
    const promise = rtmp_videoChannelCapture.grabFrame().then((imageBitmap) => {
      const context = rtmp_captureCanvas.getContext("2d");
      context.drawImage(
        imageBitmap,
        0,
        0,
        rtmp_videoChannelWidth,
        rtmp_videoChannelHeight
      );
      const dataUrl = rtmp_captureCanvas.toDataURL("image/jpeg");
      console.log(dataUrl);
      const binary = atob(dataUrl.split(",")[1]);
      const uint8Array = new Uint8Array(binary.length);
      for (let i = 0; i < binary.length; i++) {
        uint8Array[i] = binary.charCodeAt(i);
      }
      return uint8Array;
    });
    return promise;
  }
}

/// 释放 imageCapture 对象
function disposeRTMPVideoCapture() {
  rtmp_videoChannelCapture = null;
  rtmp_usVideoElement = null;
  rtmp_captureCanvas = null;
  console.log("rtmp_videoChannelCapture has been disposed");
}