diff --git a/sender/camera-sender.html b/sender/camera-sender.html index 0a25bf5c5ab9b732737639d6aee38d28675e48b7..fb9eeaf6cbe07f531a6a67838fe744689b02ca36 100644 --- a/sender/camera-sender.html +++ b/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> diff --git a/sender/camera-sender.js b/sender/camera-sender.js index c2561cf4fb52f1d9cb9a41d4deded168e01c4847..328d6937f9b9d21bedb3b3c13e46d40b9b0ddd6d 100644 --- a/sender/camera-sender.js +++ b/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); }; - startButton.removeAttribute('disabled'); - setStatusMessage('Connected - Click Start to transmit your camera feed'); + + 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 },