diff --git a/audio/phone_ring.mp3 b/audio/phone_ring.mp3 new file mode 100644 index 00000000..7744c496 Binary files /dev/null and b/audio/phone_ring.mp3 differ diff --git a/src/config.js b/src/config.js index 0ce9d625..31ce984a 100644 --- a/src/config.js +++ b/src/config.js @@ -112,3 +112,20 @@ export const CALL_STATE_NONE = 0; export const CALL_STATE_OUTGOING_INITATED = 1; export const CALL_STATE_INCOMING_RECEIVED = 2; export const CALL_STATE_IN_PROGRESS = 3; +// Video calls/WebRTC configuration. +export const CALL_WEBRTC_CONFIG = { + iceServers: [ + { urls: [ "stun:bn-turn1.xirsys.com" ] }, + { + username: "0kYXFmQL9xojOrUy4VFemlTnNPVFZpp7jfPjpB3AjxahuRe4QWrCs6Ll1vDc7TTjAAAAAGAG2whXZWJUdXRzUGx1cw==", + credential: "285ff060-5a58-11eb-b269-0242ac140004", + urls: [ + "turn:bn-turn1.xirsys.com:80?transport=udp", + "turn:bn-turn1.xirsys.com:3478?transport=udp", + "turn:bn-turn1.xirsys.com:80?transport=tcp", + "turn:bn-turn1.xirsys.com:3478?transport=tcp", + "turns:bn-turn1.xirsys.com:443?transport=tcp", + "turns:bn-turn1.xirsys.com:5349?transport=tcp" + ] + } + ]}; diff --git a/src/views/call-view.jsx b/src/views/call-view.jsx index 957b50b0..79d5ba84 100644 --- a/src/views/call-view.jsx +++ b/src/views/call-view.jsx @@ -17,6 +17,8 @@ function _clip(str, length) { return str && str.substring(0, length); } +const RING_SOUND = new Audio("audio/phone_ring.mp3"); + class CallView extends React.Component { constructor(props) { super(props); @@ -34,6 +36,7 @@ class CallView extends React.Component { this.onMetaDesc = this.onMetaDesc.bind(this); this.handleRejectCall = this.handleRejectCall.bind(this); this.handleAcceptCall = this.handleAcceptCall.bind(this); + this.ringTimer = null; } componentDidMount() { @@ -43,6 +46,8 @@ class CallView extends React.Component { } this.resetDesc(topic, this.props); if (this.props.callState == 2) { + RING_SOUND.play(); + this.ringTimer = setInterval(() => RING_SOUND.play(), 2000); this.props.onRinging(this.props.topic, this.props.seq); } } @@ -66,6 +71,10 @@ class CallView extends React.Component { } componentWillUnmount() { + if (this.ringTimer != null) { + clearInterval(this.ringTimer); + RING_SOUND.pause(); + } const topic = this.props.tinode.getTopic(this.props.topic); if (!topic) { return; diff --git a/src/widgets/rtc-panel.jsx b/src/widgets/rtc-panel.jsx index 1a0a13f2..33ec0171 100644 --- a/src/widgets/rtc-panel.jsx +++ b/src/widgets/rtc-panel.jsx @@ -2,16 +2,13 @@ import React from 'react'; import LetterTile from '../widgets/letter-tile.jsx'; -import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../config.js'; +import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS, CALL_WEBRTC_CONFIG } from '../config.js'; export default class RtcPanel extends React.PureComponent { constructor(props) { super(props); this.state = { - isChannelReady: false, - isInitiator: false, - isStarted: false, localStream: undefined, pc: undefined, @@ -23,23 +20,6 @@ export default class RtcPanel extends React.PureComponent { video: true }; - this.pcConfig = { - iceServers: [ - { urls: [ "stun:bn-turn1.xirsys.com" ] }, - { - username: "0kYXFmQL9xojOrUy4VFemlTnNPVFZpp7jfPjpB3AjxahuRe4QWrCs6Ll1vDc7TTjAAAAAGAG2whXZWJUdXRzUGx1cw==", - credential: "285ff060-5a58-11eb-b269-0242ac140004", - urls: [ - "turn:bn-turn1.xirsys.com:80?transport=udp", - "turn:bn-turn1.xirsys.com:3478?transport=udp", - "turn:bn-turn1.xirsys.com:80?transport=tcp", - "turn:bn-turn1.xirsys.com:3478?transport=tcp", - "turns:bn-turn1.xirsys.com:443?transport=tcp", - "turns:bn-turn1.xirsys.com:5349?transport=tcp" - ] - } - ]}; - this.localRef = React.createRef(); this.remoteRef = React.createRef(); @@ -158,7 +138,7 @@ export default class RtcPanel extends React.PureComponent { } createPeerConnection() { - var pc = new RTCPeerConnection(this.pcConfig); + var pc = new RTCPeerConnection(CALL_WEBRTC_CONFIG); pc.onicecandidate = this.handleICECandidateEvent; pc.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent; @@ -327,7 +307,7 @@ export default class RtcPanel extends React.PureComponent { this.state.pc.close(); } - this.setState({isStarted: false, isChannelReady: false, isInitiator: false, pc: null}); + this.setState({pc: null}); } handleCloseClick() {