@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
+import { selectLocalPeerID, selectPeerNameByID, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { config as cssConfig, keyframes } from '../../Theme';
+
+let emojiCount = 1;
+
+const flyAndFade = keyframes({
+  '20%': { opacity: 1 },
+  '100%': { bottom: '60%', opacity: 0 },
+});
+
+const wiggleLeftRight = keyframes({
+  '0%': { marginLeft: '-50px' },
+  '100%': { marginLeft: '50px' },
+});
+
+const wiggleRightLeft = keyframes({
+  '0%': { marginLeft: '50px' },
+  '100%': { marginLeft: '-50px' },
+});
+
+const getStartingPoints = isMobile => {
+  let arr = [];
+  const min = 5;
+  const max = isMobile ? 30 : 20;
+  const inc = isMobile ? 8 : 5;
+  for (let i = min; i <= max; i += inc) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+export function FlyingEmoji() {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const vanillaStore = useHMSVanillaStore();
+  const [emojis, setEmojis] = useState([]);
+  const isMobile = useMedia(cssConfig.media.md);
+
+  const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);
+
+  const showFlyingEmoji = useCallback(
+    (emojiId, senderId) => {
+      if (!emojiId || !senderId || document.hidden) {
+        return;
+      }
+      const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
+      const nameToShow = localPeerId === senderId ? 'You' : senderPeerName;
+      const startingPoint = startingPoints[emojiCount % startingPoints.length];
+      const id = emojiCount++;
+
+      setEmojis(emojis => {
+        return [
+          ...emojis,
+          {
+            id: id,
+            emojiId: emojiId,
+            senderName: nameToShow,
+            startingPoint: `${startingPoint}%`,
+            wiggleType: Math.random() < 0.5 ? 0 : 1,
+          },
+        ];
+      });
+    },
+    [localPeerId, vanillaStore, startingPoints],
+  );
+
+  useEffect(() => {
+    window.showFlyingEmoji = showFlyingEmoji;
+  }, [showFlyingEmoji]);
+
+  return (
+    <Box
+      css={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        zIndex: 999,
+      }}
+    >
+      {emojis.map(emoji => {
+        return (
+          <Flex
+            key={emoji.id}
+            css={{
+              left: emoji.startingPoint,
+              flexDirection: 'column',
+              alignItems: 'center',
+              position: 'absolute',
+              bottom: 0,
+              animation: `${flyAndFade()} 5s forwards, ${
+                emoji.wiggleType === 0 ? wiggleLeftRight() : wiggleRightLeft()
+              } 1s ease-in-out infinite alternate`,
+            }}
+            onAnimationEnd={() => {
+              setEmojis(emojis.filter(item => item.id !== emoji.id));
+            }}
+          >
+            <Box>
+              <em-emoji id={emoji.emojiId} size="48px" set="apple"></em-emoji>
+            </Box>
+            <Box
+              css={{
+                width: 'fit-content',
+                padding: '$2 $4',
+                background: '$surfaceLight',
+                borderRadius: '$1',
+              }}
+            >
+              <Text
+                css={{
+                  fontSize: '$space$6',
+                  lineHeight: '$xs',
+                  color: '$textHighEmp',
+                }}
+              >
+                {emoji.senderName}
+              </Text>
+            </Box>
+          </Flex>
+        );
+      })}
+    </Box>
+  );
+}

package/src/Prebuilt/plugins/RemoteStopScreenshare.jsx

