Handle errors when accessing local media.

For now uses a custom message for HTTPS-required error in Chrome (#18) and
the "NotAllowedError" error if the used denied access to the devices. All
other errors show the message as reported by the browser.

css/style.css

@@ -126,3 +126,12 @@ video {
 #app-content:fullscreen {
 	width: 100%;
 }
+
+.localmediaerror h2 {
+	color: red;
+	font-weight: bold;
+}
+
+.localmediaerror .uploadmessage {
+	display: none;
+}

js/webrtc.js

@@ -1,4 +1,7 @@
-webrtc = new SimpleWebRTC({
+var webrtc;
+
+$(document).ready(function() {
+	webrtc = new SimpleWebRTC({
 		localVideoEl: 'localVideo',
 		remoteVideosEl: '',
 		autoRequestMedia: true,
@@ -7,6 +10,59 @@ webrtc = new SimpleWebRTC({
 		detectSpeakingEvents: true,
 		connection: OCA.SpreedMe.XhrConnection,
 		supportDataChannel: true
+	});
+
+	webrtc.on('localMediaError', function(error) {
+		console.log("Access to local media failed", error);
+		var message;
+		if (error.name === "NotAllowedError") {
+			if (error.message && error.message.indexOf("Only secure origins") !== -1) {
+				message = t('spreedm', 'Access to the microphone / camera is only possible when running over HTTPS. Please check your configuration.');
+			} else {
+				message = t('spreed', 'Access to the microphone / camera was denied.');
+			}
+		} else {
+			message = t('spreed', 'Error while accessing local media: {error}', {error: error.message || error.name});
+		}
+		$('#emptycontent h2').text(message);
+		$('#emptycontent').addClass('localmediaerror');
+	});
+
+	webrtc.on('joinedRoom', function() {
+		$('#app-content').removeClass('icon-loading');
+		$('.videoView').removeClass('hidden');
+		openEventSource();
+		OCA.SpreedMe.Rooms.list();
+	});
+
+	webrtc.on('videoAdded', function (video, peer) {
+		console.log('video added', peer);
+		var remotes = document.getElementById('remotes');
+		if (remotes) {
+			// Indicator for username
+			var userIndicator = document.createElement('div');
+			userIndicator.className = 'nameIndicator';
+			userIndicator.textContent = peer.id;
+
+			// Generic container
+			var container = document.createElement('div');
+			container.className = 'videoContainer';
+			container.id = 'container_' + webrtc.getDomId(peer);
+			container.appendChild(video);
+			container.appendChild(userIndicator);
+			video.oncontextmenu = function () { return false; };
+			remotes.appendChild(container);
+		}
+	});
+
+	// a peer was removed
+	webrtc.on('videoRemoved', function (video, peer) {
+		var remotes = document.getElementById('remotes');
+		var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
+		if (remotes && el) {
+			remotes.removeChild(el);
+		}
+	});
 });
 
 function openEventSource() {
@@ -71,39 +127,3 @@ function openEventSource() {
 		}
 	});
 }
-
-webrtc.on('joinedRoom', function() {
-	$('#app-content').removeClass('icon-loading');
-	$('.videoView').removeClass('hidden');
-	openEventSource();
-	OCA.SpreedMe.Rooms.list();
-});
-
-webrtc.on('videoAdded', function (video, peer) {
-	console.log('video added', peer);
-	var remotes = document.getElementById('remotes');
-	if (remotes) {
-		// Indicator for username
-		var userIndicator = document.createElement('div');
-		userIndicator.className = 'nameIndicator';
-		userIndicator.textContent = peer.id;
-
-		// Generic container
-		var container = document.createElement('div');
-		container.className = 'videoContainer';
-		container.id = 'container_' + webrtc.getDomId(peer);
-		container.appendChild(video);
-		container.appendChild(userIndicator);
-		video.oncontextmenu = function () { return false; };
-		remotes.appendChild(container);
-	}
-});
-
-// a peer was removed
-webrtc.on('videoRemoved', function (video, peer) {
-	var remotes = document.getElementById('remotes');
-	var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
-	if (remotes && el) {
-		remotes.removeChild(el);
-	}
-});