TUIMediaMixingManager

// 使用 npm
npm i @tencentcloud/tuiroom-engine-electron@2.4.0-alpha.3 --save

// 使用 pnpm
pnpm i @tencentcloud/tuiroom-engine-electron@2.4.0-alpha.3 --save

// 使用 yarn
yarn add @tencentcloud/tuiroom-engine-electron@2.4.0-alpha.3


import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();

async function initMediaServer() {
  const isPackaged = location.href.startsWith("file"); // Same with Electron `app.isPackaged`
  const resourcesPath = (globalThis as any).process.resourcesPath;
  let mediaServerPath = '';
  if (isPackaged) {
    mediaServerPath = `${resourcesPath}\\\\liteav_media_server.exe`;
  } else {
    const appPath = ''; // Value from Electron main process: app.getAppPath()
    mediaServerPath = `${appPath}\\\\node_modules\\\\trtc-electron-sdk\\\\build\\\\Release\\\\liteav_media_server.exe`;
  }
  mediaMixingManager.setMediaServerPath(mediaServerPath);
}

initMediaServer();

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();

// Value from Electron main BrowserWindow.getNativeWindowHandle()
const nativeWindowHandle = new Uint8Array(8);

const previewDOMNode = document.getElementByID("preview-media-mixing");
const clientRect = previewDOMNode.getBoundingClientRect();
mediaMixingManager.setDisplayParams(window.nativeWindowHandle, {
  left: clientRect.left * window.devicePixelRatio,      // Notice: window.devicePixelRatio
  right: clientRect.right * window.devicePixelRatio,    // Notice: window.devicePixelRatio
  top: clientRect.top * window.devicePixelRatio,        // Notice: window.devicePixelRatio
  bottom: clientRect.bottom * window.devicePixelRatio,  // Notice: window.devicePixelRatio
});

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
const mediaSource:TUIMediaSource = {
  sourceType: TUIMediaSourceType.kCamera,
  sourceId: '',                            // camera ID, screen ID, window ID or image path
  zOrder: 1,                               // should be unique among all media sources
  rect: {
    left: 0,
    top: 0,
    right: 640,
    bottom: 360
  },
};
mediaMixingManager.addMediaSource(mediaSource);

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
const mediaSource:TUIMediaSource = {
  sourceType: TUIMediaSourceType.kCamera,  // required
  sourceId: '',                            // required
  zOrder: 1,                               // any valid value
  rect: {                                  // any valid value
    left: 0,
    top: 0,
    right: 640,
    bottom: 360
  },
};
mediaMixingManager.removeMediaSource(mediaSource);

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
const mediaSource:TUIMediaSource = {
  sourceType: TUIMediaSourceType.kCamera,  // required
  sourceId: '',                            // required
  zOrder: 1,                               // should be unique among all media sources
  rect: {                                  // any valid value
    left: 0,
    top: 0,
    right: 640,
    bottom: 360
  },
};
mediaMixingManager.updateMediaSource(mediaSource);

import TUIRoomEngine, { TUIMediaMixingManager, TUICameraCaptureMode } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
mediaMixingManager.setCameraCaptureParam('<camera ID>', {
  mode: TUICameraCaptureMode.kCameraCaptureManual,
  width: 1280,
  height: 720,
});

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
mediaMixingManager.startPublish();

import TUIRoomEngine, { TUIMediaMixingManager } from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
mediaMixingManager.stopPublish();

import TUIRoomEngine, {
  TUIMediaMixingManager,
  TUIResolutionMode,
  TUIVideoResolution 
} from '@tencentcloud/tuiroom-engine-electron';

const mediaMixingManager: TUIMediaMixingManager = TUIRoomEngine.getMediaMixingManager();
mediaMixingManager.updatePublishParams({
  inputSourceList: [], // TUIMediaSource[], can be empty
  videoEncoderParams: {
    videoResolution: TUIVideoResolution.kVideoResolution_1920_1080,
    resMode: TUIResolutionMode.kResolutionMode_Landscape,
    videoFps: 30,
    videoBitrate: 3000,
    minVideoBitrate: 2000,
    enableAdjustRes: true
  },
  canvasColor: 0xc6c6c6, // integer number of RGB
});