@@ -0,0 +1,18 @@
+import React, { useCallback } from 'react';
+import { useCustomEvent, useHMSActions } from '@100mslive/react-sdk';
+import { REMOTE_STOP_SCREENSHARE_TYPE } from '../common/constants';
+
+export function RemoteStopScreenshare() {
+  const actions = useHMSActions();
+
+  const onRemoteStopScreenshare = useCallback(async () => {
+    await actions.setScreenShareEnabled(false);
+  }, [actions]);
+
+  useCustomEvent({
+    type: REMOTE_STOP_SCREENSHARE_TYPE,
+    onEvent: onRemoteStopScreenshare,
+  });
+
+  return <></>;
+}

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+import {
+  selectIsAllowedToPublish,
+  selectIsLocalVideoPluginPresent,
+  selectLocalPeerRole,
+  selectLocalVideoTrackID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { VirtualBackgroundIcon } from '@100mslive/react-icons';
+import { Loading } from '../../../Loading';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { useIsFeatureEnabled } from '../../components/hooks/useFeatures';
+import { getRandomVirtualBackground } from './vbutils';
+import { FEATURE_LIST } from '../../common/constants';
+
+export const VirtualBackground = () => {
+  const pluginRef = useRef(null);
+  const hmsActions = useHMSActions();
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const role = useHMSStore(selectLocalPeerRole);
+  const [isVBLoading, setIsVBLoading] = useState(false);
+  const [isVBSupported, setIsVBSupported] = useState(false);
+  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
+  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.VIDEO_PLUGINS);
+
+  async function createPlugin() {
+    if (!pluginRef.current) {
+      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');
+      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
+    }
+  }
+  useEffect(() => {
+    if (!localPeerVideoTrackID) {
+      return;
+    }
+    createPlugin().then(() => {
+      //check support of plugin
+      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);
+      setIsVBSupported(pluginSupport.isSupported);
+    });
+  }, [hmsActions, localPeerVideoTrackID]);
+
+  async function addPlugin() {
+    setIsVBLoading(true);
+    try {
+      await createPlugin();
+      window.HMS.virtualBackground = pluginRef.current;
+      const { background, backgroundType } = getRandomVirtualBackground();
+      await pluginRef.current.setBackground(background, backgroundType);
+      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));
+    } catch (err) {
+      console.error('add virtual background plugin failed', err);
+    }
+    setIsVBLoading(false);
+  }
+
+  async function removePlugin() {
+    if (pluginRef.current) {
+      await hmsActions.removePluginFromVideoTrack(pluginRef.current);
+      pluginRef.current = null;
+    }
+  }
+
+  if (!isAllowedToPublish.video || !isVBSupported || !isFeatureEnabled) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}
+    >
+      <IconButton
+        active={!isVBPresent}
+        disabled={isVBLoading}
+        onClick={() => {
+          !isVBPresent ? addPlugin() : removePlugin();
+        }}
+        data-testid="virtual_bg_btn"
+      >
+        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default VirtualBackground;

package/src/Prebuilt/plugins/VirtualBackground/vbutils.js

@@ -0,0 +1,66 @@
+/* eslint-disable no-case-declarations */
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+export function getRandomVirtualBackground() {
+  const backgroundList = [
+    {
+      background: HMSVirtualBackgroundTypes.BLUR,
+      backgroundType: HMSVirtualBackgroundTypes.BLUR,
+    },
+  ];
+
+  const images = [
+    'https://www.100ms.live/images/vb-1.jpeg',
+    'https://www.100ms.live/images/vb-2.jpg',
+    'https://www.100ms.live/images/vb-3.png',
+    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',
+    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',
+    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',
+    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',
+  ].map(url => ({
+    background: url,
+    backgroundType: HMSVirtualBackgroundTypes.IMAGE,
+  }));
+
+  backgroundList.push(...images);
+
+  /* 
+   //TODO: update with a better quality gif.
+  const gifList = [
+    {
+      background: "https://www.100ms.live/images/vb-1.gif",
+      backgroundType: HMSVirtualBackgroundTypes.GIF,
+    },
+  ];
+  backgroundList.push(...gifList); 
+  */
+
+  const videoList = [
+    'https://www.100ms.live/images/video-1.mp4',
+    'https://www.100ms.live/images/video-2.mp4',
+    'https://www.100ms.live/images/video-5.mp4',
+    'https://www.100ms.live/images/video-7.mp4',
+    'https://www.100ms.live/images/video-8.mp4',
+  ].map(url => ({
+    background: url,
+    backgroundType: HMSVirtualBackgroundTypes.VIDEO,
+  }));
+  backgroundList.push(...videoList);
+
+  const randomIdx = Math.floor(Math.random() * backgroundList.length);
+  const virtualBackground = backgroundList[randomIdx];
+  switch (virtualBackground.backgroundType) {
+    case HMSVirtualBackgroundTypes.IMAGE:
+      const img = document.createElement('img');
+      img.alt = 'VB';
+      img.src = backgroundList[randomIdx].background;
+      virtualBackground.background = img;
+      return virtualBackground;
+    case HMSVirtualBackgroundTypes.VIDEO:
+      const videoEl = document.createElement('video');
+      videoEl.src = backgroundList[randomIdx].background;
+      virtualBackground.background = videoEl;
+      return virtualBackground;
+    default:
+      return virtualBackground;
+  }
+}

