Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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) {
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 <audio/> element.
// rather than being rendered by the main remoteVideo <video/> element.
call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
}
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() {
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() {
@ -106,7 +113,6 @@ module.exports = React.createClass({
<div className="mx_VideoView_remoteVideoFeed">
<VideoFeed ref="remote" onResize={this.props.onResize}
maxHeight={maxVideoHeight} />
<audio ref="remoteAudio"/>
</div>
<div className="mx_VideoView_localVideoFeed">
<VideoFeed ref="local"/>