Send media streams in calls only by moderators

src/PublicShareAuthSidebar.vue

@@ -37,7 +37,6 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import CallView from './components/CallView/CallView'
 import ChatView from './components/ChatView'
-import { PARTICIPANT } from './constants'
 import { EventBus } from './services/EventBus'
 import { fetchConversation } from './services/conversationsService'
 import {
@@ -148,7 +147,6 @@ export default {
 			await this.$store.dispatch('joinCall', {
 				token: this.token,
 				participantIdentifier: this.$store.getters.getParticipantIdentifier(),
-				flags: PARTICIPANT.CALL_FLAG.IN_CALL,
 			})
 		},
 

src/components/CallView/CallView.vue

@@ -40,6 +40,7 @@
 					@switchScreenToId="_switchScreenToId" />
 			</template>
 			<LocalVideo ref="localVideo"
+				:token="token"
 				:local-media-model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:use-constrained-layout="useConstrainedLayout"

src/components/CallView/LocalMediaControls.vue

@@ -86,6 +86,7 @@
 <script>
 import escapeHtml from 'escape-html'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import { PARTICIPANT } from '../../constants'
 import SpeakingWhileMutedWarner from '../../utils/webrtc/SpeakingWhileMutedWarner'
 
 export default {
@@ -97,6 +98,10 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
 		model: {
 			type: Object,
 			required: true,
@@ -122,6 +127,25 @@ export default {
 
 	computed: {
 
+		conversation() {
+			if (this.$store.getters.conversations[this.token]) {
+				return this.$store.getters.conversations[this.token]
+			}
+
+			return {
+				sessionId: '0',
+				participantType: this.$store.getters.getUserId() !== null ? PARTICIPANT.TYPE.USER : PARTICIPANT.TYPE.GUEST,
+				objectType: null,
+			}
+		},
+
+		isScreensharingAllowed() {
+			return this.conversation.participantType === PARTICIPANT.TYPE.OWNER
+				|| this.conversation.participantType === PARTICIPANT.TYPE.MODERATOR
+				|| this.conversation.objectType === 'share:password'
+				|| this.conversation.objectType === 'file'
+		},
+
 		audioButtonClass() {
 			return {
 				'icon-audio': this.model.attributes.audioAvailable && this.model.attributes.audioEnabled,
@@ -227,6 +251,7 @@ export default {
 				'icon-screen': this.model.attributes.localScreen,
 				'screensharing-disabled': !this.model.attributes.localScreen,
 				'icon-screen-off': !this.model.attributes.localScreen,
+				'no-screensharing-available': !this.isScreensharingAllowed,
 			}
 		},
 
@@ -235,6 +260,10 @@ export default {
 				return null
 			}
 
+			if (!this.isScreensharingAllowed) {
+				return t('spreed', 'No screensharing')
+			}
+
 			return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
 		},
 
@@ -295,6 +324,10 @@ export default {
 		},
 
 		toggleScreenSharingMenu() {
+			if (!this.isScreensharingAllowed) {
+				return
+			}
+
 			if (!this.model.getWebRtc().capabilities.supportScreenSharing) {
 				if (window.location.protocol === 'https:') {
 					OCP.Toast.message(t('spreed', 'Screen sharing is not supported by your browser.'))
@@ -432,21 +465,23 @@ export default {
 
 .nameIndicator button.audio-disabled:not(.no-audio-available),
 .nameIndicator button.video-disabled:not(.no-video-available),
-.nameIndicator button.screensharing-disabled {
+.nameIndicator button.screensharing-disabled:not(.no-screensharing-available) {
 	&:hover,
 	&:focus {
 		opacity: 1;
 	}
 }
 
 .nameIndicator button.no-audio-available,
-.nameIndicator button.no-video-available {
+.nameIndicator button.no-video-available,
+.nameIndicator button.no-screensharing-available {
 	opacity: .7;
 	cursor: not-allowed;
 }
 
 .nameIndicator button.no-audio-available:active,
-.nameIndicator button.no-video-available:active {
+.nameIndicator button.no-video-available:active,
+.nameIndicator button.no-screensharing-available:active {
 	background-color: transparent;
 }
 

src/components/CallView/LocalVideo.vue

@@ -35,6 +35,7 @@
 			</div>
 		</div>
 		<LocalMediaControls ref="localMediaControls"
+			:token="token"
 			:model="localMediaModel"
 			:local-call-participant-model="localCallParticipantModel"
 			:screen-sharing-button-hidden="useConstrainedLayout"
@@ -60,6 +61,10 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
 		localMediaModel: {
 			type: Object,
 			required: true,

src/components/CallView/Video.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-	<div v-show="!placeholderForPromoted || sharedData.promoted"
+	<div v-show="isSendingMediaOrScreensharingAllowed && (!placeholderForPromoted || sharedData.promoted)"
 		:id="(placeholderForPromoted ? 'placeholder-' : '') + 'container_' + model.attributes.peerId + '_video_incoming'"
 		class="videoContainer"
 		:class="containerClass">
@@ -159,16 +159,49 @@ export default {
 			return participantName
 		},
 
-		currentParticipant() {
+		participant() {
+			if (typeof this.token === 'undefined') {
+				return {
+					participantType: undefined,
+				}
+			}
+
+			if (!this.model.attributes.userId) {
+				return {
+					// The participant might be a GUEST_MODERATOR, but
+					// unfortunately it is not possible to know it.
+					participantType: PARTICIPANT.TYPE.GUEST,
+				}
+			}
+
+			const participantIndex = this.$store.getters.getParticipantIndex(this.token, { participant: this.model.attributes.userId })
+			if (participantIndex !== -1) {
+				return this.$store.getters.getParticipant(this.token, participantIndex)
+			}
+
+			return {
+				participantType: undefined,
+			}
+		},
+
+		isSendingMediaOrScreensharingAllowed() {
+			return this.participant.participantType === PARTICIPANT.TYPE.OWNER
+				|| this.participant.participantType === PARTICIPANT.TYPE.MODERATOR
+				|| this.conversation.objectType === 'share:password'
+				|| this.conversation.objectType === 'file'
+		},
+
+		conversation() {
 			return this.$store.getters.conversations[this.token] || {
 				sessionId: '0',
 				participantType: this.$store.getters.getUserId() !== null ? PARTICIPANT.TYPE.USER : PARTICIPANT.TYPE.GUEST,
+				objectType: null,
 			}
 		},
 
 		selfIsModerator() {
-			return this.currentParticipant.participantType === PARTICIPANT.TYPE.OWNER
-				|| this.currentParticipant.participantType === PARTICIPANT.TYPE.MODERATOR
+			return this.conversation.participantType === PARTICIPANT.TYPE.OWNER
+				|| this.conversation.participantType === PARTICIPANT.TYPE.MODERATOR
 		},
 
 		connectionStateFailedNoRestart() {

src/components/TopBar/CallButton.vue

@@ -143,13 +143,25 @@ export default {
 			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(participantType) !== -1
 		},
 
+		isSendingMediaAllowed() {
+			return this.conversation.participantType === PARTICIPANT.TYPE.OWNER
+				|| this.conversation.participantType === PARTICIPANT.TYPE.MODERATOR
+				|| this.conversation.objectType === 'share:password'
+				|| this.conversation.objectType === 'file'
+		},
+
 		async joinCall() {
+			let flags = PARTICIPANT.CALL_FLAG.IN_CALL
+			if (this.isSendingMediaAllowed()) {
+				flags |= PARTICIPANT.CALL_FLAG.WITH_AUDIO | PARTICIPANT.CALL_FLAG.WITH_VIDEO
+			}
+
 			console.info('Joining call')
 			this.loading = true
 			await this.$store.dispatch('joinCall', {
 				token: this.token,
 				participantIdentifier: this.$store.getters.getParticipantIdentifier(),
-				flags: PARTICIPANT.CALL_FLAG.IN_CALL, // FIXME add audio+video as per setting
+				flags: flags,
 			})
 			this.loading = false
 		},

src/services/callsService.js

@@ -26,13 +26,21 @@ import { joinCall as webRtcJoinCall, getSignaling } from '../utils/webrtc/index'
 
 /**
  * Join a call as participant
+ *
+ * The flags constrain the media to send when joining the call. If no flags are
+ * provided both audio and video are available. Otherwise only the specified
+ * media will be allowed to be sent.
+ *
+ * Note that the flags are constraints, but not requeriments. Only the specified
+ * media is allowed to be sent, but it is not guaranteed to be sent. For
+ * example, if WITH_VIDEO is provided but the device does not have a camera.
+ *
  * @param {string} token The token of the call to be joined.
  * @param {int} flags The available PARTICIPANT.CALL_FLAG for this participants
  */
 const joinCall = async function(token, flags) {
 	try {
-		// FIXME flags is ignored?
-		await webRtcJoinCall(token)
+		await webRtcJoinCall(token, flags)
 	} catch (error) {
 		console.debug('Error while joining call: ', error)
 	}

src/store/conversationsStore.js

@@ -102,6 +102,27 @@ const actions = {
 		if (!currentUser.uid) {
 			currentUser = getCurrentUser()
 		}
+
+		if (!currentUser || !currentUser.uid) {
+			// Guests can not fetch the full participant list, but at least the
+			// participants store can be populated with the user ID, session ID,
+			// participant type and call status of the users from the
+			// conversation data.
+			context.dispatch('purgeParticipantsStore', conversation.token)
+
+			for (const participantId in conversation.participants) {
+				context.dispatch('addParticipant', {
+					token: conversation.token,
+					participant: {
+						inCall: conversation.participants[participantId].call,
+						sessionId: conversation.participants[participantId].sessionId,
+						participantType: conversation.participants[participantId].type,
+						userId: participantId,
+					},
+				})
+			}
+		}
+
 		context.dispatch('addParticipantOnce', {
 			token: conversation.token,
 			participant: {

src/utils/webrtc/index.js

@@ -105,7 +105,7 @@ function setupWebRtc() {
 	})
 }
 
-async function joinCall(token) {
+async function joinCall(token, flags) {
 	await connectSignaling()
 
 	setupWebRtc()
@@ -115,7 +115,7 @@ async function joinCall(token) {
 	return new Promise((resolve, reject) => {
 		startedCall = resolve
 
-		webRtc.startMedia(token)
+		webRtc.startMedia(token, flags)
 	})
 }
 

src/utils/webrtc/simplewebrtc/localmedia.js

@@ -86,6 +86,16 @@ LocalMedia.prototype.start = function(mediaConstraints, cb) {
 	const self = this
 	const constraints = mediaConstraints || this.config.media
 
+	if (!constraints.audio && !constraints.video) {
+		self.emit('localStream', constraints, null)
+
+		if (cb) {
+			return cb(null, null)
+		}
+
+		return
+	}
+
 	if (!navigator || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
 		const error = new Error('MediaStreamError')
 		error.name = 'NotSupportedError'

src/utils/webrtc/simplewebrtc/simplewebrtc.js

@@ -344,9 +344,9 @@ SimpleWebRTC.prototype.setVolumeForAll = function(volume) {
 	})
 }
 
-SimpleWebRTC.prototype.joinCall = function(name) {
+SimpleWebRTC.prototype.joinCall = function(name, mediaConstraints) {
 	if (this.config.autoRequestMedia) {
-		this.startLocalVideo()
+		this.startLocalVideo(mediaConstraints)
 	}
 	this.roomName = name
 	this.emit('joinedRoom', name)
@@ -360,13 +360,13 @@ SimpleWebRTC.prototype.getEl = function(idOrEl) {
 	}
 }
 
-SimpleWebRTC.prototype.startLocalVideo = function() {
+SimpleWebRTC.prototype.startLocalVideo = function(mediaConstraints) {
 	const self = this
-	this.webrtc.start(this.config.media, function(err, stream) {
+	this.webrtc.start(mediaConstraints, function(err, stream) {
 		if (err) {
 			self.emit('localMediaError', err)
 		} else {
-			self.emit('localMediaStarted', self.config.media)
+			self.emit('localMediaStarted', mediaConstraints)
 
 			const localVideoContainer = self.getLocalVideoContainer()
 			if (localVideoContainer) {

src/utils/webrtc/webrtc.js

@@ -424,8 +424,15 @@ export default function initWebRTC(signaling, _callParticipantCollection) {
 		webrtc.leaveCall()
 	})
 
-	webrtc.startMedia = function(token) {
-		webrtc.joinCall(token)
+	webrtc.startMedia = function(token, flags) {
+		// If no flags are provided try to enable both audio and video.
+		// Otherwise, try to enable only that allowed by the flags.
+		const mediaConstraints = {
+			audio: !flags || !!(flags & PARTICIPANT.CALL_FLAG.WITH_AUDIO),
+			video: !flags || !!(flags & PARTICIPANT.CALL_FLAG.WITH_VIDEO),
+		}
+
+		webrtc.joinCall(token, mediaConstraints)
 	}
 
 	const sendDataChannelToAll = function(channel, message, payload) {