CODEWITHSUNDEEP
opentok
Rohit
Rohit

Reputation: 97

How can i add a custom video in broadcast in opentok

I wanted to add video while broadcasting. To do this i am refering this link :

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

After OT.initPublisher i am publishing this publisher in to session session.publish

But video is not showing in livestreaming.

Can anybody help me with this?

Upvotes: 0

Views: 188

Answers (1)

Minal
Minal

Reputation: 183

We can Publish custom audio source and video source from Video Element, using the captureStream() / mozCaptureStream() methods

Like mentioned in the below code snip

  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,
    );
  }

For capture MediaStream in reactjs: click here

Upvotes: 1

Related Questions