StartedEvent effect 依赖于 dom 的挂载, dom 的挂载依赖于 StartedEvent 应该怎么实现呢

[ScarboroughCoral]

场景： 视频通话开启摄像头本地展示并上传摄像头流。

第三方服务：

class CameraShareService {
  public startLocal(dom: HTMLElement): void
}

通过remesh建模如下：

OpenCameraCommand
OpenCameraStartedEvent
OpenCameraSuccessEvent

问题

当 OpenCameraStartedEvent 事件触发同时修改状态visible渲染摄像头 dom，但是 OpenCameraStartedEvent 的 effect 执行 cameraShareService.startLocal 时依赖这个 dom 引用，此时并不能保证 dom 是否挂载完成，应该怎么样处理比较好呢。

想了一个方法是增加一个摄像头 dom 挂载的 event: CameraDOMMountedEvent(dom)，但是似乎不能保证挂载一定会发生在执行 effect 之后？还是说调用 cameraShareService.startLocal 应该放在 CameraDOMMountedEvent effect 中呢

domain.effect({
 impl: ({ fromEvent }) => 
    fromEvent(OpenCameraStartedEvent).pipe(
        switchMap(() => fromEvent(CameraDOMMountedEvent)),
        switchMap(dom => {
          cameraShareService.startLocal(dom)
          return [OpenCameraSuccessEvent()]
        })
    )
})

[hourong88]

您好！您的邮件已收到！我查阅后，尽快回复您！

[Lucifier129]

跟 dom 和摄像头直接交互，属于 UI 领域的 IO 副作用操作，建议独立于 remesh 在其外部处理，用原生 api 或者其封装库操作，然后有需要时将提纯的数据喂给 remesh domain 即可。

function CameraComponent() {
  // 将 UI Model 中的数据按需映射到 Domain Model
   const handleCameraOpen = event => {
        // 原生 api 或 库 api 开启摄像头
       comera.open({
            onProgress() {
                // 流处理 callback
            },
            onEnd() {
                send(domain.command.CloseCamera()
            }
       })
       send(domain.command.OpenCamera()
   }
}