diff --git a/web/app/assets/javascripts/webcam_viewer.js.coffee b/web/app/assets/javascripts/webcam_viewer.js.coffee
new file mode 100644
index 000000000..6bef93d2c
--- /dev/null
+++ b/web/app/assets/javascripts/webcam_viewer.js.coffee
@@ -0,0 +1,104 @@
+$ = jQuery
+context = window
+context.JK ||= {};
+
+context.JK.WebcamViewer = class WebcamViewer
+  constructor: (@root) ->
+    @client = context.jamClient
+    @logger = context.JK.logger
+    @initialScan = false
+    @toggleBtn = null
+    @webcamSelect = null
+    @resolutionSelect = null
+    @videoShared=false
+    @resolution=null
+
+  init: (root) =>
+    console.log 'root', root
+    @root = root
+    @toggleBtn = @root.find(".webcam-test-btn")
+    @webcamSelect = @root.find(".webcam-select-container select")
+    @resolutionSelect = @root.find(".webcam-resolution-select-container select")
+    @webcamSelect.on("change", this.selectWebcam)
+    console.log 'webcamSelect', @webcamSelect
+
+  beforeShow:() =>
+    this.loadWebCams()
+    this.selectWebcam()
+    this.loadResolutions()
+    this.selectResolution()
+    @initialScan = true
+    #client.SessSetInsetPosition(5)   
+    #client.SessSetInsetSize(1)
+    #client.FTUESetAutoSelectVideoLayout(false)
+    #client.SessSelectVideoDisplayLayoutGroup(1)      
+    
+  
+  selectWebcam:(e, data) =>
+    console.log 'Selecting control: ', @webcamSelect
+    device = @webcamSelect.val()
+    if device != null and device != ''
+      console.log 'Selecting webcam: ', device
+      
+  selectResolution:() =>
+    console.log 'Selecting res control: ', @resolutionSelect
+    @resolution = @resolutionSelect.val()
+    if @resolution != null and @resolution != ''
+      console.log 'Selecting res: ', @resolution
+      @client.FTUESetVideoEncodeResolution @resolution    
+
+  setVideoOff:() =>
+    if this.isVideoShared()
+      @client.SessStopVideoSharing()
+      
+  isVideoShared:() =>
+    @videoShared
+    
+  setToggleState:() =>
+    available = @webcamSelect.find('option').size() > 0
+    shared = this.isVideoShared()
+    console.log 'Setting toggle from : ', shared
+    @toggleBtn.prop 'disabled', true
+    @toggleBtn.prop 'disabled', !available
+    
+  toggleWebcam:() =>
+    console.log 'Toggling webcam from: ', this.isVideoShared()
+    if this.isVideoShared()
+      @client.SessStopVideoSharing()
+      @videoShared = false
+    else
+      @client.SessStartVideoSharing 0
+      @videoShared = true
+    
+  loadWebCams:() =>
+    devices = @client.FTUEGetVideoCaptureDeviceNames()
+    selectedDevice = @client.FTUECurrentSelectedVideoDevice()
+    selectControl = @webcamSelect
+    context._.each devices, (device) ->
+      selected = device == selectedDevice
+      option = $('<option/>',
+        id: device
+        value: device
+        text: device)
+      console.log("Appending ", option, selectControl)
+      selectControl.append option
+    selectControl.val selectedDevice
+    
+    if devices.length == 0
+      @root.find('.no-webcam-msg').removeClass 'hidden'
+    else
+      @root.find('.no-webcam-msg').addClass 'hidden'      
+
+  loadResolutions:() =>
+    resolutions = @client.FTUEGetAvailableEncodeVideoResolutions()
+    selectControl = @resolutionSelect
+    console.log 'FOUND THESE RESOLUTIONS', resolutions, selectControl
+    context._.each resolutions, (value, key, obj) ->
+      console.log 'RRR', key, value
+      option = $('<option/>',
+        value: value
+        text: value)
+      selectControl.append option      
+
+    if @resolution != null and @resolution != ''
+      selectControl.val(@resolution)