feat: browser streaming in routine (#393)

dogu-team · Sep 21, 2023 · f7e70fd · f7e70fd
1 parent 4d84be9
commit f7e70fd
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 36 deletions.
diff --git a/projects/console-web-front/src/components/device/DeviceLiveCell.tsx b/projects/console-web-front/src/components/device/DeviceLiveCell.tsx
@@ -24,9 +24,10 @@ const DeviceIcon = ({ platform }: { platform: Platform }) => {
 
 interface Props {
   device: DeviceBase | undefined;
+  pid?: number;
 }
 
-const DeviceLiveCell = ({ device }: Props) => {
+const DeviceLiveCell = ({ device, pid }: Props) => {
   if (!device) {
     return (
       <div>
@@ -36,7 +37,7 @@ const DeviceLiveCell = ({ device }: Props) => {
   }
 
   return (
-    <DeviceStreaming device={device}>
+    <DeviceStreaming device={device} pid={pid}>
       <ContentWrapper>
         <FlexRow style={{ marginBottom: '.25rem' }}>
           <DeviceIcon platform={device.platform} />

diff --git a/projects/console-web-front/src/components/pipelines/PipelineDeviceGrid.tsx b/projects/console-web-front/src/components/pipelines/PipelineDeviceGrid.tsx
@@ -32,6 +32,15 @@ const PipelineDeviceGrid = ({ routineJobs }: Props) => {
   const mobileJobs = jobs.filter((job) => !isDesktop(job.device));
   const desktopJobs = jobs.filter((job) => isDesktop(job.device));
 
+  if (mobileJobs.length === 0 && desktopJobs.length === 0) {
+    return (
+      <EmptyBox>
+        <MobileOutlined style={{ fontSize: '4rem' }} />
+        <p style={{ marginTop: '2rem' }}>Waiting for running...!</p>
+      </EmptyBox>
+    );
+  }
+
   return (
     <>
       {mobileJobs.length > 0 && (
@@ -55,13 +64,15 @@ const PipelineDeviceGrid = ({ routineJobs }: Props) => {
         <DesktopBox>
           {desktopJobs.map((deviceJob) => {
             if (deviceJob?.status === PIPELINE_STATUS.IN_PROGRESS) {
-              return (
-                <CellWrapper key={deviceJob.routineDeviceJobId} isDesktop={true}>
-                  <div>
-                    <DeviceLiveCell device={deviceJob.device} />
-                  </div>
-                </CellWrapper>
-              );
+              if (!!deviceJob.browserName && deviceJob.windowProcessId !== null) {
+                return (
+                  <CellWrapper key={deviceJob.routineDeviceJobId} isDesktop={true}>
+                    <div>
+                      <DeviceLiveCell device={deviceJob.device} pid={deviceJob.windowProcessId} />
+                    </div>
+                  </CellWrapper>
+                );
+              }
             }
 
             return null;

diff --git a/projects/console-web-front/src/components/streaming/DeviceStreaming.tsx b/projects/console-web-front/src/components/streaming/DeviceStreaming.tsx
@@ -20,14 +20,15 @@ import StreamingVideo from './StreamingVideo';
 interface Props {
   device: DeviceBase | undefined;
   children: React.ReactNode;
+  pid?: number;
 }
 
 const THROTTLE_MS = 33;
 
-const DeviceStreaming = ({ device, children }: Props) => {
+const DeviceStreaming = ({ device, children, pid }: Props) => {
   const [mode, setMode] = useState<StreamingMode>('input');
   const isSelf = useLocalDeviceDetect(device);
-  const { loading, deviceRTCCaller, peerConnection, videoRef, error } = useRTCConnection(device, THROTTLE_MS);
+  const { loading, deviceRTCCaller, peerConnection, videoRef, error } = useRTCConnection({ device, pid }, THROTTLE_MS);
   const deviceService = useDeviceClient(peerConnection, THROTTLE_MS);
   const gamiumService = useGamiumClient(
     peerConnection,

diff --git a/projects/console-web-front/src/hooks/streaming/useRTCConnection.ts b/projects/console-web-front/src/hooks/streaming/useRTCConnection.ts
@@ -14,7 +14,12 @@ import { WebRtcExchangerFactory } from '../../utils/streaming/web-rtc-exchanger'
 
 type DataChannelLabel = PrivateProtocol.DataChannelLabel;
 
-const useRTCConnection = (device: DeviceBase | undefined, sendThrottleMs: number) => {
+type Option = {
+  device?: DeviceBase;
+  pid?: number;
+};
+
+const useRTCConnection = ({ device, pid }: Option, sendThrottleMs: number) => {
   const router = useRouter();
   const organizationId = router.query.orgId as OrganizationId;
   const { fps, resolution } = useStreamingOptionStore((state) => state.option);
@@ -68,8 +73,8 @@ const useRTCConnection = (device: DeviceBase | undefined, sendThrottleMs: number
   }, []);
 
   useEffect(() => {
-    if (!device) {
-      console.error('No device');
+    if (!device && !pid) {
+      console.error('No device or pid');
       return;
     }
 
@@ -151,34 +156,37 @@ const useRTCConnection = (device: DeviceBase | undefined, sendThrottleMs: number
     const streamingOption: StreamingOption = {
       screen: {
         maxFps: fps ?? 60,
+        pid,
         maxResolution: resolution ?? 720,
       },
     };
 
-    const { platform, serial } = device;
-    const webRtcExchanger = WebRtcExchangerFactory.createByPlatform(platform);
-    webRtcExchanger.startExchange(
-      organizationId,
-      device.deviceId,
-      serial,
-      pc,
-      device.platform,
-      streamingOption,
-      (error) => {
-        console.debug('startExchange error', error);
-        if (isVideoShowing(videoRef.current)) {
-          console.debug('rtc in progress. so ignore ws error', error);
-          return;
-        }
-        setHAConnectionError(error);
-      },
-    );
+    if (device) {
+      const { platform, serial } = device;
+      const webRtcExchanger = WebRtcExchangerFactory.createByPlatform(platform);
+      webRtcExchanger.startExchange(
+        organizationId,
+        device.deviceId,
+        serial,
+        pc,
+        device.platform,
+        streamingOption,
+        (error) => {
+          console.debug('startExchange error', error);
+          if (isVideoShowing(videoRef.current)) {
+            console.debug('rtc in progress. so ignore ws error', error);
+            return;
+          }
+          setHAConnectionError(error);
+        },
+      );
 
-    const caller = new DeviceRTCCaller(device.deviceId, dc);
-    caller.setSendThrottleMs(sendThrottleMs);
+      const caller = new DeviceRTCCaller(device.deviceId, dc);
+      caller.setSendThrottleMs(sendThrottleMs);
+      setDeviceRTCCaller(caller);
+    }
 
     setPeerConnection(pc);
-    setDeviceRTCCaller(caller);
 
     return () => {
       if (videoRef.current) {
@@ -190,7 +198,7 @@ const useRTCConnection = (device: DeviceBase | undefined, sendThrottleMs: number
       setHAConnectionError(undefined);
       setLoading(true);
     };
-  }, [device?.deviceId, fps, resolution]);
+  }, [device?.deviceId, pid, fps, resolution]);
 
   useEffect(() => {
     return () => {