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

audio-only calls kind of work

Browse Source
This commit is contained in:
or-else
2023-01-07 14:56:07 -08:00
parent 8690ae6a1b
commit 89f9821255
7 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/tinode-web.jsx
+1 -1
View File
@@ -1737,7 +1737,7 @@ class TinodeWeb extends React.Component {
switch (callState) { switch (callState) {
case CALL_STATE_OUTGOING_INITATED: case CALL_STATE_OUTGOING_INITATED:
const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly }; const head = { webrtc: CALL_HEAD_STARTED, aonly: !!audioOnly };
this.handleSendMessage(Drafty.videoCall(), undefined, undefined, head) this.handleSendMessage(Drafty.videoCall(audioOnly), undefined, undefined, head)
.then(ctrl => { .then(ctrl => {
if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) { if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {
this.handleCallClose(); this.handleCallClose();
src/widgets/call-panel.jsx
+11 -12
View File
@@ -34,11 +34,10 @@ class CallPanel extends React.PureComponent {
previousOnInfo: undefined, previousOnInfo: undefined,
waitingForPeer: false, waitingForPeer: false,
// If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer. // If true, the client has received a remote SDP from the peer and has sent a local SDP to the peer.
callInitialSetupComplete: false callInitialSetupComplete: false,
audioOnly: props.callAudioOnly,
}; };
console.log("CallPanel", props.callAudioOnly);
this.localStreamConstraints = { this.localStreamConstraints = {
audio: true, audio: true,
video: !props.callAudioOnly video: !props.callAudioOnly
@@ -148,7 +147,7 @@ class CallPanel extends React.PureComponent {
if (this.props.callState == CALL_STATE_IN_PROGRESS) { if (this.props.callState == CALL_STATE_IN_PROGRESS) {
// We apparently just accepted the call. // We apparently just accepted the call.
this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly); this.props.onInvite(this.props.topic, this.props.seq, CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);
return; return;
} }
@@ -404,6 +403,7 @@ class CallPanel extends React.PureComponent {
handleToggleCameraClick() { handleToggleCameraClick() {
this.toggleMedia('video'); this.toggleMedia('video');
this.setState({audioOnly: !this.state.audioOnly});
} }
handleToggleMicClick() { handleToggleMicClick() {
@@ -412,10 +412,9 @@ class CallPanel extends React.PureComponent {
render() { render() {
const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject; const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject;
const noVideo = this.props.callAudioOnly;
const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks(); const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();
const videoTracks = !noVideo && this.state.localStream && this.state.localStream.getVideoTracks(); const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();
const enabled = !!(audioTracks && audioTracks[0]); const disabled = !(audioTracks && audioTracks[0]);
const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off'; const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? 'videocam' : 'videocam_off'; const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? 'videocam' : 'videocam_off';
const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH); const peerTitle = clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
@@ -425,16 +424,16 @@ class CallPanel extends React.PureComponent {
<> <>
<div id="video-container"> <div id="video-container">
<div id="video-container-panel"> <div id="video-container-panel">
<div className="call-party self" disabled={noVideo}> <div className="call-party self" disabled={this.state.audioOnly}>
<video ref={this.localRef} autoPlay muted playsInline /> <video ref={this.localRef} autoPlay muted playsInline />
<div className="caller-name inactive"> <div className="caller-name inactive">
<FormattedMessage id="calls_you_label" <FormattedMessage id="calls_you_label"
defaultMessage="You" description="Shown over the local video screen" /> defaultMessage="You" description="Shown over the local video screen" />
</div> </div>
</div> </div>
<div className="call-party peer" disabled={noVideo}> <div className="call-party peer" disabled={this.state.audioOnly}>
<video ref={this.remoteRef} autoPlay playsInline /> <video ref={this.remoteRef} autoPlay playsInline />
{remoteActive ? {remoteActive && !this.state.audioOnly ?
<div className="caller-name inactive">{peerTitle}</div> : <div className="caller-name inactive">{peerTitle}</div> :
<div className={`caller-card${pulseAnimation}`}> <div className={`caller-card${pulseAnimation}`}>
<div className="avatar-box"> <div className="avatar-box">
@@ -453,10 +452,10 @@ class CallPanel extends React.PureComponent {
<button className="danger" onClick={this.handleCloseClick}> <button className="danger" onClick={this.handleCloseClick}>
<i className="material-icons">call_end</i> <i className="material-icons">call_end</i>
</button> </button>
<button className="secondary" onClick={this.handleToggleCameraClick} disabled={!enabled}> <button className="secondary" onClick={this.handleToggleCameraClick} disabled={disabled}>
<i className="material-icons">{videoIcon}</i> <i className="material-icons">{videoIcon}</i>
</button> </button>
<button className="secondary" onClick={this.handleToggleMicClick} disabled={!enabled}> <button className="secondary" onClick={this.handleToggleMicClick} disabled={disabled}>
<i className="material-icons">{audioIcon}</i> <i className="material-icons">{audioIcon}</i>
</button> </button>
</div> </div>
src/widgets/call-status.jsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default class CallStatus extends React.PureComponent {
duration = <FormattedMessage id="call_disconnected" defaultMessage="disconnected" description="Label for disconnected call" />; duration = <FormattedMessage id="call_disconnected" defaultMessage="disconnected" description="Label for disconnected call" />;
break; break;
} }
} else if (this.props.callState == 'started' && !this.props.duration) { } else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {
duration = <FormattedMessage id="call_in_progress" defaultMessage="in progress" description="Label for call in progress" /> duration = <FormattedMessage id="call_in_progress" defaultMessage="in progress" description="Label for call in progress" />
} else { } else {
duration = <span>{secondsToTime(this.props.duration / 1000)}</span>; duration = <span>{secondsToTime(this.props.duration / 1000)}</span>;
umd/index.dev.js
+15 -13
View File
@@ -9244,7 +9244,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
webrtc: _constants_js__WEBPACK_IMPORTED_MODULE_13__.CALL_HEAD_STARTED, webrtc: _constants_js__WEBPACK_IMPORTED_MODULE_13__.CALL_HEAD_STARTED,
aonly: !!audioOnly aonly: !!audioOnly
}; };
this.handleSendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Drafty.videoCall(), undefined, undefined, head).then(ctrl => { this.handleSendMessage(tinode_sdk__WEBPACK_IMPORTED_MODULE_4__.Drafty.videoCall(audioOnly), undefined, undefined, head).then(ctrl => {
if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) { if (ctrl.code < 200 || ctrl.code >= 300 || !ctrl.params || !ctrl.params.seq) {
this.handleCallClose(); this.handleCallClose();
return; return;
@@ -10706,9 +10706,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
pc: undefined, pc: undefined,
previousOnInfo: undefined, previousOnInfo: undefined,
waitingForPeer: false, waitingForPeer: false,
callInitialSetupComplete: false callInitialSetupComplete: false,
audioOnly: props.callAudioOnly
}; };
console.log("CallPanel", props.callAudioOnly);
this.localStreamConstraints = { this.localStreamConstraints = {
audio: true, audio: true,
video: !props.callAudioOnly video: !props.callAudioOnly
@@ -10799,7 +10799,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
return; return;
} }
if (this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) { if (this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) {
this.props.onInvite(this.props.topic, this.props.seq, this.props.callState, this.props.callAudioOnly); this.props.onInvite(this.props.topic, this.props.seq, _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS, this.props.callAudioOnly);
return; return;
} }
navigator.mediaDevices.getUserMedia(this.localStreamConstraints).then(stream => { navigator.mediaDevices.getUserMedia(this.localStreamConstraints).then(stream => {
@@ -11009,16 +11009,18 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
} }
handleToggleCameraClick() { handleToggleCameraClick() {
this.toggleMedia('video'); this.toggleMedia('video');
this.setState({
audioOnly: !this.state.audioOnly
});
} }
handleToggleMicClick() { handleToggleMicClick() {
this.toggleMedia('audio'); this.toggleMedia('audio');
} }
render() { render() {
const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject; const remoteActive = this.remoteRef.current && this.remoteRef.current.srcObject;
const noVideo = this.props.callAudioOnly;
const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks(); const audioTracks = this.state.localStream && this.state.localStream.getAudioTracks();
const videoTracks = !noVideo && this.state.localStream && this.state.localStream.getVideoTracks(); const videoTracks = !this.state.audioOnly && this.state.localStream && this.state.localStream.getVideoTracks();
const enabled = !!(audioTracks && audioTracks[0]); const disabled = !(audioTracks && audioTracks[0]);
const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off'; const audioIcon = audioTracks && audioTracks[0] && audioTracks[0].enabled ? 'mic' : 'mic_off';
const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? 'videocam' : 'videocam_off'; const videoIcon = videoTracks && videoTracks[0] && videoTracks[0].enabled ? '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 peerTitle = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH);
@@ -11029,7 +11031,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
id: "video-container-panel" id: "video-container-panel"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party self", className: "call-party self",
disabled: noVideo disabled: this.state.audioOnly
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.localRef, ref: this.localRef,
autoPlay: true, autoPlay: true,
@@ -11045,12 +11047,12 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}] }]
}))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "call-party peer", className: "call-party peer",
disabled: noVideo disabled: this.state.audioOnly
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
ref: this.remoteRef, ref: this.remoteRef,
autoPlay: true, autoPlay: true,
playsInline: true playsInline: true
}), remoteActive ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }), remoteActive && !this.state.audioOnly ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "caller-name inactive" className: "caller-name inactive"
}, peerTitle) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }, peerTitle) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: `caller-card${pulseAnimation}` className: `caller-card${pulseAnimation}`
@@ -11073,13 +11075,13 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
}, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { }, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "secondary", className: "secondary",
onClick: this.handleToggleCameraClick, onClick: this.handleToggleCameraClick,
disabled: !enabled disabled: disabled
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons" className: "material-icons"
}, videoIcon)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { }, videoIcon)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "secondary", className: "secondary",
onClick: this.handleToggleMicClick, onClick: this.handleToggleMicClick,
disabled: !enabled disabled: disabled
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons" className: "material-icons"
}, audioIcon))))); }, audioIcon)))));
@@ -11149,7 +11151,7 @@ class CallStatus extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
}); });
break; break;
} }
} else if (this.props.callState == 'started' && !this.props.duration) { } else if (['accepted', 'started'].includes(this.props.callState) && !this.props.duration) {
duration = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, { duration = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "call_in_progress", id: "call_in_progress",
defaultMessage: [{ defaultMessage: [{
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