Merge pull request #5 from zoom/revert-4-1.1.3

Revert "update 1.1.3"
zoom · Jul 14, 2021 · 31800d8 · 31800d8
2 parents 81beec9 + d2dae24
commit 31800d8
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 527 deletions.
diff --git a/purejs-demo/package.json b/purejs-demo/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/coffeelint",
   "name": "videosdk-demo-purejs",
-  "version": "1.1.3",
+  "version": "1.1.0",
   "description": "Zoom Web Video SDK Pure JS Demo",
   "main": "index.js",
   "scripts": {
@@ -51,6 +51,6 @@
     "webpack-dev-server": "3.11.2"
   },
   "dependencies": {
-    "@zoom/videosdk": "1.1.3"
+    "@zoom/videosdk": "1.1.0"
   }
 }
diff --git a/react-demo/package.json b/react-demo/package.json
@@ -1,13 +1,12 @@
 {
   "name": "react-video-sdk-demo",
-  "version": "1.1.3",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
-    "@zoom/videosdk": "^1.1.3",
     "antd": "^4.14.1",
     "classnames": "^2.2.6",
     "crypto-js": "^4.0.0",
@@ -19,7 +18,8 @@
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
-    "web-vitals": "1.1.1"
+    "web-vitals": "1.1.1",
+    "@zoom/videosdk": "1.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

diff --git a/react-demo/src/App.tsx b/react-demo/src/App.tsx
@@ -87,10 +87,9 @@ function App(props: AppProps) {
   const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
   const [chatClient, setChatClient] = useState<ChatClient | null>(null);
   const zmClient = useContext(ZoomContext);
-
   useEffect(() => {
     const init = async () => {
-      await zmClient.init("en-US", `${window.location.origin}/lib`, 'zoom.us');
+      await zmClient.init("en-US", `${window.location.origin}/lib`);
       try {
         setLoadingText("Joining the session...");
         await zmClient.join(topic, signature, name, password);

diff --git a/react-demo/src/feature/preview/preview.scss b/react-demo/src/feature/preview/preview.scss
@@ -15,7 +15,7 @@
   border: 1px solid rgba(0, 0, 0, 1);
 }
 
-.video-operations-preview div {
+.video-operations-preview button{
   background-color: black !important
 }
 .join-button {

diff --git a/react-demo/src/feature/preview/preview.tsx b/react-demo/src/feature/preview/preview.tsx
@@ -1,55 +1,21 @@
 import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
 import produce from 'immer';
 import ZoomVideo from "@zoom/videosdk";
+import classNames from 'classnames';
 import { useMount } from '../../hooks';
 import './preview.scss';
 import MicrophoneButton from '../video/components/microphone';
 import CameraButton from '../video/components/camera';
 import { message } from 'antd';
-import { MediaDevice } from '../video/video-types';
 
-// label: string;
-// deviceId: string;
 let prevMicFeedbackStyle = '';
-let micFeedBackInteval: any = '';
-
-let localAudio = ZoomVideo.createLocalAudioTrack();
-let localVideo = ZoomVideo.createLocalVideoTrack();
-let allDevices;
-
-const mountDevices: () => Promise<{
-  mics: MediaDevice[];
-  speakers: MediaDevice[];
-  cameras: MediaDevice[];
-}> = async () => {
-  allDevices = await ZoomVideo.getDevices();
-  const cameraDevices: Array<MediaDeviceInfo> = allDevices.filter(function (device) {
-    return device.kind === 'videoinput';
-  });
-  const micDevices: Array<MediaDeviceInfo> = allDevices.filter(function (device) {
-    return device.kind === 'audioinput';
-  });
-  const speakerDevices: Array<MediaDeviceInfo> = allDevices.filter(function (
-    device,
-  ) {
-    return device.kind === 'audiooutput';
-  });
-  return {
-    mics: micDevices.map((item) => {
-      return { label: item.label, deviceId: item.deviceId };
-    }),
-    speakers: speakerDevices.map((item) => {
-      return { label: item.label, deviceId: item.deviceId };
-    }),
-    cameras: cameraDevices.map((item) => {
-      return { label: item.label, deviceId: item.deviceId };
-    }),
-  };
-};
+let  micFeedBackInteval: any = '';
 
+const localAudio = ZoomVideo.createLocalAudioTrack();
+const localVideo = ZoomVideo.createLocalVideoTrack();
 const AUDIO_MASK = 1,
-  MIC_MASK = 2,
-  VIDEO_MASK = 4;
+    MIC_MASK = 2,
+    VIDEO_MASK = 4;
 
 let PREVIEW_VIDEO: any;
 
@@ -58,171 +24,132 @@ const updateMicFeedbackStyle = () => {
   let newMicFeedbackStyle = '';
 
   if (newVolumeIntensity === 0) {
-    newMicFeedbackStyle = '';
+      newMicFeedbackStyle = '';
   } else if (newVolumeIntensity <= 0.05) {
-    newMicFeedbackStyle = 'mic-feedback__very-low';
+      newMicFeedbackStyle = 'mic-feedback__very-low';
   } else if (newVolumeIntensity <= 0.1) {
-    newMicFeedbackStyle = 'mic-feedback__low';
+      newMicFeedbackStyle = 'mic-feedback__low';
   } else if (newVolumeIntensity <= 0.15) {
-    newMicFeedbackStyle = 'mic-feedback__medium';
+      newMicFeedbackStyle = 'mic-feedback__medium';
   } else if (newVolumeIntensity <= 0.2) {
-    newMicFeedbackStyle = 'mic-feedback__high';
+      newMicFeedbackStyle = 'mic-feedback__high';
   } else if (newVolumeIntensity <= 0.25) {
-    newMicFeedbackStyle = 'mic-feedback__very-high';
+      newMicFeedbackStyle = 'mic-feedback__very-high';
   } else {
-    newMicFeedbackStyle = 'mic-feedback__max';
+      newMicFeedbackStyle = 'mic-feedback__max';
   }
   const micIcon: any = document.getElementById('auido-volume-feedback');
   if (prevMicFeedbackStyle !== '' && micIcon) {
-    micIcon.classList.toggle(prevMicFeedbackStyle);
+      micIcon.classList.toggle(prevMicFeedbackStyle);
   }
 
   if (newMicFeedbackStyle !== '' && micIcon) {
-    micIcon.classList.toggle(newMicFeedbackStyle);
+      micIcon.classList.toggle(newMicFeedbackStyle);
   }
   console.log(newMicFeedbackStyle, newVolumeIntensity);
   prevMicFeedbackStyle = newMicFeedbackStyle;
 };
 
-const encodePreviewOptions = (
-  isStartedAudio: boolean,
-  isMuted: boolean,
-  isStartedVideo: boolean,
-) => {
+const encodePreviewOptions = (isJoinAudio: boolean, isMuteAudio: boolean, isStartVideo: boolean) => {
   let res = 0;
-  res = (res | +isStartedVideo) << 1;
-  res = (res | +isMuted) << 1;
-  res = res | +isStartedAudio;
+  res = (res | +isStartVideo) << 1;
+  res = (res | +isMuteAudio) << 1;
+  res = (res | +isJoinAudio);
   return res;
-};
+}
 const decodePreviewOptions = (val: number) => {
   /*
       LSB: audio,
       MSB: video
    */
-  const isStartedAudio = !!((val & AUDIO_MASK) === AUDIO_MASK);
-  const isMuted = !!((val & MIC_MASK) === MIC_MASK);
-  const isStartedVideo = !!((val & VIDEO_MASK) === VIDEO_MASK);
-  return { isStartedVideo, isMuted, isStartedAudio };
-};
+  let isJoinAudio = !!((val & AUDIO_MASK) === AUDIO_MASK);
+  let isMuteAudio = !!((val & MIC_MASK) === MIC_MASK);
+  let isStartVideo = !!((val & VIDEO_MASK) === VIDEO_MASK);
+  return {isStartVideo, isMuteAudio, isJoinAudio};
+}
 
 const PreviewContainer = () => {
-  const [isStartedAudio, setIsStartedAudio] = useState<boolean>(false);
-  const [isMuted, setIsMuted] = useState<boolean>(true);
-  const [isStartedVideo, setIsStartedVideo] = useState<boolean>(false);
-  const [micList, setMicList] = useState<MediaDevice[]>([]);
-  const [speakerList, setSpeakerList] = useState<MediaDevice[]>([]);
-  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);
-  const [activeMicrophone, setActiveMicrophone] = useState('');
-  const [activeSpeaker, setActiveSpeaker] = useState('');
-  const [activeCamera, setActiveCamera] = useState('');
 
-  const onCameraClick = useCallback(async () => {
-    if (isStartedVideo) {
-      await localVideo?.stop();
-      setIsStartedVideo(false);
-    } else {
-      await localVideo?.start(PREVIEW_VIDEO);
-      setIsStartedVideo(true);
-    }
-  }, [isStartedVideo]);
-  const onMicrophoneClick = useCallback(async () => {
-    if (isStartedAudio) {
-      if (isMuted) {
-        await localAudio?.unmute();
-        micFeedBackInteval = setInterval(updateMicFeedbackStyle, 500);
-        setIsMuted(false);
+  const [isJoinAudio, setIsJoinAudio] = useState<boolean>(false);
+  const [isMuteAudio, setIsMuteAudio] = useState<boolean>(false);
+  const [isStartVideo, setIsStartVideo] = useState<boolean>(false);
+  const onMicrophoneClick = () => {
+    if(isJoinAudio) {
+      if(isMuteAudio) {
+        localAudio.unmute().then(()=>{
+          micFeedBackInteval = setInterval(updateMicFeedbackStyle, 500);
+          setIsMuteAudio(!isMuteAudio);
+        });
       } else {
-        await localAudio?.mute();
-        if (micFeedBackInteval) {
-          clearInterval(micFeedBackInteval);
-        }
-        setIsMuted(true);
+        localAudio.mute().then(()=>{
+          if (micFeedBackInteval) {
+            clearInterval(micFeedBackInteval);
+          }
+          setIsMuteAudio(!isMuteAudio);
+        });
       }
+      // localAudio.stop().then(()=>{
+      //   if (micFeedBackInteval) {
+      //     clearInterval(micFeedBackInteval);
+      //   }
+      //   setIsJoinAudio(!isJoinAudio);
+      // });
     } else {
-      await localAudio?.start();
-      setIsStartedAudio(true);
-    }
-  }, [isStartedAudio, isMuted]);
-  const onMicrophoneMenuClick = async (key: string) => {
-    const [type, deviceId] = key.split('|');
-    if (type === 'microphone') {
-      if (deviceId !== activeMicrophone) {
-        await localAudio.stop();
-        setIsMuted(true);
-        localAudio = ZoomVideo.createLocalAudioTrack(deviceId);
-        await localAudio.start();
-        setActiveMicrophone(deviceId);
-      }
-    } else if (type === 'leave audio') {
-      await localAudio.stop();
-      setIsStartedAudio(false);
+      localAudio.start().then(()=>{        
+        setIsJoinAudio(!isJoinAudio);
+        setIsMuteAudio(true);
+      });
     }
+
   };
-  const onSwitchCamera = async (key: string) => {
-    if (localVideo) {
-      if (activeCamera !== key) {
-        await localVideo.stop();
-        localVideo = ZoomVideo.createLocalVideoTrack(key);
-        localVideo.start(PREVIEW_VIDEO);
-        setActiveCamera(key);
-      }
+
+  const toggleVideo = () => {
+    if(isStartVideo) {
+      localVideo.stop().then(()=>{
+        setIsStartVideo(!isStartVideo);
+      });
     }
-  };
+    else {
+      localVideo.start(PREVIEW_VIDEO).then(()=>{
+        setIsStartVideo(!isStartVideo);
+      });
+    }
+
+  }
 
   useEffect(() => {
-    const encodeVal = encodePreviewOptions(isStartedAudio, isMuted, isStartedVideo);
-    console.log('preview encode val', encodeVal);
-    const decodeOption = decodePreviewOptions(encodeVal);
-    console.log('preview config', decodePreviewOptions(encodeVal));
-    message.info(JSON.stringify(decodeOption, null, 2));
-    console.log(micList);
-  }, [isStartedAudio, isMuted, isStartedVideo]);
-
+    const encodeVal = encodePreviewOptions(isJoinAudio, isMuteAudio, isStartVideo);
+                  console.log("preview encode val", encodeVal)
+                  const decodeOption = decodePreviewOptions(encodeVal);
+                  console.log("preview config", decodePreviewOptions(encodeVal));
+                  message.info(JSON.stringify(decodeOption, null, 2));
+  }, [isJoinAudio, isMuteAudio, isStartVideo]);
+
   useMount(() => {
     PREVIEW_VIDEO = document.getElementById('js-preview-video');
-    mountDevices().then((devices) => {
-      console.log('devicesdevicesdevicesdevices', devices);
-      setMicList(devices.mics);
-      setCameraList(devices.cameras);
-      // setSpeakerList(devices.speakers);
+    ZoomVideo.getDevices().then((res)=>{
+      console.log(res);
     });
   });
 
   return (
     <div className="js-preview-view">
       <div id="js-preview-view" className="container preview__root">
-        <span>
-          <h1>Audio And Video Preview</h1>
-        </span>
-        <div className="container video-app">
-          <video
-            id="js-preview-video"
-            className="preview-video"
-            muted={true}
-            data-video="0"
-          ></video>
-          <div className="video-footer video-operations video-operations-preview">
-            <MicrophoneButton
-              isStartedAudio={isStartedAudio}
-              isMuted={isMuted}
-              onMicrophoneClick={onMicrophoneClick}
-              onMicrophoneMenuClick={onMicrophoneMenuClick}
-              microphoneList={micList}
-              speakerList={speakerList}
-              activeMicrophone={activeMicrophone}
-              activeSpeaker={activeSpeaker}
-            />
-            <CameraButton
-              isStartedVideo={isStartedVideo}
-              onCameraClick={onCameraClick}
-              onSwitchCamera={onSwitchCamera}
-              cameraList={cameraList}
-              activeCamera={activeCamera}
-            />
-          </div>
+            <span>
+                <h1>Audio And Video Preview</h1>
+            </span>
+            <div className="container video-app">
+                <video id="js-preview-video" className="preview-video" muted={true} data-video="0"></video>
+                <div className="video-footer video-operations-preview">
+                  <MicrophoneButton
+                    isStartedAudio={isJoinAudio}
+                    isMuted={isMuteAudio}
+                    onMicrophoneClick={onMicrophoneClick}
+                  />
+                  <CameraButton isStartedVideo={isStartVideo} onCameraClick={toggleVideo} />
+                </div>
+            </div>
         </div>
-      </div>
     </div>
   );
 };

diff --git a/react-demo/src/feature/video/components/avatar.tsx b/react-demo/src/feature/video/components/avatar.tsx
@@ -5,16 +5,15 @@ import './avatar.scss';
 import { Participant } from '../../../index-types';
 interface AvatarProps {
   participant: Participant;
-  style?: { [key: string]: string };
+  style: { [key: string]: string };
   isActive: boolean;
-  className?: string;
 }
 const Avatar = (props: AvatarProps) => {
-  const { participant, style, isActive, className } = props;
+  const { participant, style, isActive } = props;
   const { displayName, audio, muted, bVideoOn } = participant;
   return (
     <div
-      className={classNames('avatar', { 'avatar-active': isActive }, className)}
+      className={classNames('avatar', { 'avatar-active': isActive })}
       style={{ ...style, background: bVideoOn ? 'transparent' : 'rgb(26,26,26)' }}
     >
       {(bVideoOn || (audio === 'computer' && muted)) && (