streaming test video over peer

net/web/src/context/useRingContext.hook.js

@@ -10,6 +10,7 @@ export function useRingContext() {
   const [state, setState] = useState({
     ringing: new Map(),
     callStatus: null,
+    stream: null,
   });
   const access = useRef(null);
 
@@ -84,7 +85,7 @@ export function useRingContext() {
         // form peer connection
         pc.current = new RTCPeerConnection();
         pc.current.ontrack = ({streams: [stream]}) => {
-          console.log("ON TRACK");
+          updateState({ stream });
         };
         pc.current.onicecandidate = ({candidate}) => {
           ws.current.send(JSON.stringify({ candidate }));
@@ -211,7 +212,7 @@ export function useRingContext() {
       // form peer connection
       pc.current = new RTCPeerConnection();
       pc.current.ontrack = ({streams: [stream]}) => {
-        console.log("ON TRACK");
+        updateState({ stream });
       };
       pc.current.onicecandidate = ({candidate}) => {
         ws.current.send(JSON.stringify({ candidate }));

net/web/src/session/Session.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Drawer, Spin } from 'antd';
 import { SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
@@ -20,8 +20,8 @@ export function Session() {
 
   const { state, actions } = useSession();
   const [ringing, setRinging] = useState([]);
+  const vid = useRef();
 
-  console.log(state.ringing);
   useEffect(() => {
     let incoming = [];
     for (let i = 0; i < state.ringing.length; i++) {
@@ -40,6 +40,11 @@ export function Session() {
     setRinging(incoming);
   }, [state.ringing]);
 
+  useEffect(() => {
+    if (vid.current) {
+      vid.current.srcObject = state.stream;
+    }
+  }, [state.stream]);
 
   const closeAccount = () => {
     actions.closeProfile();
@@ -125,6 +130,16 @@ export function Session() {
                 </div>
               </div>
             )}
+            { state.callStatus && (
+              <div className="calling">
+                <div className="calling-screen">
+                  { state.stream && (
+                    <video ref={vid} autoPlay 
+            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) && (
@@ -212,6 +227,16 @@ export function Session() {
                 </div>
               </div>
             )}
+            { state.callStatus && (
+              <div className="calling">
+                <div className="calling-screen">
+                  { state.stream && (
+                    <video ref={vid} autoPlay 
+            complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+                  )}
+                </div>
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -262,14 +287,24 @@ export function Session() {
                 <Profile />
               </div>
             )}
-            <div className="ringing">
             { ringing.length > 0 && (
+              <div className="ringing">
                 <div className="ringing-list">
                   {ringing}
                 </div>
+              </div>
+            )}
+            { state.callStatus && (
+              <div className="calling">
+                <div className="calling-screen">
+                  { state.stream && (
+                    <video ref={vid} autoPlay 
+            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} />
           </div>

net/web/src/session/Session.styled.js

@@ -12,9 +12,27 @@ 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;
+    }
+  }
+
   .ringing {
     position: absolute;
     top: 20%;
+    max-height: 15%;
     width: 100%;
     display: flex;
     flex-direction: row;

net/web/src/session/useSession.hook.js

@@ -24,6 +24,8 @@ export function useSession() {
     account: false,
     loading: false,
     ringing: [],
+    callStatus: null,
+    stream: null,
   });
 
   const app = useContext(AppContext);
@@ -56,7 +58,7 @@ export function useSession() {
         ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken });
       }
     });
-    updateState({ ringing });
+    updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus });
   }, [ring.state]);
 
   useEffect(() => {