@cvss/react v0.1.3

@cvss/react

This package is part of the Cortex Video Services Web SDK and contains components built to help develop web applications based on the React framework that use Cortex Video Services for video calling and video conferencing. This package is developing and maintained with the support and assistance of Cortex Technology.

The package contains a set of components for the React framework to implement the full functionality of video calls in web applications written in javascript and typescript.

Table of components

See the hierarchy diagram.

        / Publisher - LocalStream - Video
Session 
        \ Incoming  - RemoteStream - Video
                    \  ...
                       RemoteStream - Video

This option corresponds to example #2 The LocalStream and RemoteStream levels can be collapsed this corresponds to example #1 The Publisher and Incoming levels also can be collapsed this corresponds to example #0 Publisher, LocalStream, Incoming, RemoteStream if their level collapsed and Video always accepts attributes of video HTML tag

example #0

    <Session sessionId="SAMPLE0">
      <Publisher width={320} className="streamView" />
      <Incoming width={320} className="streamView" />
    </Session>

Also see file Sample0.jsx in sample project

example #1

    <Session sessionId="SAMPLE1">
      <Publisher>
        <div className="streamBox">
          <LocalStream width={320} className="streamView" />
        </div>
      </Publisher>
      <Incoming>
        <div className="streamBox">
          <RemoteStream width={320} className="streamView" />
        </div>
      </Incoming>
    </Session>

Also see file Sample1.jsx in sample project

example #2

    <Session sessionId={sessionId || 'SAMPLE2'} eventHandlers={sessionListener}>
      <Publisher eventHandlers={publisherListener}>
        <LocalStream>
          {({ stream, participantName }) => {
            return (
              <div className="streamBox">
                <h4 className="streamTitle">{participantName}</h4>
                <Video stream={stream} className="streamView" />
              </div>
            );
          }}
        </LocalStream>
      </Publisher>
      <Incoming clone={true}>
        <RemoteStream>
          {({ stream, participantName, muted, setMuted }) => (
            <div className="streamBox">
              <h4 className="streamTitle" onClick={() => setMuted(!muted)}>{participantName}</h4>
              <Video stream={stream} className="streamView" muted={muted} />
            </div>
          )}
        </RemoteStream>
      </Incoming>
    </Session>

Also see file Sample2.jsx in sample project

Other samples

In this mono-repository you can find easy-to-understand examples of applications written in javascript - jsample and in typescript - tsample.