pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix missing audio.

Browse Source
This commit is contained in:
aforge
2023-01-23 13:27:50 -08:00
parent b766e827c9
commit 2a653f2299
5 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/call-panel.jsx
+40 -28
View File
@@ -32,6 +32,7 @@ class CallPanel extends React.PureComponent {
this.state = {
localStream: undefined,
remoteStream: undefined,
pc: undefined,
dataChannel: undefined,
@@ -82,6 +83,7 @@ class CallPanel extends React.PureComponent {
this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
this.stopTracks = this.stopTracks.bind(this);
this.disconnectMedia = this.disconnectMedia.bind(this);
this.handleCloseClick = this.handleCloseClick.bind(this);
this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
@@ -124,9 +126,10 @@ class CallPanel extends React.PureComponent {
stream.getTracks().forEach(track => {
pc.addTrack(track, stream);
if (track.kind == 'video' && !this.localStreamConstraints.video) {
if (track.kind == 'video' && this.state.audioOnly) {
// This is an audio-only call.
// Remove dummy video track (placeholder remains).
track.enabled = false;
track.stop();
stream.removeTrack(track);
}
@@ -211,8 +214,10 @@ class CallPanel extends React.PureComponent {
RING_SOUND.pause();
RING_SOUND.currentTime = 0;
this.stopTracks(this.localRef.current);
this.stopTracks(this.remoteRef.current);
this.stopTracks(this.state.localStream);
this.stopTracks(this.state.remoteStream);
this.disconnectMedia(this.localRef.current);
this.disconnectMedia(this.remoteRef.current);
if (this.state.pc) {
this.state.pc.ontrack = null;
this.state.pc.onremovetrack = null;
@@ -233,11 +238,16 @@ class CallPanel extends React.PureComponent {
this.setState({pc: null, waitingForPeer: false});
}
stopTracks(el) {
disconnectMedia(el) {
if (!el) {
return;
}
let stream = el.srcObject;
el.srcObject = null;
el.src = '';
}
stopTracks(stream) {
if (!stream) {
return;
}
@@ -249,8 +259,6 @@ class CallPanel extends React.PureComponent {
track.enabled = false;
});
}
el.srcObject = null;
el.src = '';
}
handleDataChannelError(error) {
@@ -260,10 +268,10 @@ class CallPanel extends React.PureComponent {
handleDataChannelMessage(event) {
switch (event.data) {
case VIDEO_MUTED_EVENT:
this.setState({remoteVideoLive: false});
this.setState({remoteVideoLive: false}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });
break;
case VIDEO_UNMUTED_EVENT:
this.setState({remoteVideoLive: true});
this.setState({remoteVideoLive: true}, _ => { this.remoteRef.current.srcObject = this.state.remoteStream; });
break;
default:
break;
@@ -386,7 +394,7 @@ class CallPanel extends React.PureComponent {
}
handleICEConnectionStateChangeEvent(event) {
switch (this.state.pc.iceConnectionState) {
switch (event.target.iceConnectionState) {
case 'closed':
case 'failed':
this.handleCloseClick();
@@ -407,9 +415,7 @@ class CallPanel extends React.PureComponent {
handleTrackEvent(event) {
// Remote video becomes available.
this.remoteRef.current.srcObject = event.streams[0];
// Make sure we display the title (peer's name) over the remote video.
this.forceUpdate();
this.setState({remoteStream: event.streams[0]});
}
handleGetUserMediaError(e) {
@@ -458,6 +464,7 @@ class CallPanel extends React.PureComponent {
});
if (dummyVideo) {
dummyVideo.enabled = false;
dummyVideo.stop();
stream.removeTrack(dummyVideo);
}
@@ -574,12 +581,12 @@ class CallPanel extends React.PureComponent {
const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';
let removeActive = false;
let remoteActive = false;
if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) {
const rstream = this.remoteRef.current.srcObject;
if (rstream.getVideoTracks().length > 0) {
const t = rstream.getVideoTracks()[0];
removeActive = t.enabled && t.readyState == 'live';
remoteActive = t.enabled && t.readyState == 'live';
}
}
@@ -594,20 +601,25 @@ class CallPanel extends React.PureComponent {
defaultMessage="You" description="Shown over the local video screen" />
</div>
</div>
<div className="call-party peer" disabled={!removeActive}>
<video ref={this.remoteRef} autoPlay playsInline />
{removeActive ?
<div className="caller-name inactive">{peerTitle}</div> :
<div className={`caller-card${pulseAnimation}`}>
<div className="avatar-box">
<LetterTile
tinode={this.props.tinode}
avatar={this.props.avatar}
topic={this.props.topic}
title={this.props.title} />
<div className="call-party peer" disabled={!remoteActive}>
{remoteActive ?
<>
<video ref={this.remoteRef} autoPlay playsInline />
<div className="caller-name inactive">{peerTitle}</div>
</> :
<>
<audio ref={this.remoteRef} autoPlay />
<div className={`caller-card${pulseAnimation}`}>
<div className="avatar-box">
<LetterTile
tinode={this.props.tinode}
avatar={this.props.avatar}
topic={this.props.topic}
title={this.props.title} />
</div>
<div className="caller-name">{peerTitle}</div>
</div>
<div className="caller-name">{peerTitle}</div>
</div>
</>
}
</div>
</div>
umd/index.dev.js
+32 -16
View File
@@ -10708,6 +10708,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
super(props);
this.state = {
localStream: undefined,
remoteStream: undefined,
pc: undefined,
dataChannel: undefined,
previousOnInfo: undefined,
@@ -10745,6 +10746,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.reportError = this.reportError.bind(this);
this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
this.stopTracks = this.stopTracks.bind(this);
this.disconnectMedia = this.disconnectMedia.bind(this);
this.handleCloseClick = this.handleCloseClick.bind(this);
this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
this.handleToggleMicClick = this.handleToggleMicClick.bind(this);
@@ -10778,7 +10780,8 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
const stream = this.state.localStream;
stream.getTracks().forEach(track => {
pc.addTrack(track, stream);
if (track.kind == 'video' && !this.localStreamConstraints.video) {
if (track.kind == 'video' && this.state.audioOnly) {
track.enabled = false;
track.stop();
stream.removeTrack(track);
}
@@ -10852,8 +10855,10 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
CALL_ENDED_SOUND.currentTime = 0;
RING_SOUND.pause();
RING_SOUND.currentTime = 0;
this.stopTracks(this.localRef.current);
this.stopTracks(this.remoteRef.current);
this.stopTracks(this.state.localStream);
this.stopTracks(this.state.remoteStream);
this.disconnectMedia(this.localRef.current);
this.disconnectMedia(this.remoteRef.current);
if (this.state.pc) {
this.state.pc.ontrack = null;
this.state.pc.onremovetrack = null;
@@ -10875,11 +10880,14 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
waitingForPeer: false
});
}
stopTracks(el) {
disconnectMedia(el) {
if (!el) {
return;
}
let stream = el.srcObject;
el.srcObject = null;
el.src = '';
}
stopTracks(stream) {
if (!stream) {
return;
}
@@ -10890,8 +10898,6 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
track.enabled = false;
});
}
el.srcObject = null;
el.src = '';
}
handleDataChannelError(error) {
console.error('data channel error', error);
@@ -10901,11 +10907,15 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
case VIDEO_MUTED_EVENT:
this.setState({
remoteVideoLive: false
}, _ => {
this.remoteRef.current.srcObject = this.state.remoteStream;
});
break;
case VIDEO_UNMUTED_EVENT:
this.setState({
remoteVideoLive: true
}, _ => {
this.remoteRef.current.srcObject = this.state.remoteStream;
});
break;
default:
@@ -11013,7 +11023,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
this.remoteIceCandidatesCache = [];
}
handleICEConnectionStateChangeEvent(event) {
switch (this.state.pc.iceConnectionState) {
switch (event.target.iceConnectionState) {
case 'closed':
case 'failed':
this.handleCloseClick();
@@ -11028,7 +11038,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
handleICEGatheringStateChangeEvent(event) {}
handleTrackEvent(event) {
this.remoteRef.current.srcObject = event.streams[0];
this.forceUpdate();
this.setState({
remoteStream: event.streams[0]
});
}
handleGetUserMediaError(e) {
console.error("Error opening camera and/or microphone", e);
@@ -11066,6 +11078,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
pc.addTrack(track, localStream);
});
if (dummyVideo) {
dummyVideo.enabled = false;
dummyVideo.stop();
stream.removeTrack(dummyVideo);
}
@@ -11168,12 +11181,12 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled && videoTracks[0].readyState == 'live' ? 'videocam' : 'videocam_off';
const peerTitle = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH);
const pulseAnimation = this.state.waitingForPeer ? ' pulse' : '';
let removeActive = false;
let remoteActive = false;
if (this.remoteRef.current && this.remoteRef.current.srcObject && this.state.remoteVideoLive) {
const rstream = this.remoteRef.current.srcObject;
if (rstream.getVideoTracks().length > 0) {
const t = rstream.getVideoTracks()[0];
removeActive = t.enabled && t.readyState == 'live';
remoteActive = t.enabled && t.readyState == 'live';
}
}
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -11198,14 +11211,17 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}]
}))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party peer",
disabled: !removeActive
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
disabled: !remoteActive
}, remoteActive ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.remoteRef,
autoPlay: true,
playsInline: true
}), removeActive ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "caller-name inactive"
}, peerTitle) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}, peerTitle)) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("audio", {
ref: this.remoteRef,
autoPlay: true
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: `caller-card${pulseAnimation}`
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "avatar-box"
@@ -11216,7 +11232,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
title: this.props.title
})), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "caller-name"
}, peerTitle)))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}, peerTitle))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "controls"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "danger",
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long