Render Video

 
import { hmsActions } from './hms';

const peersContainer = document.getElementById('peers-container');

function renderVideo(peer) {
  // you can either get an existing video element or create a new onw.
  // const videoElement = document.getElementByID(peer.id)
  const videoElement = document.createElement('video');
  videoElement.autoplay = true;
  videoElement.muted = true;
  videoElement.playsinline = true;

  hmsActions.attachVideo(peer.videoTrack, videoElement);
}

function renderPeers(peers) {
  peersContainer = document.getElementById("peers-container");
  peersContainer.innerHTML = "";

  peers.forEach((peer) => {
    console.log(`rendering video for peer - ${peer.name}, roleName - ${peer.roleName}, isLocal- ${peer.isLocal}`);
    peersContainer.append(renderVideo(peer));
  });
}

// subscribe to the peers, so render is called whenever there is a change like peer join and leave
hmsStore.subscribe(renderPeers, selectPeers);

 
import { useRef, useEffect } from 'react';
import {
  useHMSStore,
  useHMSActions,
  selectPeers,
  selectCameraStreamByPeerID
} from '@100mslive/hms-video-react';

function VideoTile({peer}) {
  const videoRef = useRef(null);
  const hmsActions = useHMSActions();
  // get the camera track to render
  const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));
  useEffect(() => {
    if (videoRef.current && videoTrack) {
      if (videoTrack.enabled) {
        hmsActions.attachVideo(videoTrack.id, videoRef.current);
      } else {
        hmsActions.detachVideo(videoTrack.id, videoRef.current);
      }
    }
  }, [videoTrack, hmsActions]);

  return <video ref={videoRef} autoPlay muted playsinline></video>;
}


function Conference() {
    const peers = useHMSStore(selectPeers);

    return <>
      {
        peers.map(peer => <VideoTile key={peer.id} peer={peer}/>)
      }
    </>
}