package/src/Prebuilt/plugins/confetti.jsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useMedia } from 'react-use';
+import JSConfetti from 'js-confetti';
+import { useCustomEvent } from '@100mslive/react-sdk';
+
+const confettiMsgType = 'CONFETTI';
+
+const emojiCollections = {
+  hearts: ['❤️', '😍', '♥️'],
+  birthday: ['🎂', '🍰', '🎁'],
+  yes: ['🙌', '✨', '🔥', '❤️'],
+  no: ['🙅', '⛔', '❌'],
+};
+
+/**
+ * This component shows a reference implementation of using [custom events](https://www.100ms.live/docs/javascript/v2/features/chat#custom-events).
+ * One downside of the current implementation is that it doesn't take into account tab not in focus.
+ * In this case multiple messages might accumulate leading to a lot of confetti when user comes back on the tab.
+ */
+export function Confetti() {
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+  const disableMotion = useMedia('(prefers-reduced-motion: reduce)');
+  const jsConfetti = useRef(null);
+
+  useEffect(() => {
+    jsConfetti.current = new JSConfetti();
+  });
+
+  const onConfettiMsg = useCallback(
+    config => {
+      if (!disableMotion && jsConfetti.current) {
+        jsConfetti.current.addConfetti(config);
+      }
+    },
+    [disableMotion],
+  );
+
+  const { sendEvent } = useCustomEvent({
+    type: confettiMsgType,
+    onEvent: onConfettiMsg,
+  });
+
+  // e.g. sendConfetti(), sendConfetti({type: "hearts"}), sendConfetti({emojis: ["🔥"]})
+  const sendConfetti = useCallback(
+    ({ type, emojis } = {}) => {
+      if (type && emojiCollections[type]) {
+        emojis = emojiCollections[type];
+      }
+      sendEvent({ emojis });
+    },
+    [sendEvent],
+  );
+
+  // putting the function to send on window for quick access
+  useEffect(() => {
+    window.sendConfetti = sendConfetti;
+  }, [sendConfetti]);
+
+  return <></>;
+}

package/src/Prebuilt/plugins/transcription/Transcriber.js

