diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js index f566ec21bb..91d3904615 100644 --- a/src/components/views/voip/CallView.js +++ b/src/components/views/voip/CallView.js @@ -95,8 +95,10 @@ module.exports = React.createClass({ if (call) { call.setLocalVideoElement(this.getVideoView().getLocalVideoElement()); call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement()); - // give a separate element for audio stream playback - both for voice calls - // and for the voice stream of screen captures + // always use a separate element for audio stream playback. + // this is to let us move CallView around the DOM without interrupting remote audio + // during playback, by having the audio rendered by a top-level element. + // rather than being rendered by the main remoteVideo element. call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement()); } if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") { diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js index 46c5b354f8..d018a2603c 100644 --- a/src/components/views/voip/VideoView.js +++ b/src/components/views/voip/VideoView.js @@ -50,7 +50,14 @@ module.exports = React.createClass({ }, getRemoteAudioElement: function() { - return this.refs.remoteAudio; + // this needs to be somewhere at the top of the DOM which + // always exists to avoid audio interruptions. + // Might as well just use DOM. + var remoteAudioElement = document.getElementById("remoteAudio"); + if (!remoteAudioElement) { + console.error("Failed to find remoteAudio element - cannot play audio! You need to add an to the DOM."); + } + return remoteAudioElement; }, getLocalVideoElement: function() { @@ -106,7 +113,6 @@ module.exports = React.createClass({