Allow to join without camera/mic

Signed-off-by: Joas Schilling <coding@schilljs.com>

README.md

@@ -17,6 +17,11 @@ And in the works for the [coming versions](https://github.com/nextcloud/spreed/m
 
 If you have suggestions or problems, please [open an issue](https://github.com/nextcloud/spreed/issues) or contribute directly :)
 
+## Disabling internal camera/audio for testing
+
+* Disable camera until reboot: `sudo modprobe -r uvcvideo`
+* Re-enable camera: `sudo modprobe uvcvideo`
+
 ## Contribution Guidelines
 
 Please read the [Code of Conduct](https://nextcloud.com/community/code-of-conduct/). This document offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere, and to explain how together we can strengthen and support each other.

css/style.scss

@@ -474,11 +474,13 @@ video {
 	opacity: .7;
 }
 
+.nameIndicator button.no-audio-available,
 .nameIndicator button.no-video-available {
 	opacity: .7;
 	cursor: not-allowed;
- }
+}
 
+.nameIndicator button.no-audio-available:active,
 .nameIndicator button.no-video-available:active {
 	background-color: transparent;
 }

js/app.js

@@ -58,7 +58,9 @@
 		videoWasEnabledAtLeastOnce: false,
 		displayedGuestNameHint: false,
 		audioDisabled: localStorage.getItem("audioDisabled"),
+		audioNotFound: false,
 		videoDisabled: localStorage.getItem("videoDisabled"),
+		videoNotFound: false,
 		fullscreenDisabled: true,
 		_searchTerm: '',
 		guestNick: null,
@@ -622,6 +624,19 @@
 			this.initAudioVideoSettings(configuration);
 			this.restoreEmptyContent();
 		},
+		startWithoutLocalMedia: function(isAudioEnabled, isVideoEnabled) {
+			$('.videoView').removeClass('hidden');
+
+			this.disableAudio();
+			if (!isAudioEnabled) {
+				this.hasNoAudio();
+			}
+
+			this.disableVideo();
+			if (!isVideoEnabled) {
+				this.hasNoVideo();
+			}
+		},
 		_onPopState: function(params) {
 			if (!_.isUndefined(params.token)) {
 				this.connection.joinRoom(params.token);
@@ -678,7 +693,7 @@
 			this.fullscreenDisabled = true;
 		},
 		enableAudio: function() {
-			if (!OCA.SpreedMe.webrtc) {
+			if (this.audioNotFound || !OCA.SpreedMe.webrtc) {
 				return;
 			}
 
@@ -690,7 +705,7 @@
 			this.audioDisabled = false;
 		},
 		disableAudio: function() {
-			if (!OCA.SpreedMe.webrtc) {
+			if (this.audioNotFound || !OCA.SpreedMe.webrtc) {
 				return;
 			}
 
@@ -701,8 +716,15 @@
 
 			this.audioDisabled = true;
 		},
+		hasNoAudio: function() {
+			$('#mute').removeClass('audio-disabled icon-audio')
+				.addClass('no-audio-available icon-audio-off')
+				.attr('data-original-title', t('spreed', 'No audio'));
+			this.audioDisabled = true;
+			this.audioNotFound = true;
+		},
 		enableVideo: function() {
-			if (!OCA.SpreedMe.webrtc) {
+			if (this.videoNotFound || !OCA.SpreedMe.webrtc) {
 				return;
 			}
 
@@ -757,7 +779,7 @@
 			localVideo.hide();
 		},
 		disableVideo: function() {
-			if (!OCA.SpreedMe.webrtc) {
+			if (this.videoNotFound || !OCA.SpreedMe.webrtc) {
 				return;
 			}
 
@@ -765,6 +787,13 @@
 			this.hideVideo();
 			this.videoDisabled = true;
 		},
+		hasNoVideo: function() {
+			$('#hideVideo').removeClass('video-disabled icon-video')
+				.addClass('no-video-available icon-video-off')
+				.attr('data-original-title', t('spreed', 'No Camera'));
+			this.videoDisabled = true;
+			this.videoNotFound = true;
+		},
 		disableScreensharingButton: function() {
 			$('#screensharing-button').attr('data-original-title', t('spreed', 'Enable screensharing'))
 					.addClass('screensharing-disabled icon-screen-off')

js/simplewebrtc.js

@@ -7752,11 +7752,23 @@
 // check if all audio streams are enabled
 	LocalMedia.prototype.isAudioEnabled = function () {
 		var enabled = true;
+		var hasAudioTracks = false;
 		this.localStreams.forEach(function (stream) {
-			stream.getAudioTracks().forEach(function (track) {
-				enabled = enabled && track.enabled;
-			});
+			var audioTracks = stream.getAudioTracks();
+			if (audioTracks.length > 0) {
+				hasAudioTracks = true;
+				audioTracks.forEach(function (track) {
+					enabled = enabled && track.enabled;
+				});
+			}
 		});
+
+		// If no audioTracks were found, that means there is no microphone device.
+		// In that case, isAudioEnabled should return false.
+		if (!hasAudioTracks) {
+			return false;
+		}
+
 		return enabled;
 	};
 

js/webrtc.js

@@ -642,11 +642,11 @@ var spreedPeerConnectionTable = [];
 
 		OCA.SpreedMe.webrtc.on('localMediaError', function(error) {
 			console.log('Access to microphone & camera failed', error);
-			var message, messageAdditional;
+			var message;
 			if (error.name === "NotAllowedError") {
 				if (error.message && error.message.indexOf("Only secure origins") !== -1) {
 					message = t('spreed', 'Access to microphone & camera is only possible with HTTPS');
-					messageAdditional = t('spreed', 'Please adjust your configuration');
+					message += ': ' + t('spreed', 'Please move your setup to HTTPS');
 				} else {
 					message = t('spreed', 'Access to microphone & camera was denied');
 				}
@@ -654,17 +654,18 @@ var spreedPeerConnectionTable = [];
 				console.log('WebRTC not supported');
 
 				message = t('spreed', 'WebRTC is not supported in your browser');
-				messageAdditional = t('spreed', 'Please use a different browser like Firefox or Chrome');
+				message += ': ' + t('spreed', 'Please use a different browser like Firefox or Chrome');
 			} else {
 				message = t('spreed', 'Error while accessing microphone & camera');
 				console.log('Error while accessing microphone & camera: ', error.message || error.name);
 			}
 
-			app.setEmptyContentMessage(
-				'icon-video-off',
-				message,
-				messageAdditional
-			);
+			app.startWithoutLocalMedia(webrtc.webrtc.isAudioEnabled(), webrtc.webrtc.isVideoEnabled());
+			OC.Notification.show(message, {
+				type: 'error',
+				timeout: 15,
+			});
+			app.restoreEmptyContent();
 		});
 
 		if(!OCA.SpreedMe.webrtc.capabilities.support) {
@@ -954,19 +955,21 @@ var spreedPeerConnectionTable = [];
 		});
 
 		OCA.SpreedMe.webrtc.on('localStream', function() {
-			if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) {
-				OCA.SpreedMe.app.videoWasEnabledAtLeastOnce = true;
+			console.log('localStream');
+			if (!app.videoWasEnabledAtLeastOnce) {
+				app.videoWasEnabledAtLeastOnce = true;
+			}
+
+			if (!app.videoDisabled) {
+				app.enableVideo();
 			}
 
-			if (!OCA.SpreedMe.app.videoDisabled) {
-				OCA.SpreedMe.app.enableVideo();
+			if (!OCA.SpreedMe.webrtc.webrtc.isAudioEnabled()) {
+				app.hasNoAudio();
 			}
 
-			var $hideVideoButton = $('#hideVideo');
-			if (OCA.SpreedMe.webrtc.webrtc.localStream.getVideoTracks().length === 0) {
-				$hideVideoButton.removeClass('video-disabled icon-video')
-					.addClass('no-video-available icon-video-off')
-					.attr('data-original-title', t('spreed', 'No Camera'));
+			if (!OCA.SpreedMe.webrtc.webrtc.isVideoEnabled()) {
+				app.hasNoVideo();
 			}
 		});
 	}