fis_lib_media_rt/wwwroot/js/rtmp_video_capturer.js

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

  /// 初始化 imageCapture 并返回 video 宽高
  /// [video_id] 传入需要捕获的 video/Canvas 元素的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");
        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");
  }

  window.rtmpCapturer = {
    init: initRTMPVideoCapture,
    setClipSize: setRTMPClipSize,
    captureOne: captureRTMPOneFrame,
    release: disposeRTMPVideoCapture,
  }
})(window);