Video reconnect is now solid
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
238c4edff1
commit
1924f969bc
@ -20,13 +20,13 @@ const Video = ({ srcObject, local, ...props }) => {
|
||||
return;
|
||||
}
|
||||
const ref = refVideo.current;
|
||||
if (debug) console.log('media-controls <video> bind');
|
||||
if (debug) console.log('media-control - video <video> bind');
|
||||
ref.srcObject = srcObject;
|
||||
if (local) {
|
||||
ref.muted = true;
|
||||
}
|
||||
return () => {
|
||||
if (debug) console.log('media-controls <video> unbind');
|
||||
if (debug) console.log('media-control - <video> unbind');
|
||||
if (ref) {
|
||||
ref.srcObject = undefined;
|
||||
}
|
||||
@ -49,6 +49,8 @@ const MediaAgent = ({setPeers}) => {
|
||||
Object.assign(peers[peer].attributes, {
|
||||
srcObject: event.streams[0]
|
||||
});
|
||||
/* Trigger update of MediaControl now that a stream is available */
|
||||
setPeers(Object.assign({}, peers));
|
||||
}
|
||||
}
|
||||
}, [peers]);
|
||||
@ -69,10 +71,13 @@ const MediaAgent = ({setPeers}) => {
|
||||
|
||||
const peer_id = config.peer_id;
|
||||
if (peer_id in peers) {
|
||||
/* This is normal */
|
||||
if (!peers[peer_id].dead) {
|
||||
/* This is normal when peers are added by other connecting
|
||||
* peers through the signaling server */
|
||||
console.log(`media-agent - addPeer - ${peer_id} already in peers`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
const connection = new RTCPeerConnection({
|
||||
configuration: {
|
||||
offerToReceiveAudio: true,
|
||||
@ -93,14 +98,24 @@ const MediaAgent = ({setPeers}) => {
|
||||
]
|
||||
});
|
||||
|
||||
peers[peer_id] = {
|
||||
/* Even if reviving, allocate a new Object so <MediaControl> will
|
||||
* have its peer state change and trigger an update from
|
||||
* <PlayerList> */
|
||||
const peer = {
|
||||
name: peer_id,
|
||||
muted: false,
|
||||
videoOn: true,
|
||||
connection,
|
||||
initialized: false,
|
||||
attributes: {}
|
||||
attributes: {},
|
||||
};
|
||||
if (peer_id in peers) {
|
||||
peer.muted = peers[peer_id].muted;
|
||||
peer.videoOn = peers[peer_id].videoOn;
|
||||
console.log(`media-agent - addPeer - reviving dead peer ${peer_id}`, peer);
|
||||
} else {
|
||||
peer.muted = false;
|
||||
peer.videoOn = true;
|
||||
}
|
||||
peers[peer_id] = peer;
|
||||
|
||||
console.log(`media-agent - addPeer - remote`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
|
||||
@ -222,10 +237,13 @@ const MediaAgent = ({setPeers}) => {
|
||||
if (peer_id in peers) {
|
||||
if (peers[peer_id].connection) {
|
||||
peers[peer_id].connection.close();
|
||||
peers[peer_id].connection = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
delete peers[peer_id];
|
||||
/* To maintain mute/videoOn states, we don't remove the peer but
|
||||
* instead mark it as dead */
|
||||
peers[peer_id].dead = true;
|
||||
if (debug) console.log(`media-agent - removePeer`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
};
|
||||
@ -273,10 +291,12 @@ const MediaAgent = ({setPeers}) => {
|
||||
continue;
|
||||
}
|
||||
peers[peer_id].connection.close();
|
||||
peers[peer_id].connection = undefined;
|
||||
}
|
||||
|
||||
for (let id in peers) {
|
||||
delete peers[id];
|
||||
peers[id].dead = true;
|
||||
peers[id].connection = undefined;
|
||||
}
|
||||
if (debug) console.log(`media-agent - close`, peers);
|
||||
setPeers(Object.assign({}, peers));
|
||||
@ -316,7 +336,6 @@ const MediaAgent = ({setPeers}) => {
|
||||
local: true,
|
||||
muted: true,
|
||||
videoOn: false,
|
||||
initialized: false,
|
||||
attributes: {
|
||||
local: true,
|
||||
srcObject: stream
|
||||
@ -325,6 +344,8 @@ const MediaAgent = ({setPeers}) => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Renaming the local connection requires the peer to be deleted
|
||||
* and re-established with the signaling server */
|
||||
for (let key in peers) {
|
||||
if (peers[key].local && key !== name) {
|
||||
delete peers[key];
|
||||
@ -399,7 +420,9 @@ const MediaAgent = ({setPeers}) => {
|
||||
|
||||
return () => {
|
||||
abort = true;
|
||||
if (!stream) {
|
||||
console.log(`media-agent - abort media setup!`);
|
||||
}
|
||||
};
|
||||
}, [ws, setStream, stream, name, sendMessage]);
|
||||
|
||||
@ -424,72 +447,71 @@ const MediaControl = ({isSelf, peer}) => {
|
||||
setMedia(peer);
|
||||
}, [peer, setMedia, setMuted, setVideoOn]);
|
||||
|
||||
console.log(`media-control - render`);
|
||||
|
||||
const toggleMute = (event) => {
|
||||
if (debug) console.log(`MediaControl - toggleMute - ${peer.name}`, !muted);
|
||||
if (debug) console.log(`media-control - toggleMute - ${peer.name}`, !muted);
|
||||
peer.muted = !muted;
|
||||
setMuted(peer.muted);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
const toggleVideo = (event) => {
|
||||
if (debug) console.log(`MediaControl - toggleVideo - ${peer.name}`, !videoOn);
|
||||
if (debug) console.log(`media-control - toggleVideo - ${peer.name}`, !videoOn);
|
||||
peer.videoOn = !videoOn;
|
||||
setVideoOn(peer.videoOn);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!media) {
|
||||
if (!media || media.dead) {
|
||||
return;
|
||||
}
|
||||
if (media.attributes.srcObject) {
|
||||
console.log(`media-control - audio enable - ${peer.name}:${!muted}`);
|
||||
media.attributes.srcObject.getAudioTracks().forEach((track) => {
|
||||
track.enabled = !muted;
|
||||
});
|
||||
}
|
||||
}, [media, muted]);
|
||||
}); /* run after every render to hit when ontrack has received and set
|
||||
* the stream //, [media, muted]); */
|
||||
|
||||
useEffect(() => {
|
||||
if (!media) {
|
||||
if (!media || media.dead) {
|
||||
return;
|
||||
}
|
||||
if (media.attributes.srcObject) {
|
||||
console.log(`media-control - video enable - ${peer.name}:${videoOn}`);
|
||||
media.attributes.srcObject.getVideoTracks().forEach((track) => {
|
||||
track.enabled = videoOn;
|
||||
});
|
||||
}
|
||||
}, [media, videoOn]);
|
||||
}); /* run after every render to hit when ontrack has received and set
|
||||
* the stream //, [media, videoOn]); */
|
||||
|
||||
if (!media) {
|
||||
return <div className="MediaControl">
|
||||
<div>
|
||||
{ isSelf && <MicOff color={'disabled'}/> }
|
||||
{ !isSelf && <VolumeOff color={'disabled'}/> }
|
||||
<VideocamOff color={'disabled'}/>
|
||||
</div>
|
||||
<video className="Video"></video>
|
||||
</div>;
|
||||
}
|
||||
const isValid = media && !media.dead,
|
||||
color = isValid ? 'primary' : 'disabled';
|
||||
|
||||
return <div className="MediaControl">
|
||||
<div>
|
||||
{ isSelf && <div onClick={toggleMute}>
|
||||
{ muted && <MicOff color={'primary'}/> }
|
||||
{ !muted && <Mic color={'primary'}/> }
|
||||
{ muted && <MicOff color={color}/> }
|
||||
{ !muted && <Mic color={color}/> }
|
||||
</div> }
|
||||
{ !isSelf && <div onClick={toggleMute}>
|
||||
{ muted && <VolumeOff color={'primary'}/> }
|
||||
{ !muted && <VolumeUp color={'primary'}/> }
|
||||
{ muted && <VolumeOff color={color}/> }
|
||||
{ !muted && <VolumeUp color={color}/> }
|
||||
</div> }
|
||||
<div onClick={toggleVideo}>
|
||||
{ !videoOn && <VideocamOff color={'primary'}/> }
|
||||
{ videoOn && <Videocam color={'primary'}/> }
|
||||
{ !videoOn && <VideocamOff color={color}/> }
|
||||
{ videoOn && <Videocam color={color}/> }
|
||||
</div>
|
||||
</div>
|
||||
{ media && <Video className="Video"
|
||||
{ isValid && <Video className="Video"
|
||||
autoPlay='autoplay'
|
||||
{...media.attributes}/>
|
||||
}
|
||||
{ !isValid && <video className="Video"></video> }
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user