martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

streaming test video over peer

Browse Source
This commit is contained in:
Roland Osborne 2023-03-24 15:47:19 -07:00
parent d5ada715af
commit 5836e856f6
4 changed files with 65 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
net/web/src/context/useRingContext.hook.js
View File

@ -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 }));

41
net/web/src/session/Session.jsx
View File

@ -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>

18
net/web/src/session/Session.styled.js
View File

@ -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;

4
net/web/src/session/useSession.hook.js
View File

@ -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(() => {