Merge pull request #3043 from nextcloud/fix-duplicated-audio-elements

Fix duplicated audio elements

src/components/CallView/Video.vue

@@ -23,7 +23,6 @@
 		:id="(placeholderForPromoted ? 'placeholder-' : '') + 'container_' + model.attributes.peerId + '_video_incoming'"
 		class="videoContainer"
 		:class="containerClass">
-		<audio v-if="!placeholderForPromoted" ref="audio" class="hidden" />
 		<video v-if="!placeholderForPromoted" v-show="model.attributes.videoAvailable && sharedData.videoEnabled" ref="video" />
 		<div v-if="!placeholderForPromoted" v-show="!model.attributes.videoAvailable || !sharedData.videoEnabled" class="avatar-container">
 			<Avatar v-if="model.attributes.userId"
@@ -213,11 +212,12 @@ export default {
 				return
 			}
 
-			// If there is a video track Chromium does not play audio in a video
+			// The audio is played using an audio element in the model to be
+			// able to hear it even if there is no view for it. Moreover, if
+			// there is a video track Chromium does not play audio in a video
 			// element until the video track starts to play; an audio element is
 			// thus needed to play audio when the remote peer starts with the
 			// camera available but disabled.
-			attachMediaStream(stream, this.$refs.audio, { audio: true })
 			attachMediaStream(stream, this.$refs.video)
 
 			this.$refs.video.muted = true

src/utils/webrtc/models/CallParticipantModel.js

@@ -19,6 +19,8 @@
  *
  */
 
+import attachMediaStream from 'attachmediastream'
+
 export const ConnectionState = {
 	NEW: 'new',
 	CHECKING: 'checking',
@@ -41,6 +43,9 @@ export default function CallParticipantModel(options) {
 		name: undefined,
 		connectionState: ConnectionState.NEW,
 		stream: 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.
+		audioElement: null,
 		audioAvailable: undefined,
 		speaking: undefined,
 		videoAvailable: undefined,
@@ -81,6 +86,7 @@ CallParticipantModel.prototype = {
 	_handlePeerStreamAdded: function(peer) {
 		if (this._peer === peer) {
 			this.set('stream', this._peer.stream || null)
+			this.set('audioElement', attachMediaStream(this.get('stream'), null, { audio: true }))
 
 			// "peer.nick" is set only for users and when the MCU is not used.
 			if (this._peer.nick !== undefined) {
@@ -93,6 +99,8 @@ CallParticipantModel.prototype = {
 
 	_handlePeerStreamRemoved: function(peer) {
 		if (this._peer === peer) {
+			this.get('audioElement').srcObject = null
+			this.set('audioElement', null)
 			this.set('stream', null)
 			this.set('audioAvailable', undefined)
 			this.set('speaking', undefined)

src/utils/webrtc/simplewebrtc/simplewebrtc.js

@@ -263,35 +263,35 @@ SimpleWebRTC.prototype.disconnect = function() {
 SimpleWebRTC.prototype.handlePeerStreamAdded = function(peer) {
 	const self = this
 	const container = this.getRemoteVideoContainer()
-	// If there is a video track Chromium does not play audio in a video element
-	// until the video track starts to play; an audio element is thus needed to
-	// play audio when the remote peer starts with the camera available but
-	// disabled.
-	const audio = attachMediaStream(peer.stream, null, { audio: true })
-	const video = attachMediaStream(peer.stream)
-
-	video.muted = true
-
-	// At least Firefox, Opera and Edge move the video to a wrong position
-	// instead of keeping it unchanged when "transform: scaleX(1)" is used
-	// ("transform: scaleX(-1)" is fine); as it should have no effect the
-	// transform is removed.
-	if (video.style.transform === 'scaleX(1)') {
-		video.style.transform = ''
-	}
-
-	// store video element as part of peer for easy removal
-	peer.audioEl = audio
-	peer.videoEl = video
-	audio.id = this.getDomId(peer) + '-audio'
-	video.id = this.getDomId(peer)
-
 	if (container) {
+		// If there is a video track Chromium does not play audio in a video element
+		// until the video track starts to play; an audio element is thus needed to
+		// play audio when the remote peer starts with the camera available but
+		// disabled.
+		const audio = attachMediaStream(peer.stream, null, { audio: true })
+		const video = attachMediaStream(peer.stream)
+
+		video.muted = true
+
+		// At least Firefox, Opera and Edge move the video to a wrong position
+		// instead of keeping it unchanged when "transform: scaleX(1)" is used
+		// ("transform: scaleX(-1)" is fine); as it should have no effect the
+		// transform is removed.
+		if (video.style.transform === 'scaleX(1)') {
+			video.style.transform = ''
+		}
+
+		// store video element as part of peer for easy removal
+		peer.audioEl = audio
+		peer.videoEl = video
+		audio.id = this.getDomId(peer) + '-audio'
+		video.id = this.getDomId(peer)
+
 		container.appendChild(audio)
 		container.appendChild(video)
-	}
 
-	this.emit('videoAdded', video, audio, peer)
+		this.emit('videoAdded', video, audio, peer)
+	}
 
 	// send our mute status to new peer if we're muted
 	// currently called with a small delay because it arrives before