imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #434 from matrix-org/matthew/uninterrupted-audio

Browse source 
use a top-level audio tag for playing all VoIP audio.
This commit is contained in:
Matthew Hodgson 2016-09-01 16:12:37 +01:00 • committed by GitHub
commit 031daf7b3c
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/voip/CallView.js
View file

@ -95,8 +95,10 @@ module.exports = React.createClass({
if (call) { if (call) {
call.setLocalVideoElement(this.getVideoView().getLocalVideoElement()); call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement()); call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
// give a separate element for audio stream playback - both for voice calls // always use a separate element for audio stream playback.
// and for the voice stream of screen captures // 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 <audio/> element.
// rather than being rendered by the main remoteVideo <video/> element.
call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement()); call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
} }
if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") { if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {

10
src/components/views/voip/VideoView.js
View file

@ -50,7 +50,14 @@ module.exports = React.createClass({
}, },
getRemoteAudioElement: function() { 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 <audio/> to the DOM.");
}
return remoteAudioElement;
}, },
getLocalVideoElement: function() { getLocalVideoElement: function() {
@ -106,7 +113,6 @@ module.exports = React.createClass({
<div className="mx_VideoView_remoteVideoFeed"> <div className="mx_VideoView_remoteVideoFeed">
<VideoFeed ref="remote" onResize={this.props.onResize} <VideoFeed ref="remote" onResize={this.props.onResize}
maxHeight={maxVideoHeight} /> maxHeight={maxVideoHeight} />
<audio ref="remoteAudio"/>
</div> </div>
<div className="mx_VideoView_localVideoFeed"> <div className="mx_VideoView_localVideoFeed">
<VideoFeed ref="local"/> <VideoFeed ref="local"/>