show local stream in picture

2025-02-14 12:39:17 +00:00 · 2023-03-25 23:07:00 -07:00 · 2023-03-25 23:07:00 -07:00 · e6a706e459
commit e6a706e459
parent 10f1c77158
4 changed files with 78 additions and 65 deletions
--- a/net/web/src/context/useRingContext.hook.js
+++ b/net/web/src/context/useRingContext.hook.js
@ -10,7 +10,8 @@ export function useRingContext() {
  const [state, setState] = useState({
    ringing: new Map(),
    callStatus: null,
-    stream: null,
+    localStream: null,
+    remoteStream: null,
  });
  const access = useRef(null);

@ -90,7 +91,7 @@ export function useRingContext() {
          if (!stream.current) {
 console.log("ADD STREAM");
            stream.current = new MediaStream();
-            updateState({ stream: stream.current });
+            updateState({ remoteStream: stream.current });
          }
          stream.current.addTrack(ev.track);
        };
@ -108,8 +109,8 @@ console.log("ADD STREAM");
          }
        };

-console.log("ADD TRANSCEIVER");
        const media = await whiteNoise();
+        updateState({ localStream: media });
        pc.current.addTransceiver(media.getTracks()[0], {streams: [media]});

        ws.current = createWebsocket(`wss://${contactNode}/signal`);
@ -224,7 +225,7 @@ console.log("ADD TRANSCEIVER");
        if (!stream.current) {
          stream.current = new MediaStream();
 console.log("ADD STREAM");
-          updateState({ stream: stream.current });
+          updateState({ remoteStream: stream.current });
        }
        stream.current.addTrack(ev.track);
      };
@ -246,6 +247,7 @@ console.log("ADD STREAM");
        video: true,
        audio: true,
      });
+      updateState({ localStream: stream });
      for (const track of stream.getTracks()) {
 console.log("ADD TRANSCEIVER TRACK");
        pc.current.addTrack(track);
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { Modal, Drawer, Spin } from 'antd';
-import { RingingWrapper, SessionWrapper } from './Session.styled';
+import { CallingWrapper, RingingWrapper, SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
 import { Conversation } from './conversation/Conversation';
 import { Details } from './details/Details';
@ -18,11 +18,12 @@ import { EyeInvisibleOutlined, CloseOutlined, PhoneOutlined } from '@ant-design/

 export function Session() {

-  const [ showRinging, setShowRinging ] = useState(false);
-  const [ modal, modalContext ] = Modal.useModal();
  const { state, actions } = useSession();
  const [ringing, setRinging] = useState([]);
-  const vid = useRef();
+  const [callWidth, setCallWidth] = useState(320);
+  const [callHeight, setCallHeight] = useState(240);
+  const remote = useRef();
+  const local = useRef();

  useEffect(() => {
    let incoming = [];
@ -43,16 +44,48 @@ export function Session() {
  }, [state.ringing]);

  useEffect(() => {
-console.log("SHOW>>>>>", ringing.length > 0);
-
-    setShowRinging(ringing.length > 0 && state.callStatus == null);
-  }, [state.ringing, state.callStatus]);
+    if (remote.current) {
+      remote.current.onloadedmetadata = (ev) => {
+        const { videoWidth, videoHeight } = ev.target || { videoWidth: 320, videoHeight: 240 }
+        if ((window.innerWidth * 8) / 10 < videoWidth) {
+          const scaledWidth = window.innerWidth * 8 / 10;
+          const scaledHeight = videoHeight * (scaledWidth / videoWidth)
+          if ((window.innerHeight * 8) / 10 < scaledHeight) {
+            const height = (window.innerHeight * 8) / 10;
+            setCallHeight(height);
+            setCallWidth(videoWidth * (height / videoHeight));
+          }
+          else {
+            setCallHeight(scaledHeight);
+            setCallWidth(scaledWidth);
+          }
+        }
+        else if ((window.innerHeight * 8) / 10 < videoHeight) {
+          const height = (window.innerHeight * 8) / 10;
+          setCallHeight(height);
+          setCallWidth(videoWidth * (height / videoHeight));
+        }
+        else {
+          setCallHeight(videoHeight);
+          setCallWidth(videoWidth);
+        }
+      };
+      remote.current.srcObject = state.remoteStream;
+    }
+    else {
+      console.log("video player not set");
+    }
+  }, [state.remoteStream]);

  useEffect(() => {
-    if (vid.current) {
-      vid.current.srcObject = state.stream;
+    if (local.current) {
+      local.current.srcObject = state.localStream;
    }
-  }, [state.stream]);
+  }, [state.localStream]);
+
+  useEffect(() => {
+    console.log("DIM: ", callWidth, callHeight);
+  }, [callWidth, callHeight]);

  const closeAccount = () => {
    actions.closeProfile();
@ -131,16 +164,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                <Profile closeProfile={actions.closeProfile} />
              </div>
            )}
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <video ref={vid} autoPlay controls
-            complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
-                  )}
-                </div>
-              </div>
-            )}
          </div>
          <div class="right">
            { (state.conversation || state.details) && (
@ -221,16 +244,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                <Profile closeProfile={closeAccount}/>
              )}
            </Drawer>
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <video ref={vid} autoPlay controls 
-            complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
-                  )}
-                </div>
-              </div>
-            )}
          </div>
        </div>
      )}
@ -281,16 +294,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                <Profile />
              </div>
            )}
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <video ref={vid} autoPlay controls 
-            complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
-                  )}
-                </div>
-              </div>
-            )}
          </div>
          <div class="bottom">
            <BottomNav state={state} actions={actions} />
@ -304,6 +307,20 @@ console.log("SHOW>>>>>", ringing.length > 0);
          </div>
        </RingingWrapper>
      </Modal>
+      <Modal centered visible={state.callStatus} footer={null} closable={false} width={callWidth + 12} height={callHeight + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6 }}>
+        <CallingWrapper>
+          { state.remoteStream && (
+            <video ref={remote} disablepictureinpicture autoPlay style={{ width: '100%', height: '100%' }}
+    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+          )}
+          { state.localStream && (
+            <div className="calling-local">
+              <video ref={local} disablepictureinpicture autoPlay style={{ width: '100%', height: '100%' }}
+    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+            </div>
+          )}
+        </CallingWrapper>
+      </Modal>
    </SessionWrapper>
  );
 }
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@ -72,6 +72,17 @@ export const RingingWrapper = styled.div`
 }
 `;

+export const CallingWrapper = styled.div`
+  .calling-local {
+    width: 33%;
+    height: 33%;
+    bottom: 16px;
+    right: 16px;
+    position: absolute;
+  }
+`;
+
+
 export const SessionWrapper = styled.div`
  height: 100%;
  width: 100%;
@ -83,23 +94,6 @@ export const SessionWrapper = styled.div`
    z-index: 2;
  }

-  .calling {
-    position: absolute;
-    top: 35%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-
-    .calling-screen {
-      width: 256;
-      height: 256;
-      background-color: yellow;
-    }
-  }
-
  .spinner {
    position: absolute;
    width: 100%;
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@ -25,7 +25,8 @@ export function useSession() {
    loading: false,
    ringing: [],
    callStatus: null,
-    stream: null,
+    localStream: null,
+    remoteStream: null,
  });

  const app = useContext(AppContext);
@ -60,9 +61,8 @@ export function useSession() {
        }
      }
    });
-console.log(ringing, ring.state.callStatus);

-    updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus });
+    updateState({ ringing, localStream: ring.state.localStream, remoteStream: ring.state.remoteStream, callStatus: ring.state.callStatus });
  }, [ring.state]);

  useEffect(() => {