Play received screenshare audio in its own element

Similarly to the regular received audio, the audio of the received
screenshare needs to be played in its own audio element. Otherwise, if
the audio is only played by the Screen component if the component is
removed (for example, by following another user and hidding the bottom
bar) the audio would not be heard.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 6 insertions, 0 deletions

diff --git a/src/utils/webrtc/models/CallParticipantModel.js b/src/utils/webrtc/models/CallParticipantModel.js
index 153abccf9..354067454 100644
--- a/src/utils/webrtc/models/CallParticipantModel.js
+++ b/src/utils/webrtc/models/CallParticipantModel.js
@@ -67,6 +67,9 @@ export default function CallParticipantModel(options) {
 		speaking: undefined,
 		videoAvailable: undefined,
 		screen: null,
+		// The audio element is part of the model to ensure that it can be
+		// played if needed even if there is no view for it.
+		screenAudioElement: null,
 		raisedHand: {
 			state: false,
 			timestamp: null,
@@ -139,6 +142,7 @@ CallParticipantModel.prototype = {
 			}
 		} else if (this.get('screenPeer') === peer) {
 			this.set('screen', this.get('screenPeer').stream || null)
+			this.set('screenAudioElement', attachMediaStream(this.get('screen'), null, { audio: true }))
 		}
 	},
 
@@ -151,6 +155,8 @@ CallParticipantModel.prototype = {
 			this.set('speaking', undefined)
 			this.set('videoAvailable', undefined)
 		} else if (this.get('screenPeer') === peer) {
+			this.get('screenAudioElement').srcObject = null
+			this.set('screenAudioElement', null)
 			this.set('screen', null)
 		}
 	},