Add selection of video device for sender

sender/camera-sender.html

@@ -27,15 +27,21 @@
             </div>
 
             <div id="inputs-container" class="main__inputs-container hidden">
+                <div class="form-control">
+                    <label class="form-control__label" for="video-device-select">Video Device</label>
+                    <select id="video-device-select" class="form-control__input">
+                    </select>
+                </div>
+
                 <div class="form-control">
                     <label class="form-control__label" for="res-select">Resolution</label>
                     <select id="res-select" class="form-control__input">
-                        <option value="lowres">320x240</option>
-                        <option value="lowres-16:9">320x180</option>
-                        <option value="stdres" selected>640x480</option>
-                        <option value="stdres-16:9">640x360</option>
-                        <option value="hires-4:3">960x720</option>
-                        <option value="hires-16:9">1280x720</option>
+                        <option value="320x240">320x240</option>
+                        <option value="320x180">320x180</option>
+                        <option value="640x480" selected>640x480</option>
+                        <option value="640x360">640x360</option>
+                        <option value="960x720">960x720</option>
+                        <option value="1280x720">1280x720</option>
                     </select>
                 </div>
 

sender/camera-sender.js

@@ -3,7 +3,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
     var janus = null;
     var videoroomHandle = null;
-    var sendResolution = 'stdres';
+    var sendResolution = '640x480';
+    var videoDeviceId = null;
 
     var startButton = document.getElementById('start');
     var stopButton = document.getElementById('stop');
@@ -136,7 +137,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 return;
             }
 
-
             janus = new Janus({
                 server: server,
                 success: function() {
@@ -147,15 +147,15 @@ document.addEventListener('DOMContentLoaded', function() {
                             videoroomHandle = pluginHandle;
                             Janus.log('Plugin attached! (' + videoroomHandle.getPlugin() + ', id=' + videoroomHandle.getId() + ')');
 
-                            hideSpinner();
-                            showInputs();
-
                             startButton.onclick = function() {
                                 setStatusMessage('Connecting...');
                                 var resSelect = document.getElementById('res-select');
+                                var videoDeviceSelect = document.getElementById('video-device-select');
                                 startButton.setAttribute('disabled', '');
                                 resSelect.setAttribute('disabled', '');
+                                videoDeviceSelect.setAttribute('disabled', '');
                                 sendResolution = resSelect.value;
+                                videoDeviceId = videoDeviceSelect.value;
                                 Janus.log('sendResolution:', sendResolution);
                                 if (useUserPin) {
                                     var pinInputEl = document.getElementById('pin-input');
@@ -164,8 +164,29 @@ document.addEventListener('DOMContentLoaded', function() {
                                 }
                                 shareCamera(pin);
                             };
+
+                            Janus.listDevices(function (devices) {
+                                var videoDeviceSelectEl = document.getElementById('video-device-select');
+                                var videoInputDevices = devices.filter(function(dev) {
+                                    return dev.kind === 'videoinput'
+                                });
+                                if (videoInputDevices.length === 0) {
+                                    setStatusMessage(`Error: There are no video input devices attached - Reload to try again`, STATUS_CODE.error);
+                                } else {
+                                    for (var dev of videoInputDevices) {
+                                        var optionEl = document.createElement('option');
+                                        optionEl.innerText = dev.label;
+                                        optionEl.value = dev.deviceId;
+                                        videoDeviceSelectEl.appendChild(optionEl);
+                                    }
+
+                                    hideSpinner();
+                                    showInputs();
+
                                     startButton.removeAttribute('disabled');
                                     setStatusMessage('Connected - Click Start to transmit your camera feed');
+                                }
+                            });
                         },
                         error: function(error) {
                             Janus.error('Error attaching plugin: ', error);
@@ -246,10 +267,16 @@ document.addEventListener('DOMContentLoaded', function() {
                 Janus.log('Joined event:', msg);
                 feedId = msg.id;
                 Janus.log('Successfully joined room ' + msg['room'] + ' with ID ' + feedId);
+                var sendResolutionSplitStr = sendResolution.split('x');
+                var videoOffer = {
+                    width: parseInt(sendResolutionSplitStr[0]),
+                    height: parseInt(sendResolutionSplitStr[1]),
+                    deviceId: videoDeviceId
+                };
                 videoroomHandle.createOffer({
                     media: {
                         videoSend: true,
-                        video: sendResolution,
+                        video: videoOffer,
                         audioSend: false,
                         videoRecv: false
                     },