Signaling seems to be working better now; loads and player state changes persist existing connections.
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
80fad00cc9
commit
67e319e2c5
@ -13,7 +13,6 @@ import { GlobalContext } from "./GlobalContext.js";
|
||||
//import { PingPong } from "./PingPong.js";
|
||||
import { PlayerList } from "./PlayerList.js";
|
||||
import { Chat } from "./Chat.js";
|
||||
import { MediaAgent } from "./MediaControl.js";
|
||||
import { Board } from "./Board.js";
|
||||
import { Actions } from "./Actions.js";
|
||||
import { base, gamesPath } from './Common.js';
|
||||
@ -40,7 +39,6 @@ const Table = () => {
|
||||
const [ name, setName ] = useState("");
|
||||
const [ error, setError ] = useState(undefined);
|
||||
const [ warning, setWarning ] = useState(undefined);
|
||||
const [ peers, setPeers ] = useState({});
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const [state, setState] = useState(undefined);
|
||||
@ -49,14 +47,10 @@ const Table = () => {
|
||||
const [buildActive, setBuildActive] = useState(false);
|
||||
const [cardActive, setCardActive] = useState(undefined);
|
||||
const [winnerDismissed, setWinnerDismissed] = useState(undefined);
|
||||
const [global, setGlobal] = useState({ setPeers });
|
||||
const [global, setGlobal] = useState({});
|
||||
const [count, setCount] = useState(0);
|
||||
const fields = [ 'id', 'state', 'color', 'name', 'private' ];
|
||||
|
||||
useEffect(() => {
|
||||
console.log(`app - media-agent - peers`, peers);
|
||||
}, [peers]);
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
console.log(`ws: open`);
|
||||
setError("");
|
||||
@ -163,14 +157,12 @@ const Table = () => {
|
||||
|
||||
if (global.ws !== connection
|
||||
|| global.name !== name
|
||||
|| global.gameId !== gameId
|
||||
|| global.peers !== peers) {
|
||||
|| global.gameId !== gameId) {
|
||||
console.log(`board - (app) - setting global`, global,
|
||||
{connection, name, gameId, peers});
|
||||
{connection, name, gameId});
|
||||
setGlobal({
|
||||
ws: connection,
|
||||
name, gameId, peers,
|
||||
setPeers
|
||||
name, gameId
|
||||
});
|
||||
}
|
||||
|
||||
@ -313,7 +305,6 @@ const Table = () => {
|
||||
console.log(`board - (app) - Render with ws: ${ws ? '!' : ''}NULL, connection: ${connection ? '!' : ''}NULL`);
|
||||
|
||||
return <GlobalContext.Provider value={global}>
|
||||
<MediaAgent/>
|
||||
{ /* <PingPong/> */ }
|
||||
<div className="Table">
|
||||
<Activities/>
|
||||
|
||||
@ -20,13 +20,13 @@ const Video = ({ srcObject, local, ...props }) => {
|
||||
return;
|
||||
}
|
||||
const ref = refVideo.current;
|
||||
if (debug) console.log('<video> bind');
|
||||
if (debug) console.log('media-controls <video> bind');
|
||||
ref.srcObject = srcObject;
|
||||
if (local) {
|
||||
ref.muted = true;
|
||||
}
|
||||
return () => {
|
||||
if (debug) console.log('<video> unbind');
|
||||
if (debug) console.log('media-controls <video> unbind');
|
||||
if (ref) {
|
||||
ref.srcObject = undefined;
|
||||
}
|
||||
@ -35,26 +35,23 @@ const Video = ({ srcObject, local, ...props }) => {
|
||||
return <video ref={refVideo} {...props} />;
|
||||
}
|
||||
|
||||
const MediaAgent = () => {
|
||||
const { name, ws, peers, setPeers } = useContext(GlobalContext);
|
||||
|
||||
const MediaAgent = ({setPeers}) => {
|
||||
const { name, ws } = useContext(GlobalContext);
|
||||
const [ peers ] = useState({});
|
||||
const [stream, setStream] = useState(undefined);
|
||||
|
||||
const onTrack = useCallback((event) => {
|
||||
const connection = event.target;
|
||||
|
||||
if (debug) console.log("ontrack", event);
|
||||
for (let key in peers) {
|
||||
if (peers[key].connection === connection) {
|
||||
Object.assign(peers[key].attributes, {
|
||||
console.log("media-agent - ontrack", event);
|
||||
for (let peer in peers) {
|
||||
if (peers[peer].connection === connection) {
|
||||
console.log(`media-agent - ontrack - remote ${peer} stream assigned.`);
|
||||
Object.assign(peers[peer].attributes, {
|
||||
srcObject: event.streams[0]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (debug) console.log(`media-agent - ontrack - remote`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
}, [peers, setPeers]);
|
||||
}, [peers]);
|
||||
const refOnTrack = useRef(onTrack);
|
||||
|
||||
const sendMessage = useCallback((data) => {
|
||||
@ -66,12 +63,13 @@ const MediaAgent = () => {
|
||||
console.log('media-agent - Signaling server said to add peer:', config);
|
||||
|
||||
if (!stream) {
|
||||
console.log(`No local media stream`);
|
||||
console.log(`media-agent - No local media stream`);
|
||||
return;
|
||||
}
|
||||
|
||||
const peer_id = config.peer_id;
|
||||
if (peer_id in peers) {
|
||||
/* This is normal */
|
||||
console.log(`media-agent - addPeer - ${peer_id} already in peers`);
|
||||
return;
|
||||
}
|
||||
@ -92,16 +90,14 @@ const MediaAgent = () => {
|
||||
credential: "1!viagenie"
|
||||
}
|
||||
*/
|
||||
|
||||
]
|
||||
});
|
||||
|
||||
peers[peer_id] = {
|
||||
name: peer_id,
|
||||
connection,
|
||||
muted: false,
|
||||
videoOn: true,
|
||||
attributes: {
|
||||
}
|
||||
initialized: false,
|
||||
attributes: {}
|
||||
};
|
||||
console.log(`media-agent - addPeer - remote`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
@ -113,7 +109,7 @@ const MediaAgent = () => {
|
||||
connection.addEventListener('icecandidateerror', (event) => {
|
||||
if (event.errorCode === 701) {
|
||||
if (connection.icegatheringstate === 'gathering') {
|
||||
console.log(`Unable to reach host: ${event.url}`);
|
||||
console.log(`media-agent - Unable to reach host: ${event.url}`);
|
||||
} else {
|
||||
console.error(`media-agent - icecandidateerror - `, event.errorCode, event.hostcandidate, event.url, event.errorText);
|
||||
}
|
||||
@ -122,18 +118,18 @@ const MediaAgent = () => {
|
||||
|
||||
connection.onicecandidate = (event) => {
|
||||
if (!event.candidate) {
|
||||
console.error(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
|
||||
console.log(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
|
||||
return;
|
||||
}
|
||||
/* If a srflx candidate was found, notify that the STUN server works! */
|
||||
if (event.candidate.type === "srflx"){
|
||||
console.log("The STUN server is reachable!");
|
||||
console.log(` Your Public IP Address is: ${event.candidate.address}`);
|
||||
console.log("media-agent - The STUN server is reachable!");
|
||||
console.log(`media-agent - Your Public IP Address is: ${event.candidate.address}`);
|
||||
}
|
||||
|
||||
/* If a relay candidate was found, notify that the TURN server works! */
|
||||
if (event.candidate.type === "relay"){
|
||||
console.log("The TURN server is reachable !");
|
||||
console.log("media-agent - The TURN server is reachable !");
|
||||
}
|
||||
|
||||
console.log(`media-agent - onicecandidate - `, event.candidate);
|
||||
@ -147,7 +143,7 @@ const MediaAgent = () => {
|
||||
});
|
||||
};
|
||||
|
||||
connection.ontrack = e => refOnTrack.current(e);;
|
||||
connection.ontrack = e => refOnTrack.current(e);
|
||||
|
||||
/* Add our local stream */
|
||||
connection.addStream(stream);
|
||||
@ -267,7 +263,7 @@ const MediaAgent = () => {
|
||||
const refWsMessage = useRef(onWsMessage);
|
||||
|
||||
const onWsClose = (event) => {
|
||||
console.log(`${name} Disconnected from signaling server`);
|
||||
console.log(`media-agent - ${name} Disconnected from signaling server`);
|
||||
/* Tear down all of our peer connections and remove all the
|
||||
* media divs when we disconnect */
|
||||
for (let peer_id in peers) {
|
||||
@ -280,7 +276,7 @@ const MediaAgent = () => {
|
||||
for (let id in peers) {
|
||||
delete peers[id];
|
||||
}
|
||||
if (debug) console.log(`media-agent - close - local or remote?`, peers);
|
||||
if (debug) console.log(`media-agent - close`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
}
|
||||
const refWsClose = useRef(onWsClose);
|
||||
@ -314,9 +310,9 @@ const MediaAgent = () => {
|
||||
if (!(name in peers)) {
|
||||
update = true;
|
||||
peers[name] = {
|
||||
name: name,
|
||||
local: true,
|
||||
muted: true,
|
||||
videoOn: false,
|
||||
initialized: false,
|
||||
attributes: {
|
||||
local: true,
|
||||
srcObject: stream
|
||||
@ -331,8 +327,9 @@ const MediaAgent = () => {
|
||||
update = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (update) {
|
||||
if (debug) console.log(`media-agent - Adding local`, peers);
|
||||
if (debug) console.log(`media-agent - Setting global peers`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
}
|
||||
}, [peers, name, setPeers, stream]);
|
||||
@ -345,7 +342,7 @@ const MediaAgent = () => {
|
||||
const setup_local_media = () => {
|
||||
/* Ask user for permission to use the computers microphone and/or camera,
|
||||
* attach it to an <audio> or <video> tag if they give us access. */
|
||||
console.log("Requesting access to local audio / video inputs");
|
||||
console.log("media-agent - Requesting access to local audio / video inputs");
|
||||
|
||||
navigator.getUserMedia = (navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia ||
|
||||
@ -354,7 +351,7 @@ const MediaAgent = () => {
|
||||
|
||||
return navigator.mediaDevices.getUserMedia({audio: true, video: true})
|
||||
.then((media) => { /* user accepted access to a/v */
|
||||
console.log("Access granted to audio/video");
|
||||
console.log("media-agent - Access granted to audio/video");
|
||||
media.getVideoTracks().forEach((track) => {
|
||||
track.applyConstraints({
|
||||
"video": {
|
||||
@ -378,80 +375,88 @@ const MediaAgent = () => {
|
||||
sendMessage({ type: 'join' });
|
||||
}
|
||||
|
||||
if (debug) console.log(`media-agent - WebSocket open request. Attempting to create local media.`)
|
||||
let abort = false;
|
||||
if (!stream) {
|
||||
if (debug) console.log(`media-agent - WebSocket open request. Attempting to create local media.`);
|
||||
setup_local_media().then((media) => {
|
||||
/* once the user has given us access to their
|
||||
* microphone/camcorder, join the channel and start peering up */
|
||||
setStream(media);
|
||||
join();
|
||||
if (abort) {
|
||||
console.log(`media-agent - aborting setting local media`);
|
||||
} else {
|
||||
setStream(media);
|
||||
join();
|
||||
}
|
||||
}).catch((error) => { /* user denied access to a/v */
|
||||
console.error(error);
|
||||
console.log("Access denied for audio/video");
|
||||
console.log("media-agent - Access denied for audio/video");
|
||||
});
|
||||
}
|
||||
}, [ws, setStream, stream, peers, name, sendMessage]);
|
||||
|
||||
return () => {
|
||||
abort = true;
|
||||
console.log(`media-agent - abort media setup!`);
|
||||
};
|
||||
}, [ws, setStream, stream, name, sendMessage]);
|
||||
|
||||
return <></>;
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const MediaControl = ({isSelf, peer}) => {
|
||||
const { peers } = useContext(GlobalContext);
|
||||
const [control, setControl] = useState(undefined);
|
||||
const [media, setMedia] = useState(undefined);
|
||||
const [muted, setMuted] = useState(undefined);
|
||||
const [videoOn, setVideoOn] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
setControl(peers[peer]);
|
||||
}, [peer, peers, setControl]);
|
||||
if (!peer) {
|
||||
setMedia(undefined);
|
||||
return;
|
||||
}
|
||||
if (peer.local) {
|
||||
setMuted(true);
|
||||
setVideoOn(false);
|
||||
} else {
|
||||
setMuted(false);
|
||||
setVideoOn(true);
|
||||
}
|
||||
setMedia(peer);
|
||||
}, [peer, setMedia, setMuted, setVideoOn]);
|
||||
|
||||
const toggleMute = (event) => {
|
||||
if (debug) console.log(`MediaControl - toggleMute`, !muted);
|
||||
if (debug) console.log(`MediaControl - toggleMute - ${peer.name}`, !muted);
|
||||
setMuted(!muted);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
const toggleVideo = (event) => {
|
||||
if (debug) console.log(`MediaControl - toggleVideo`, !videoOn);
|
||||
if (debug) console.log(`MediaControl - toggleVideo - ${peer.name}`, !videoOn);
|
||||
setVideoOn(!videoOn);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!control) {
|
||||
setMedia(undefined);
|
||||
if (!media) {
|
||||
return;
|
||||
}
|
||||
setMuted(control.muted);
|
||||
setVideoOn(control.videoOn);
|
||||
setMedia(control);
|
||||
}, [control, setMedia]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!control) {
|
||||
return;
|
||||
}
|
||||
if (control.attributes.srcObject) {
|
||||
control.attributes.srcObject.getAudioTracks().forEach((track) => {
|
||||
if (media.attributes.srcObject) {
|
||||
media.attributes.srcObject.getAudioTracks().forEach((track) => {
|
||||
track.enabled = !muted;
|
||||
});
|
||||
}
|
||||
}, [control, muted]);
|
||||
}, [media, muted]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!control) {
|
||||
if (!media) {
|
||||
return;
|
||||
}
|
||||
if (control.attributes.srcObject) {
|
||||
control.attributes.srcObject.getVideoTracks().forEach((track) => {
|
||||
if (media.attributes.srcObject) {
|
||||
media.attributes.srcObject.getVideoTracks().forEach((track) => {
|
||||
track.enabled = videoOn;
|
||||
});
|
||||
}
|
||||
}, [control, videoOn]);
|
||||
}, [media, videoOn]);
|
||||
|
||||
if (!control) {
|
||||
if (!media) {
|
||||
return <div className="MediaControl">
|
||||
<div>
|
||||
{ isSelf && <MicOff color={'disabled'}/> }
|
||||
|
||||
@ -4,7 +4,8 @@ import List from '@material-ui/core/List';
|
||||
|
||||
import "./PlayerList.css";
|
||||
import { PlayerColor } from './PlayerColor.js';
|
||||
import { MediaControl } from "./MediaControl.js";
|
||||
import { MediaAgent, MediaControl } from "./MediaControl.js";
|
||||
|
||||
import { GlobalContext } from "./GlobalContext.js";
|
||||
|
||||
const PlayerList = () => {
|
||||
@ -13,6 +14,7 @@ const PlayerList = () => {
|
||||
const [unselected, setUneslected] = useState([]);
|
||||
const [state, setState] = useState('lobby');
|
||||
const [color, setColor] = useState(undefined);
|
||||
const [peers, setPeers] = useState({});
|
||||
|
||||
const onWsMessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
@ -113,7 +115,7 @@ const PlayerList = () => {
|
||||
<div className="Name">{name ? name : 'Available' }</div>
|
||||
{ name && !item.live && <div className="NoNetwork"></div> }
|
||||
</div>
|
||||
{ name && item.live && <MediaControl peer={name} isSelf={item.color === color}/> }
|
||||
{ name && item.live && <MediaControl peer={peers[name]} isSelf={item.color === color}/> }
|
||||
{ !name && <div></div> }
|
||||
</div>
|
||||
);
|
||||
@ -122,12 +124,13 @@ const PlayerList = () => {
|
||||
const waiting = unselected.map((player) => {
|
||||
return <div className={player === name ? 'Self' : ''} key={player}>
|
||||
<div>{ player }</div>
|
||||
<MediaControl peer={player} isSelf={name === player}/>
|
||||
<MediaControl peer={peers[name]} isSelf={name === player}/>
|
||||
</div>
|
||||
});
|
||||
|
||||
return (
|
||||
<Paper className="PlayerList">
|
||||
<MediaAgent setPeers={setPeers}/>
|
||||
<List className="PlayerSelector">
|
||||
{ playerElements }
|
||||
</List>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user