From dd6202cc2efe1733902f6620dbaa345c496e9f24 Mon Sep 17 00:00:00 2001 From: Kevin Li Date: Wed, 9 Aug 2023 19:17:43 -0700 Subject: [PATCH 01/11] completed version1 webrtc testing Co-authored-by: Alexander Derritt --- src/client/components/main/MainContainer.tsx | 8 +- .../main/WebRTC-composer/WebRTCComposer.tsx | 36 ++-- .../WebRTC-composer/WebRTCServerEntryForm.tsx | 65 ++++--- .../WebRTCSessionEntryForm.tsx | 1 + .../main/http2-composer/Http2Body.tsx | 2 +- .../response-composer/EventsContainer.tsx | 29 ++- .../ResponsePaneContainer.tsx | 55 ++++-- .../workspace/WorkspaceCollectionElement.jsx | 16 +- .../controllers/webrtcPeerController.ts | 182 ++++++++++++++++-- .../slices/newRequestSlice.ts | 8 + src/types.ts | 7 +- 11 files changed, 324 insertions(+), 85 deletions(-) diff --git a/src/client/components/main/MainContainer.tsx b/src/client/components/main/MainContainer.tsx index 37451e30..c5298f34 100644 --- a/src/client/components/main/MainContainer.tsx +++ b/src/client/components/main/MainContainer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Routes, Route } from 'react-router-dom'; import { connect } from 'react-redux'; -import { ReqRes, $TSFixMe, $TSFixMeObject } from '../../../types'; +import { ReqRes, $TSFixMe, $TSFixMeObject, RequestWebRTC } from '../../../types'; import * as ReqResSlice from '../../toolkit-refactor/slices/reqResSlice'; @@ -13,6 +13,7 @@ import { newRequestBodySet, newRequestHeadersSet, newRequestWebRTCSet, + newRequestWebRTCOfferSet, } from '../../toolkit-refactor/slices/newRequestSlice'; import { openApiRequestsReplaced } from '../../toolkit-refactor/slices/newRequestOpenApiSlice'; @@ -85,9 +86,12 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({ newRequestBodySet: (requestBodyObj: $TSFixMeObject) => { dispatch(newRequestBodySet(requestBodyObj)); }, - newRequestWebRTCSet: (newReqtWebRTCObj: $TSFixMeObject) => { + newRequestWebRTCSet: (newReqtWebRTCObj: RequestWebRTC) => { dispatch(newRequestWebRTCSet(newReqtWebRTCObj)); }, + newRequestWebRTCOfferSet: (newReqtWebRTCOffer: string) => { + dispatch(newRequestWebRTCOfferSet(newReqtWebRTCOffer)); + }, newTestContentSet: (testContent: $TSFixMe) => { dispatch(newTestContentSet(testContent)); }, diff --git a/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx b/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx index 91f7b54d..ebc8b6d5 100644 --- a/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx +++ b/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { v4 as uuid } from 'uuid'; // Import controllers import historyController from '../../../controllers/historyController'; @@ -13,6 +13,7 @@ import WebRTCSessionEntryForm from './WebRTCSessionEntryForm'; import WebRTCServerEntryForm from './WebRTCServerEntryForm'; import NewRequestButton from '../sharedComponents/requestButtons/NewRequestButton'; // import TestEntryForm from '../sharedComponents/requestForms/TestEntryForm'; +import webrtcPeerController from '../../../controllers/webrtcPeerController'; // Import MUI components import { Box } from '@mui/material'; @@ -36,6 +37,7 @@ export default function WebRTCComposer(props: MainContainerProps) { newTestContentSet, newRequestBodySet, newRequestWebRTCSet, + newRequestWebRTCOfferSet, newRequestBody, newRequestBody: { rawType, bodyContent, bodyVariables, bodyType }, newRequestHeadersSet, @@ -49,24 +51,30 @@ export default function WebRTCComposer(props: MainContainerProps) { warningMessage, reqResItemAdded, setWorkspaceActiveTab, - newRequestWebRTC, // state.newRequest.newRequestWebRTC + newRequestWebRTC, } = props; /* newRequestWebRTCSet(...newRequestWebRTC, ) */ - + + useEffect(() => { + webrtcPeerController.createPeerConnection(newRequestWebRTC); + }, []); // Builds ReqRes object from properties in NewRequest const composeReqRes = (): ReqRes => { const requestWebRTC: RequestWebRTC = { - webRTCEntryMode: 'Manual', - webRTCDataChannel: 'Video', + network: newRequestWebRTC.network, + webRTCEntryMode: newRequestWebRTC.webRTCEntryMode, + webRTCDataChannel: newRequestWebRTC.webRTCDataChannel, webRTCWebsocketServer: null, webRTCOffer: newRequestWebRTC.webRTCOffer, webRTCAnswer: newRequestWebRTC.webRTCAnswer, - webRTCpeerConnection: null, - } + webRTCpeerConnection: newRequestWebRTC.webRTCpeerConnection, + webRTCLocalStream: newRequestWebRTC.webRTCLocalStream, + webRTCRemoteStream: newRequestWebRTC.webRTCRemoteStream, + }; const reqRes: ReqRes = { id: uuid(), @@ -95,13 +103,13 @@ export default function WebRTCComposer(props: MainContainerProps) { }; return reqRes; - } + }; // Saves ReqRes object into history and ReqResArray const addNewRequest = (): void => { - const reqRes: ReqRes = composeReqRes() + const reqRes: ReqRes = composeReqRes(); - historyController.addHistoryToIndexedDb(reqRes); + // historyController.addHistoryToIndexedDb(reqRes); reqResItemAdded(reqRes); composerFieldsReset(); @@ -136,7 +144,7 @@ export default function WebRTCComposer(props: MainContainerProps) { // newRequestHeaders={newRequestHeaders} // newRequestStreams={newRequestStreams} // newRequestBody={newRequestBody} - fieldsReplaced={fieldsReplaced} + fieldsReplaced={fieldsReplaced} // newRequestHeadersSet={newRequestHeadersSet} // newRequestStreamsSet={newRequestStreamsSet} // newRequestCookiesSet={newRequestCookiesSet} @@ -149,6 +157,9 @@ export default function WebRTCComposer(props: MainContainerProps) { +
+ +
); diff --git a/src/client/components/main/WebRTC-composer/WebRTCServerEntryForm.tsx b/src/client/components/main/WebRTC-composer/WebRTCServerEntryForm.tsx index a4104d4c..29625521 100644 --- a/src/client/components/main/WebRTC-composer/WebRTCServerEntryForm.tsx +++ b/src/client/components/main/WebRTC-composer/WebRTCServerEntryForm.tsx @@ -19,13 +19,17 @@ import TextCodeArea from '../sharedComponents/TextCodeArea'; interface Props { newRequestWebRTC: RequestWebRTC; newRequestWebRTCSet: NewRequestWebRTCSet; + createOffer: (newRequestWebRTC: RequestWebRTC) => void; + createAnswer: (newRequestWebRTC: RequestWebRTC) => void; + warningMessage: { body: string; } | null; } const WebRTCServerEntryForm: React.FC = (props: Props) => { - let { newRequestWebRTC, newRequestWebRTCSet } = props; + let { newRequestWebRTC, newRequestWebRTCSet, createOffer, createAnswer } = + props; let [dataTypeDropdownIsActive, setDataTypeDropdownIsActive] = useState(false); const requestBody = useSelector( @@ -53,32 +57,32 @@ const WebRTCServerEntryForm: React.FC = (props: Props) => { // // ); // } // }, [bodyContent, bodyIsNew]); - useEffect(() => { - let servers = { - iceServers: [ - { - urls: [ - 'stun:stun1.1.google.com:19302', - 'stun:stun2.1.google.com:19302', - ], - }, - ], - }; - let peerConnection = new RTCPeerConnection(servers); - newRequestWebRTCSet({ - ...newRequestWebRTC, - webRTCpeerConnection: peerConnection, - }); - }, []); + // useEffect(() => { + // let servers = { + // iceServers: [ + // { + // urls: [ + // 'stun:stun1.1.google.com:19302', + // 'stun:stun2.1.google.com:19302', + // ], + // }, + // ], + // }; + // let peerConnection = new RTCPeerConnection(servers); + // newRequestWebRTCSet({ + // ...newRequestWebRTC, + // webRTCpeerConnection: peerConnection, + // }); + // }, []); - const createOffer = async () => { - const { webRTCpeerConnection } = newRequestWebRTC; - let offer = await webRTCpeerConnection.createOffer(); - newRequestWebRTCSet({ - ...newRequestWebRTC, - webRTCOffer: JSON.stringify(offer), - }); - }; + // const createOffer = async () => { + // const { webRTCpeerConnection } = newRequestWebRTC; + // let offer = await webRTCpeerConnection.createOffer(); + // newRequestWebRTCSet({ + // ...newRequestWebRTC, + // webRTCOffer: JSON.stringify(offer), + // }); + // }; return (
@@ -171,7 +175,9 @@ const WebRTCServerEntryForm: React.FC = (props: Props) => { @@ -191,10 +197,7 @@ const WebRTCServerEntryForm: React.FC = (props: Props) => { className="button is-normal is-primary-100 add-request-button no-border-please" style={{ margin: '10px' }} onClick={() => { - newRequestWebRTCSet({ - ...newRequestWebRTC, - webRTCAnswer: 'answer generated...', - }); + createAnswer(newRequestWebRTC); }} > Get Answer diff --git a/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx b/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx index 7cc9ef5d..293f0ff6 100644 --- a/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx +++ b/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx @@ -13,6 +13,7 @@ interface Props { newRequestFields: NewRequestFields; warningMessage: { uri: string }; newRequestWebRTCSet: NewRequestWebRTCSet; + // createOffer: (newRequestWebRTC: RequestWebRTC) => void; } const WebRTCSessionEntryForm: React.FC = (props: Props) => { diff --git a/src/client/components/main/http2-composer/Http2Body.tsx b/src/client/components/main/http2-composer/Http2Body.tsx index 9833e8da..dab0247b 100644 --- a/src/client/components/main/http2-composer/Http2Body.tsx +++ b/src/client/components/main/http2-composer/Http2Body.tsx @@ -1,6 +1,6 @@ import React from 'react'; // Http2Body needs access to the Redux store. -import { connect } from 'react-redux'; +import { connect } from 'react-redux';Nothing import { AppDispatch, RootState } from '../../../toolkit-refactor/store'; import { $TSFixMeObject } from '../../../../types'; diff --git a/src/client/components/main/response-composer/EventsContainer.tsx b/src/client/components/main/response-composer/EventsContainer.tsx index 7803eeb0..7a111bf7 100644 --- a/src/client/components/main/response-composer/EventsContainer.tsx +++ b/src/client/components/main/response-composer/EventsContainer.tsx @@ -6,15 +6,12 @@ import EventPreview from './EventPreview'; import { EditorView } from '@codemirror/view'; import { vscodeDark } from '@uiw/codemirror-theme-vscode'; import { json } from '@codemirror/lang-json'; +import { ReqResRequest, RequestWebRTC } from '../../../../types'; interface EventsContainerProps { currentResponse: { connection: string; - request: { - method: string; - className?: object; - classEventPreviewsName: string; - }; + request: RequestWebRTC | ReqResRequest; response: { events: any[]; headers?: { @@ -25,9 +22,9 @@ interface EventsContainerProps { }; } -function EventsContainer({ currentResponse }: EventsContainerProps) { +function EventsContainer(props: any) { + const { currentResponse } = props; const isDark = useSelector((state: any) => state.ui.isDark); - const { request, response } = currentResponse; if (!response || !response.events || response.events.length < 1) { return ; @@ -78,6 +75,24 @@ function EventsContainer({ currentResponse }: EventsContainerProps) { className="tab_content-response overflow-event-parent-container" id="events-display" > + {request.webRTCDataChannel && ( +
+ +
+ )} {request.method === 'GET' && ( { const currentResponse = useSelector( (store: RootState) => store.reqRes.currentResponse ); + console.log(currentResponse); const { id, connection, request, response, isHTTP2, gRPC } = currentResponse; return ( @@ -55,7 +56,7 @@ const ResponsePaneContainer: FC = () => { {`${response?.responseSize}kb`}
)} -

Nothing

+

Response

@@ -64,7 +65,7 @@ const ResponsePaneContainer: FC = () => {
{/* RENDER RE-SEND REQUEST BUTTON ONLY FOR NOT WEB SOCKETS / SUBSCRIPTIONS */} {id && diff --git a/src/client/components/workspace/WorkspaceCollectionElement.jsx b/src/client/components/workspace/WorkspaceCollectionElement.jsx index aeff0925..2268cef8 100644 --- a/src/client/components/workspace/WorkspaceCollectionElement.jsx +++ b/src/client/components/workspace/WorkspaceCollectionElement.jsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import connectionController from '../../controllers/reqResController'; -import testSDPConnection from '../../controllers/webrtcPeerController'; +import webrtcPeerController from '../../controllers/webrtcPeerController'; import { responseDataSaved } from '../../toolkit-refactor/slices/reqResSlice'; // import { fieldsReplaced } from '../../toolkit-refactor/slices/newRequestFieldsSlice'; // import { @@ -146,7 +146,7 @@ const WorkspaceCollectionElement = (props) => {
- +
diff --git a/src/client/components/main/response-composer/ResponsePaneContainer.tsx b/src/client/components/main/response-composer/ResponsePaneContainer.tsx index d81adbf0..42e1ba41 100644 --- a/src/client/components/main/response-composer/ResponsePaneContainer.tsx +++ b/src/client/components/main/response-composer/ResponsePaneContainer.tsx @@ -170,7 +170,6 @@ const ResponsePaneContainer: FC = () => { style={{ width: '100%', height: '100%', - border: 'solid black', }} > From 5ad82f99cf4a2764b2b6ba308ec2a9fc3c20e4b5 Mon Sep 17 00:00:00 2001 From: Kevin Li Date: Wed, 9 Aug 2023 20:06:16 -0700 Subject: [PATCH 04/11] cleanup --- .../main/WebRTC-composer/WebRTCComposer.tsx | 57 +++++++------------ .../WebRTCSessionEntryForm.tsx | 52 +++-------------- .../ResponsePaneContainer.tsx | 1 - 3 files changed, 28 insertions(+), 82 deletions(-) diff --git a/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx b/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx index 7949f2b6..5cb7c76f 100644 --- a/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx +++ b/src/client/components/main/WebRTC-composer/WebRTCComposer.tsx @@ -1,8 +1,6 @@ import React, { useEffect } from 'react'; import { v4 as uuid } from 'uuid'; -// Import controllers -import historyController from '../../../controllers/historyController'; -// Import local components + import { ReqRes, RequestWebRTC, MainContainerProps } from '../../../../types'; /** @@ -21,43 +19,15 @@ export default function WebRTCComposer(props: MainContainerProps) { const { composerFieldsReset, fieldsReplaced, - newRequestFields, - newRequestFields: { - gRPC, - url, - method, - protocol, - graphQL, - restUrl, - webrtc, - webrtcUrl, - network, - testContent, - }, - newTestContentSet, - newRequestBodySet, newRequestWebRTCSet, newRequestWebRTCOfferSet, - newRequestBody, - newRequestBody: { rawType, bodyContent, bodyVariables, bodyType }, - newRequestHeadersSet, - // webrtcData, - newRequestHeaders, - newRequestCookiesSet, - newRequestStreamsSet, - newRequestStreams, currentTab, - setWarningMessage, warningMessage, reqResItemAdded, setWorkspaceActiveTab, newRequestWebRTC, } = props; - /* - newRequestWebRTCSet(...newRequestWebRTC, ) - */ - useEffect(() => { webrtcPeerController.createPeerConnection(newRequestWebRTC); }, []); @@ -138,13 +108,13 @@ export default function WebRTCComposer(props: MainContainerProps) { > {/** @todo Fix TSX type error */} -
- -
+ {newRequestWebRTC.webRTCDataChannel === 'Video' && ( +
+ +
+ )} ); diff --git a/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx b/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx index 293f0ff6..fdf44d06 100644 --- a/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx +++ b/src/client/components/main/WebRTC-composer/WebRTCSessionEntryForm.tsx @@ -1,19 +1,15 @@ import React, { useState, useRef } from 'react'; import { - $TSFixMe, - NewRequestFields, NewRequestWebRTCSet, RequestWebRTC, } from '../../../../types'; + import dropDownArrow from '../../../../assets/icons/arrow_drop_down_white_192x192.png'; interface Props { - fieldsReplaced: $TSFixMe; newRequestWebRTC: RequestWebRTC; - newRequestFields: NewRequestFields; - warningMessage: { uri: string }; newRequestWebRTCSet: NewRequestWebRTCSet; - // createOffer: (newRequestWebRTC: RequestWebRTC) => void; + warningMessage: { uri: string }; } const WebRTCSessionEntryForm: React.FC = (props: Props) => { @@ -85,50 +81,16 @@ const WebRTCSessionEntryForm: React.FC = (props: Props) => { - {/*
- -
- */} ); }; export default WebRTCSessionEntryForm; - -// import React from 'react'; - -// const WebRTCSessionEntryForm = ({ warningMessage }) => { -// return ( -//
-//
-// SDP -//
-// -// {warningMessage.uri && ( -//
{warningMessage.uri}
-// )} -//
-// ); -// }; - -// export default WebRTCSessionEntryForm; diff --git a/src/client/components/main/response-composer/ResponsePaneContainer.tsx b/src/client/components/main/response-composer/ResponsePaneContainer.tsx index 42e1ba41..d6ae463d 100644 --- a/src/client/components/main/response-composer/ResponsePaneContainer.tsx +++ b/src/client/components/main/response-composer/ResponsePaneContainer.tsx @@ -30,7 +30,6 @@ const ResponsePaneContainer: FC = () => { const currentResponse = useSelector( (store: RootState) => store.reqRes.currentResponse ); - console.log(currentResponse); const { id, connection, request, response, isHTTP2, gRPC } = currentResponse; return ( From 50aef9ff20d5c4ed17cab9b1c23fff53cbb4a69b Mon Sep 17 00:00:00 2001 From: Kevin Li Date: Wed, 9 Aug 2023 20:14:46 -0700 Subject: [PATCH 05/11] fixed HTMLVideoElement type error --- src/client/controllers/webrtcPeerController.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/controllers/webrtcPeerController.ts b/src/client/controllers/webrtcPeerController.ts index cbc13d81..22e82b05 100644 --- a/src/client/controllers/webrtcPeerController.ts +++ b/src/client/controllers/webrtcPeerController.ts @@ -57,13 +57,13 @@ const webrtcPeerController = { audio: false, }); - document.getElementById('user-1')!.srcObject = localStream; + let localVideoStream: HTMLVideoElement = document.getElementById('user-1') + localVideoStream.srcObject = localStream; // function is invoked when track is received on localStream localStream.getTracks().forEach((track) => { peerConnection.addTrack(track, localStream); }); - -0; let remoteStream = new MediaStream(); peerConnection.ontrack = async (event) => { From 705bda83cddb2dbe556f39c866b1a67ef59f0f48 Mon Sep 17 00:00:00 2001 From: Kevin Li Date: Wed, 9 Aug 2023 20:18:45 -0700 Subject: [PATCH 06/11] cleanup --- .../controllers/webrtcPeerController.ts | 36 ++----------------- 1 file changed, 2 insertions(+), 34 deletions(-) diff --git a/src/client/controllers/webrtcPeerController.ts b/src/client/controllers/webrtcPeerController.ts index 22e82b05..0ff26696 100644 --- a/src/client/controllers/webrtcPeerController.ts +++ b/src/client/controllers/webrtcPeerController.ts @@ -4,21 +4,8 @@ import { newRequestWebRTCOfferSet, } from '../toolkit-refactor/slices/newRequestSlice'; -import Store from '../toolkit-refactor/store'; import { RequestWebRTC } from '../../types'; -// THIS IS WHAT REQUESTWEBRTC LOOKS LIKE -// export interface RequestWebRTC { -// webRTCEntryMode: 'Manual' | 'WS'; -// webRTCDataChannel: 'Audio' | 'Video' | 'Text'; -// webRTCWebsocketServer: string | null; -// webRTCOffer: string | null; -// webRTCAnswer: string | null; -// webRTCpeerConnection: RTCPeerConnection | null; -// webRTCLocalStream: null, -// webRTCRemoteStream: null, -// } - const webrtcPeerController = { createPeerConnection: async ( newRequestWebRTC: RequestWebRTC @@ -33,25 +20,9 @@ const webrtcPeerController = { }, ], }; - // type VideoProps = VideoHTMLAttributes & { - // srcObject: MediaStream; - // }; - - // export const Video = ({ srcObject, ...props }: VideoProps) => { - // const refVideo = useCallback( - // (node: HTMLVideoElement) => { - // if (node) node.srcObject = srcObject; - // }, - // [srcObject], - // ); - - // return