attempt to make media selector work everywhere (TM)

loadDevices not only in electron

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/CallMediaHandler.js

@@ -26,6 +26,8 @@ export default {
             const audioIn = {};
             const videoIn = {};
 
+            if (devices.some((device) => !device.label)) return false;
+
             devices.forEach((device) => {
                 switch (device.kind) {
                     case 'audioinput': audioIn[device.deviceId] = device.label; break;

src/components/structures/LoggedInView.js

@@ -72,9 +72,7 @@ export default React.createClass({
         // RoomView.getScrollState()
         this._scrollStateMap = {};
 
-        // Only run these in electron, at least until a better mechanism for perms exists
+        CallMediaHandler.loadDevices();
-        // https://w3c.github.io/permissions/#dom-permissionname-device-info
-        if (window && window.process && window.process.type) CallMediaHandler.loadDevices();
 
         document.addEventListener('keydown', this._onKeyDown);
     },

src/components/structures/UserSettings.js

@@ -178,17 +178,7 @@ module.exports = React.createClass({
             });
         }
 
-        q().then(() => {
+        this._refreshMediaDevices();
-            return CallMediaHandler.getDevices();
-        }).then((mediaDevices) => {
-            console.log("got mediaDevices", mediaDevices, this._unmounted);
-            if (this._unmounted) return;
-            this.setState({
-                mediaDevices,
-                activeAudioInput: this._localSettings['webrtc_audioinput'] || 'default',
-                activeVideoInput: this._localSettings['webrtc_videoinput'] || 'default',
-            });
-        });
 
         // Bulk rejecting invites:
         // /sync won't have had time to return when UserSettings re-renders from state changes, so getRooms()
@@ -210,8 +200,6 @@ module.exports = React.createClass({
         this._syncedSettings = syncedSettings;
 
         this._localSettings = UserSettingsStore.getLocalSettings();
-        this._setAudioInput = this._setAudioInput.bind(this);
-        this._setVideoInput = this._setVideoInput.bind(this);
     },
 
     componentDidMount: function() {
@@ -233,6 +221,20 @@ module.exports = React.createClass({
         }
     },
 
+    _refreshMediaDevices: function() {
+        q().then(() => {
+            return CallMediaHandler.getDevices();
+        }).then((mediaDevices) => {
+            // console.log("got mediaDevices", mediaDevices, this._unmounted);
+            if (this._unmounted) return;
+            this.setState({
+                mediaDevices,
+                activeAudioInput: this._localSettings['webrtc_audioinput'] || 'default',
+                activeVideoInput: this._localSettings['webrtc_videoinput'] || 'default',
+            });
+        });
+    },
+
     _refreshFromServer: function() {
         const self = this;
         q.all([
@@ -818,9 +820,29 @@ module.exports = React.createClass({
         CallMediaHandler.setVideoInput(deviceId);
     },
 
+    _requestMediaPermissions: function() {
+        console.log("Request media perms");
+        const getUserMedia = (
+            window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia
+        );
+        if (getUserMedia) {
+            return getUserMedia.apply(window.navigator, [
+                { video: true, audio: true },
+                this._refreshMediaDevices,
+                function() {},
+            ]);
+        }
+    },
+
     _renderWebRtcSettings: function() {
-        if (!(window && window.process && window.process.type)
+        if (this.state.mediaDevices === false) {
-         || !this.state.mediaDevices) return;
+            return <div>
+                <h3>WebRTC</h3>
+                <div className="mx_UserSettings_section">
+                    <h5 onClick={this._requestMediaPermissions}>Missing Media Permissions, click to request.</h5>
+                </div>
+            </div>;
+        } else if (!this.state.mediaDevices) return;
 
         const Dropdown = sdk.getComponent('elements.Dropdown');