Vonage发布配置insertDefaultUI为false时mirror:true不生效问题咨询

问题解答 #

insertDefaultUI: false和mirror: true两个参数本身不存在冲突，可以同时配置。你遇到的mirror配置不生效的问题属于该场景下的预期表现：

• mirror参数的默认生效范围仅覆盖OpenTok SDK内置默认UI渲染的本地视频元素
• 当你配置insertDefaultUI: false关闭默认UI后，SDK不会再为你手动插入页面的视频元素自动添加镜像样式，需要你手动处理

修复代码 #

你只需在视频元素创建回调中为对应DOM手动添加镜像翻转样式即可，修改后的示例代码如下：

const publisher = OT.initPublisher({
  insertDefaultUI: false,
  mirror: true
});

publisher.on({
  videoElementCreated: (e) => {
    // 手动添加水平镜像样式
    e.element.style.transform = 'scaleX(-1)';
    $('#video-preview').append(e.element);
  }
});

如果后续需要为远端订阅的视频流添加镜像效果，也可以在订阅者的视频元素创建回调中复用相同的样式处理逻辑。

内容的提问来源于stack exchange，提问作者DavidFM