@@ -0,0 +1,216 @@
+import RecordRTC, { StereoAudioRecorder } from 'recordrtc';
+import { selectIsLocalAudioEnabled, selectLocalPeerName } from '@100mslive/react-sdk';
+
+export class Transcriber {
+  constructor({ hmsStore, setTranscriptAndSpeakingPeer, setIsTranscriptionEnabled }) {
+    this.hmsStore = hmsStore;
+    this.enabled = false;
+    this.audioSocket = null; // this is the socket that will be used to send audio to the STT server
+    this.setTranscriptAndSpeakingPeer = setTranscriptAndSpeakingPeer;
+    this.setIsTranscriptionEnabled = setIsTranscriptionEnabled;
+    this.sttTuningConfig = {
+      timeSlice: 250,
+      desiredSampRate: 8000,
+      numberOfAudioChannels: 1,
+      bufferSize: 256,
+    };
+    this.resetTextTimer = null; // used to reset the transcript after some time, if no new update comes
+    this.localPeerName = hmsStore.getState(selectLocalPeerName);
+    this.observingLocalPeerTrack = false;
+    this.trackIdBeingObserved = null;
+    this.recordRTCInstance = null;
+    this.unsubscribes = [];
+  }
+
+  async toggleTranscriptionState() {
+    await this.enableTranscription(!this.enabled);
+  }
+
+  async enableTranscription(enable) {
+    if (enable === this.enabled) {
+      return;
+    }
+    console.log('transcription enabled', enable);
+    if (enable) {
+      this.enabled = true;
+      await this.setIsTranscriptionEnabled(true);
+      await this.listen();
+    } else {
+      this.enabled = false;
+      await this.setIsTranscriptionEnabled(false);
+      this.cleanup();
+    }
+  }
+
+  setTranscriptAndPeerWithExpiry(transcript, peerName) {
+    if (!transcript) {
+      return;
+    }
+    this.setTranscriptAndSpeakingPeer(transcript, `[${peerName}]`);
+    // reset after some time if no new update comes
+    clearTimeout(this.resetTextTimer);
+    this.resetTextTimer = setTimeout(() => {
+      this.resetTranscriptAndPeer();
+    }, 5000);
+  }
+
+  resetTranscriptAndPeer() {
+    this.setTranscriptAndSpeakingPeer('', '');
+    clearTimeout(this.resetTextTimer);
+  }
+
+  async listen(retryCount = 0) {
+    if (retryCount > 5) {
+      console.error('transcription', 'Max retry count reached!!', retryCount);
+      this.cleanup();
+      return;
+    }
+    try {
+      let url = process.env.REACT_APP_DYNAMIC_STT_TOKEN_GENERATION_ENDPOINT;
+      let res = await fetch(url);
+      let body = await res.json();
+      const authToken = body.token;
+
+      if (authToken) {
+        this.audioSocket = await new WebSocket(
+          `wss://api.assemblyai.com/v2/realtime/ws?sample_rate=${this.sttTuningConfig.desiredSampRate}&token=${authToken}`,
+        );
+        this.resetTranscriptAndPeer();
+        this.audioSocket.onmessage = message => {
+          try {
+            const res = JSON.parse(message.data);
+            if (res.text && this.enabled) {
+              //Limiting the transcript size based on it's charecter length.
+              let messageText =
+                res.text.length >= 80
+                  ? res.text
+                      .split(' ')
+                      .slice(Math.max(res.text.split(' ').length - 10, 1))
+                      .join(' ')
+                  : res.text;
+              if (messageText) {
+                this.setTranscriptAndPeerWithExpiry(messageText, this.localPeerName);
+              }
+            }
+          } catch (err) {
+            console.error('transcription', err);
+          }
+        };
+
+        this.audioSocket.onerror = event => {
+          console.error('transcription', event);
+          this.audioSocket.close();
+        };
+
+        this.audioSocket.onclose = event => {
+          try {
+            console.log(event);
+            this.audioSocket = null;
+            if (this.enabled && event.code !== 4001) {
+              this.listen(retryCount++);
+            }
+          } catch (err) {
+            console.error('transcription', err);
+          }
+        };
+
+        this.audioSocket.onopen = () => {
+          this.observeLocalPeerTrack();
+        };
+      } else {
+        console.error('Unable to fetch dynamic token!!');
+      }
+    } catch (err) {
+      console.error('transcription', err);
+    }
+  }
+
+  async observeLocalPeerTrack() {
+    try {
+      if (this.observingLocalPeerTrack) {
+        return;
+      }
+      this.observingLocalPeerTrack = true;
+      console.log('transcription - observing local peer track');
+      let unsub = this.hmsStore.subscribe(this.getAndObserveStream, selectIsLocalAudioEnabled);
+      this.unsubscribes.push(unsub);
+      this.getAndObserveStream(); // call it once to start observing initially
+    } catch (err) {
+      console.error('transcription - observing local peer track', err);
+    }
+  }
+
+  /**
+   * This method is used to get the local peer's stream and observe it for changes.
+   * @returns {Promise<void>}
+   */
+  getAndObserveStream = async () => {
+    // a hacky way to get the local peer's stream till we have a better way
+    const localPeer = window.__hms.sdk.getLocalPeer();
+    const mediaTrack = localPeer.audioTrack.nativeTrack;
+    if (!mediaTrack || mediaTrack.id === this.trackIdBeingObserved) {
+      return;
+    }
+    this.trackIdBeingObserved = mediaTrack.id;
+    console.log('transcription - observing local peer track', mediaTrack.id);
+    try {
+      if (this.recordRTCInstance) {
+        console.log('transcription - destroying earlier instance');
+        this.recordRTCInstance.destroy();
+      }
+      this.recordRTCInstance = null;
+    } catch (err) {
+      console.error('transcription - in destroying earlier instance', err);
+    }
+    const stream = new MediaStream([mediaTrack]);
+    await this.observeStream(stream);
+  };
+
+  async observeStream(stream) {
+    this.recordRTCInstance = new RecordRTC(stream, {
+      ...this.sttTuningConfig,
+      type: 'audio',
+      mimeType: 'audio/webm;codecs=pcm',
+      recorderType: StereoAudioRecorder,
+      ondataavailable: blob => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const base64data = reader.result;
+          if (this.audioSocket && this.enabled && this.audioSocket.readyState && this.audioSocket.readyState === 1) {
+            try {
+              this.audioSocket.send(JSON.stringify({ audio_data: base64data.split('base64,')[1] }));
+            } catch (err) {
+              console.error('transcription', err);
+            }
+          }
+        };
+        reader.readAsDataURL(blob);
+      },
+    });
+    this.recordRTCInstance.startRecording();
+  }
+
+  cleanup() {
+    console.log('transcription - cleanup');
+    if (this.audioSocket) {
+      try {
+        this.audioSocket.close();
+        this.audioSocket = null;
+      } catch (err) {
+        console.error("transcription cleanup - couldn't close socket", err);
+      }
+    }
+    if (this.recordRTCInstance) {
+      try {
+        this.recordRTCInstance.destroy();
+        this.recordRTCInstance = null;
+      } catch (err) {
+        console.error("transcription cleanup - couldn't stop recording", err);
+      }
+    }
+    for (const unsub of this.unsubscribes) {
+      unsub();
+    }
+    this.resetTranscriptAndPeer();
+  }
+}