如何在 opentok 广播中添加自定义视频

Question

我想边播边加视频。为此，我指的是 link :

https://github.com/opentok/opentok-web-samples/tree/main/Publish-Video

在 OT.initPublisher 之后，我将此发布者发布到会话 session.publish

但是直播中没有显示视频。

谁能帮我解决这个问题？

Answer 1

我们可以使用 captureStream() / mozCaptureStream() 方法

从视频元素发布自定义音频源和视频源

就像下面代码片段中提到的那样

  const contentVideoElement = document.createElement('VIDEO');
  let screenPublisher = null;
  contentVideoElement.autoplay = true;
  contentVideoElement.controls = true;
  contentVideoElement.classList.add('cameraContainer');
  const url = URL.createObjectURL(file); // choose video file from input file control
  contentVideoElement.src = url;
  try {
    await contentVideoElement.play();
  } catch (error) {
      console.log(error);
    return;
  }
  let mediaStream = null;
  if (contentVideoElement.captureStream) {
    mediaStream = contentVideoElement.captureStream();
  } else if (contentVideoElement.mozCaptureStream) {
    mediaStream = contentVideoElement.mozCaptureStream();
  } else {
    console.error('Stream capture is not supported');
    mediaStream = null;
    return;
  }
  const videoTracks = mediaStream.getVideoTracks();
  const audioTracks = mediaStream.getAudioTracks();
  if (videoTracks.length > 0 && audioTracks.length > 0) {
    const el = document.createElement('div');
    screenPublisher = window.OT.initPublisher(
      'content-video-element-id',
      {
        insertMode: 'append',
        videoSource: videoTracks[0],
        audioSource: audioTracks[0],
        fitMode: 'contain', // Using default
        width: '100%',
        height: '100%',
        showControls: false,
        name:`Guest (Video)`,
      },
      (error) => {
        if (error) {
          contentVideoElement.pause();
          console.log(error);
        } else {
          contentVideoElement.play();
          openToksession.publish(screenPublisher, (error) => {
            if (error) {
              console.log(error);
            } else {
             // write here code after success publish video stream
            }
          });
        }
      },
    );
    screenPublisher.on({
      streamDestroyed: ({ stream }) => {
        contentVideoElement.pause();
      },
    });

    contentVideoElement.addEventListener(
      'ended',
      () => {
        console.log('Shared video ended');
      },
      false,
    );
  }

用于在 reactjs 中捕获 MediaStream：

如何在 opentok 广播中添加自定义视频

How can i add a custom video in broadcast in opentok

opentok