TRTCMediaMixingManager

TRTCMediaMixingManager

本地混流管理器

Constructor

new TRTCMediaMixingManager()

Methods

bindPreviewArea(windowID, viewOrRegion)

设置视频流预览区域

Examples
// Display in HTML Element
import TRTCCloud from 'trtc-electron-sdk';

const trtcCloud = TRTCCloud.getTRTCShareInstance({
  isIPCMode: true
});

const mediaMixingManager = trtcCloud.getMediaMixingManager();

const windowID = 0; // Use Electron API BrowserWindow.getNativeWindowHandle()
const previewDOM = document.getElementById("preview-local-mixed-media-stream");
mediaMixingManager.bindPreviewArea(windowID, previewDOM);
// Display in a rectangle section
import TRTCCloud from 'trtc-electron-sdk';

const trtcCloud = TRTCCloud.getTRTCShareInstance({
  isIPCMode: true
});

const mediaMixingManager = trtcCloud.getMediaMixingManager();

const windowID = 0; // Use Electron API BrowserWindow.getNativeWindowHandle()
const previewDOM = document.getElementById("preview-local-mixed-media-stream");
const domRect = previewDOM.getBoundingClientRect();
const rect = {
  left: domRect.left * window.devicePixelRatio,
  right: domRect.right * window.devicePixelRatio,
  top: domRect.top * window.devicePixelRatio,
  bottom: domRect.bottom * window.devicePixelRatio
};

mediaMixingManager.bindPreviewArea(windowID, rect);
Parameters:
Name Type Description
windowID Uint8Array required

操作系统层的窗口 ID，Electron 下可以通过 Electron API BrowserWindow.getNativeWindowHandle() 接口获取
viewOrRegion HTMLElement | Rect | null required

本地混流视频显示位置

  • 传入 HTMLElement 元素，则 SDK 将本地混流视频显示在 HTMLElement 元素内，同时支持点击选中、移动、缩放媒体源，支持触发右键菜单事件。HTMLElement 元素必须是块元素。
  • 传入 Rect 显示区域，则 SDK 将本地混流视频显示在 Rect 指定区域内，不支持点击选中、移动、缩放媒体源，不支持触发右键菜单事件，这些功能您可以在 Web 页面中自行实现。
  • 传入 null 则 SDK 将停止显示本地混流视频。

addMediaSource(mediaSource) → {Promise.<Rect>}

添加本地混流媒体源

Parameters:
Name Type Description
mediaSource TRTCMediaSource required

媒体源信息
Returns:
Type
Promise.<Rect>

removeMediaSource(mediaSource) → {Promise.<void>}

删除本地混流媒体源

Parameters:
Name Type Description
mediaSource TRTCMediaSource required

媒体源信息
Returns:
Type
Promise.<void>

updateMediaSource(mediaSource) → {Promise.<void>}

更新本地混流媒体源

Parameters:
Name Type Description
mediaSource TRTCMediaSource required

媒体源信息
Returns:
Type
Promise.<void>

setCameraCaptureParam(cameraID, params)

设置摄像头采集参数

Parameters:
Name Type Description
cameraID string required

摄像头 ID
params TRTCCameraCaptureParams required

摄像头采集参数

setPhoneMirrorParam(phoneMirrorSourceId, param)

设置手机投屏参数

Parameters:
Name Type Description
phoneMirrorSourceId string required

手机投屏媒体源 ID
param TRTCPhoneMirrorParam required

手机投屏参数，目前只支持优先投屏

setScreenCaptureProperty(screenOrWindowID, property)

设置屏幕采集参数

Parameters:
Name Type Description
screenOrWindowID String required

屏幕 ID 或 窗口 ID
property TRTCScreenCaptureProperty required

屏幕采集属性

startPublish() → {Promise.<void>}

本地混流开始推流

Returns:
Type
Promise.<void>

stopPublish() → {Promise.<void>}

本地混流停止推流

Returns:
Type
Promise.<void>

updatePublishParams(params) → {Promise.<void>}

更新本地混流编码参数

Parameters:
Name Type Description
params TRTCMediaMixingEncParam required

推流视频编码参数、背景色等参数
Returns:
Type
Promise.<void>

setStreamLayout(layout)

设置连麦视频流布局

Examples
// 设置自定义连麦布局
import TRTCCloud, { TRTCStreamLayout, TRTCStreamLayoutMode, TRTCVideoFillMode } from 'trtc-electron-sdk';

const trtcCloud = TRTCCloud.getTRTCShareInstance({
  isIPCMode: true
});

const mediaMixingManager = trtcCloud.getMediaMixingManager();
if (mediaMixingManager) {
  const streamLayout: TRTCStreamLayout = {
    "layoutMode": TRTCStreamLayoutMode.Custom,
    "userList": [
      {
        "userId": "", // 本地用户 userId
        "rect": {
          "left": 0,
          "top": 0,
          "right": 296,
          "bottom": 494
        },
        "fillMode": TRTCVideoFillMode.TRTCVideoFillMode_Fill, // 视频填满显示区
        "zOrder": 0
      },
      {
        "userId": "849014",
        "rect": {
          "left": 296,
          "top": 0,
          "right": 592,
          "bottom": 247
        },
        "fillMode": TRTCVideoFillMode.TRTCVideoFillMode_Fill,
        "zOrder": 1
      },
      {
        "userId": "p20",
        "rect": {
          "left": 296,
          "top": 247,
          "right": 592,
          "bottom": 494
        },
        "fillMode": TRTCVideoFillMode.TRTCVideoFillMode_Fill,
        "zOrder": 2
      }
    ]
  };
  mediaMixingManager.setStreamLayout(streamLayout);
}
// 清除连麦布局，本地混流恢复居中填充显示（默认效果）
import TRTCCloud, { TRTCStreamLayout, TRTCStreamLayoutMode, TRTCVideoFillMode } from 'trtc-electron-sdk';

const trtcCloud = TRTCCloud.getTRTCShareInstance({
  isIPCMode: true
});

const mediaMixingManager = trtcCloud.getMediaMixingManager();
if (mediaMixingManager) {
  const streamLayout: TRTCStreamLayout = {
    "layoutMode": TRTCStreamLayoutMode.None
  };
  mediaMixingManager.setStreamLayout(streamLayout);
}
Parameters:
Name Type Description
layout TRTCStreamLayout required

视频流布局信息

on(event, func)

注册事件监听

Parameters:
Name Type Description
event TRTCMediaMixingEvent required

事件名称
func function required

事件回调函数

off(event, func)

取消事件监听

Parameters:
Name Type Description
event TRTCMediaMixingEvent required

事件名
func function required

事件回调函数