zhyz-cloudrender-v5 1.0.0

package/p2p.js

@@ -0,0 +1,1426 @@
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable no-undef */
+/* eslint-disable no-mixed-spaces-and-tabs */
+/* eslint-disable no-unused-vars */
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+const webRtcPlayer = require('./webRtcPlayer');
+let className = '';
+let roomId = '';
+let receivedBytesMeasurement = '';
+let receivedBytes = 0;
+let color = 'red';
+// Window events for a gamepad connecting
+let haveEvents = 'GamepadEvent' in window;
+let playerElement = null;
+let videoElement = null;
+let haveWebkitEvents = 'WebKitGamepadEvent' in window;
+let controllers = {};
+let rAF = window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.requestAnimationFrame;
+let kbEvent = document.createEvent("KeyboardEvent");
+let initMethod = typeof kbEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
+
+let webRtcPlayerObj = null;
+let webRtcDataChannelObj = null;
+let print_stats = false;
+let print_inputs = true;
+let connect_on_load = true;
+
+import store, {
+	SET_WEBRTC_OBJ
+} from './store'
+
+
+
+//let webRtcDataChannel_pc = null;
+let is_reconnection = false;
+let ws;
+const WS_OPEN_STATE = 1;
+
+let qualityControlOwnershipCheckBox;
+let matchViewportResolution;
+// TODO: Remove this - workaround because of bug causing UE to crash when switching resolutions too quickly
+let lastTimeResized = new Date().getTime();
+let resizeTimeout;
+
+let onDataChannelConnected;
+let responseEventListeners = new Map();
+
+// A freeze frame is a still JPEG image shown instead of the video.
+let freezeFrame = {
+	receiving: false,
+    size: 0,
+    jpeg: undefined,
+    height: 0,
+    width: 0,
+    valid: false
+};
+
+// Optionally detect if the user is not interacting (AFK) and disconnect them.
+let afk = {
+	enabled: false,   // Set to true to enable the AFK system.
+    warnTimeout: 120,   // The time to elapse before warning the user they are inactive.
+    closeTimeout: 10,   // The time after the warning when we disconnect the user.
+
+    active: false,   // Whether the AFK system is currently looking for inactivity.
+    overlay: undefined,   // The UI overlay warning the user that they are inactive.
+    warnTimer: undefined,   // The timer which waits to show the inactivity warning overlay.
+    countdown: 0,   // The inactivity warning overlay has a countdown to show time until disconnect.
+    countdownTimer: undefined,   // The timer used to tick the seconds shown on the inactivity warning overlay.
+}
+
+// If the user focuses on a UE4 input widget then we show them a button to open
+// the on-screen keyboard. JavaScript security means we can only show the
+// on-screen keyboard in response to a user interaction.
+let editTextButton = undefined;
+
+// A hidden input text box which is used only for focusing and opening the
+// on-screen keyboard.
+let hiddenInput = undefined;
+
+let t0 = Date.now();
+
+let params = {
+    roomname: '',
+    videousername: '',
+    rtc_ip: '',
+    rtc_port: '',
+};
+
+function gamepadConnectHandler(e) {
+    gamepad = e.gamepad;
+	controllers[gamepad.index] = {};
+    controllers[gamepad.index].currentState = gamepad;
+    controllers[gamepad.index].prevState = gamepad;
+    rAF(updateStatus);
+}
+
+function gamepadDisconnectHandler(e) {
+    delete controllers[e.gamepad.index];
+}
+
+function setupHtmlEvents() {
+    //Window events
+    window.addEventListener('orientationchange', onOrientationChange);
+
+    //Gamepad events
+    if (haveEvents) {
+        window.addEventListener("gamepadconnected", gamepadConnectHandler);
+        window.addEventListener("gamepaddisconnected", gamepadDisconnectHandler);
+    } else if (haveWebkitEvents) {
+        window.addEventListener("webkitgamepadconnected", gamepadConnectHandler);
+        window.addEventListener("webkitgamepaddisconnected", gamepadDisconnectHandler);
+    }
+
+    //HTML elements controls
+    let overlayButton = document.getElementById('overlayButton');
+    overlayButton && overlayButton.addEventListener('click', onExpandOverlay_Click);
+
+    let resizeCheckBox = document.getElementById('enlarge-display-to-fill-window-tgl');
+    if (resizeCheckBox !== null) {
+        resizeCheckBox.onchange = function(event) {
+            // resizePlayerStyle();
+        };
+    }
+
+    qualityControlOwnershipCheckBox = document.getElementById('quality-control-ownership-tgl');
+    if (qualityControlOwnershipCheckBox !== null) {
+        qualityControlOwnershipCheckBox.onchange = function(event) {
+            requestQualityControl();
+        };
+    }
+
+    let encoderParamsSubmit = document.getElementById('encoder-params-submit');
+    if (encoderParamsSubmit !== null) {
+        encoderParamsSubmit.onclick = function(event) {
+            let rateControl = document.getElementById('encoder-rate-control').value;
+            let targetBitrate = document.getElementById('encoder-target-bitrate-text').value * 1000;
+            let maxBitrate = document.getElementById('encoder-max-bitrate-text').value * 1000;
+            let minQP = document.getElementById('encoder-min-qp-text').value;
+            let maxQP = document.getElementById('encoder-max-qp-text').value;
+            let fillerData = document.getElementById('encoder-filler-data-tgl').checked ? 1 : 0;
+            let multipass = document.getElementById('encoder-multipass').value;
+
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.RateControl ' + rateControl });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.TargetBitrate ' + targetBitrate > 0 ? targetBitrate : -1 });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.MaxBitrateVBR ' + maxBitrate > 0 ? maxBitrate : -1 });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.MinQP ' + minQP });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.MaxQP ' + maxQP });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.EnableFillerData ' + fillerData });
+            emitUIInteraction({ Console: 'PixelStreaming.Encoder.Multipass ' + multipass });
+        };
+    }
+
+    let webrtcParamsSubmit = document.getElementById('webrtc-params-submit');
+    if (webrtcParamsSubmit !== null) {
+        webrtcParamsSubmit.onclick = function(event) {
+            let degradationPref = document.getElementById('webrtc-degradation-pref').value;
+            let maxFPS = document.getElementById('webrtc-max-fps-text').value;
+            let minBitrate = document.getElementById('webrtc-min-bitrate-text').value * 1000;
+            let maxBitrate = document.getElementById('webrtc-max-bitrate-text').value * 1000;
+            let lowQP = document.getElementById('webrtc-low-qp-text').value;
+            let highQP = document.getElementById('webrtc-high-qp-text').value;
+
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.DegradationPreference ' + degradationPref });
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.MaxFps ' + maxFPS });
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.MinBitrate ' + minBitrate });
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.MaxBitrate ' + maxBitrate });
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.LowQpThreshold ' + lowQP });
+            emitUIInteraction({ Console: 'PixelStreaming.WebRTC.HighQpThreshold ' + highQP });
+        };
+    }
+
+    let showFPSButton = document.getElementById('show-fps-button');
+    if (showFPSButton !== null) {
+        showFPSButton.onclick = function (event) {
+            let consoleDescriptor = {
+                Console: 'stat fps'
+            };
+            emitUIInteraction(consoleDescriptor);
+        };
+    }
+
+    let matchViewportResolutionCheckBox = document.getElementById('match-viewport-res-tgl');
+    if (matchViewportResolutionCheckBox !== null) {
+        matchViewportResolutionCheckBox.onchange = function (event) {
+            matchViewportResolution = matchViewportResolutionCheckBox.checked;
+        };
+    }
+
+    let statsCheckBox = document.getElementById('show-stats-tgl');
+    if (statsCheckBox !== null) {
+        statsCheckBox.onchange = function(event) {
+            let stats = document.getElementById('statsContainer');
+            stats.style.display = event.target.checked ? "block" : "none";
+        };
+    }
+
+    let kickButton = document.getElementById('kick-other-players-button');
+    if (kickButton) {
+        kickButton.onclick = function (event) {
+            ws.send(JSON.stringify({
+                type: 'kick'
+            }));
+        };
+    }
+
+    let latencyButton = document.getElementById('test-latency-button');
+    if (latencyButton) {
+        latencyButton.onclick = () => {
+            sendStartLatencyTest();
+        };
+    }
+}
+
+function sendStartLatencyTest() {
+    // We need WebRTC to be active to do a latency test.
+    if (!webRtcPlayerObj) {
+        return;
+    }
+
+    let onTestStarted = function(StartTimeMs) {
+        let descriptor = {
+            StartTime: StartTimeMs
+        };
+        emitDescriptor(MessageType.LatencyTest, descriptor);
+    };
+
+    webRtcPlayerObj.startLatencyTest(onTestStarted);
+}
+
+function setOverlay() {
+    return;
+}
+
+function showConnectOverlay() {
+    connect();
+        startAfkWarningTimer();
+}
+
+function showTextOverlay(text) {
+    let textOverlay = document.createElement('div');
+    textOverlay.id = 'messageOverlay';
+    textOverlay.innerHTML = text ? text : '';
+    setOverlay('textDisplayState', textOverlay);
+}
+
+function playVideoStream() {
+    if (webRtcPlayerObj && webRtcPlayerObj.video) {
+
+        webRtcPlayerObj.video.play().catch(function(onRejectedReason){
+            console.error(onRejectedReason);
+        });
+
+        requestInitialSettings();
+        requestQualityControl();
+        hideOverlay();
+    } else {
+        console.error("Could not player video stream because webRtcPlayerObj.video was not valid.")
+    }
+}
+
+
+
+function updateAfkOverlayText() {
+    afk.overlay.innerHTML = '<center>No activity detected<br>Disconnecting in ' + afk.countdown + ' seconds<br>Click to continue<br></center>';
+}
+
+function showAfkOverlay() {
+    // Pause the timer while the user is looking at the inactivity warning overlay.
+    stopAfkWarningTimer();
+
+    // Show the inactivity warning overlay.
+    afk.overlay = document.createElement('div');
+    afk.overlay.id = 'afkOverlay';
+    setOverlay('clickableState', afk.overlay, event => {
+        // The user clicked so start the timer again and carry on.
+        hideOverlay();
+        clearInterval(afk.countdownTimer);
+        startAfkWarningTimer();
+    });
+
+    afk.countdown = afk.closeTimeout;
+    updateAfkOverlayText();
+
+    
+	if (inputOptions.controlScheme == ControlSchemeType.LockedMouse) {
+        document.exitPointerLock();
+    }
+	
+
+    afk.countdownTimer = setInterval(function() {
+        afk.countdown--;
+        if (afk.countdown == 0) {
+            // The user failed to click so disconnect them.
+            hideOverlay();
+            ws.close();
+        } else {
+            // Update the countdown message.
+            updateAfkOverlayText();
+        }
+    }, 1000);
+}
+
+function hideOverlay() {
+    setOverlay('hiddenState');
+}
+
+// Start a timer which when elapsed will warn the user they are inactive.
+function startAfkWarningTimer() {
+    afk.active = afk.enabled;
+    resetAfkWarningTimer();
+}
+
+// Stop the timer which when elapsed will warn the user they are inactive.
+function stopAfkWarningTimer() {
+    afk.active = false;
+}
+
+// If the user interacts then reset the warning timer.
+function resetAfkWarningTimer() {
+    if (afk.active) {
+        clearTimeout(afk.warnTimer);
+        afk.warnTimer = setTimeout(function () {
+            showAfkOverlay();
+        }, afk.warnTimeout * 1000);
+    }
+}
+
+function createWebRtcOffer() {
+    if (webRtcPlayerObj ) {
+        showTextOverlay('Starting connection to server, please wait');
+        webRtcPlayerObj.createOffer();
+      //  webRtcDataChannelObj.createOffer();
+    } else {
+        showTextOverlay('Unable to setup video');
+    }
+}
+
+
+
+
+/**
+ 功能： 获取Offer SDP 描述符的
+
+*/
+function getOffer(desc)
+{
+    //设置Offer
+    webRtcDataChannelObj.setLocalDescription(desc);
+    
+     if (ws && ws.readyState === WS_OPEN_STATE) 
+            { 
+               let offersdp  = JSON.stringify({
+                       msg_id: 208,
+                        data:  {
+                                    rtc_type:1,
+                                    offer : desc.sdp
+                              } 
+                   });
+                 
+                ws.send(offersdp);
+           }
+}
+
+function handleOfferError(err)
+{
+    console.log('Failed ot carete offer:', err);
+}
+
+
+function createWebRtcDataChannelOffer()
+{
+    if (  webRtcDataChannelObj) {
+        showTextOverlay('Starting connection to server, please wait');
+       let datachannel = webRtcDataChannelObj.createDataChannel('rtc', {ordered: true});
+    // Inform browser we would like binary data as an ArrayBuffer (FF chooses Blob by default!)
+        datachannel.binaryType = "arraybuffer";
+        datachannel.onopen = function (e) {
+  
+         }
+
+        datachannel.onclose = function (e) {
+            console.log(`data channel  closed`);
+         }
+
+            datachannel.onmessage = function (e) {
+              console.log(`Got message  `, e.data);
+       
+         }
+         webRtcDataChannelObj.datachannel = datachannel;
+
+        webRtcDataChannelObj.createOffer()
+            .then(getOffer)
+            .catch(handleOfferError);
+       // webRtcDataChannelObj.createOffer() .then(async function (offerStr){
+        //    webRtcDataChannelObj.setLocalDescription(offerStr);
+       //     if (ws && ws.readyState === WS_OPEN_STATE) 
+       //     { 
+      //          console.log('DataChannel cs --> offer : = ', offerStr);
+      //          let offersdp  = JSON.stringify({
+     //                   msg_id: 208,
+      //                  data:  {
+     //                               rtc_type:0,
+     //                               offer : offerStr.sdp
+    //                           } 
+    //                });
+    //            console.log(`DataChannel -> SS: offer:\n${offersdp}`);
+   //               
+   //             ws.send(offersdp);
+   //         }
+   //     }, function(){console.warn("Couldn't create offer") ;});
+           // .catch(handleOfferError);
+
+         // pc.createOffer(self.sdpConstraints).then(function (offer) {
+                
+         //        // Munging is where we modifying the sdp string to set parameters that are not exposed to the browser's WebRTC API
+         //        mungeSDPOffer(offer);
+
+         //        // Set our munged SDP on the local peer connection so it is "set" and will be send across
+         //        pc.setLocalDescription(offer);
+         //        if (self.onWebRtcDataChannelOffer) {
+         //            console.log('rtctype == 1-');
+         //            self.onWebRtcDataChannelOffer(1, offer);
+         //        }
+         //        else
+         //        {
+         //            console.warn('not find DataChannel Offer callback send msg function ');
+         //        }
+         //    },
+         //    function () { console.warn("Couldn't create offer") });
+        //webRtcDataChannelObj.createOffer();
+    } else {
+        console.log('WebRTC DataChannel not setup, cannot create offer');
+        //showTextOverlay('Unable to setup video');
+    }
+}
+
+
+function arrayBufferToString(buffer, encoding = 'gb2312') {
+  const decoder = new TextDecoder(encoding);
+  return decoder.decode(buffer);
+}
+
+function buf2hex(buffer) { // buffer is an ArrayBuffer
+  return [...new Uint8Array(buffer)]
+      .map(x => x.toString(2).padStart(1, '0'))
+      .join(' ');
+}
+function bufhex(buffer) { // buffer is an ArrayBuffer
+  return [...new Uint8Array(buffer)]
+      .map(x => x.toString(16).padStart(2, '0'))
+      .join('');
+}
+function xsendInputData(data) {
+    // if (webRtcPlayerObj) {
+    //     resetAfkWarningTimer();
+    //      webRtcPlayerObj.send(data);
+    //  }
+      
+}
+
+function sendInputData(data) {
+    // 
+    //if (webRtcDataChannelObj && webRtcDataChannelObj.datachannel.readyState == 'open')  {
+    //   // resetAfkWarningTimer();
+    //     webRtcDataChannelObj.datachannel.send(data);
+    //    // console.log('send input data =', data);
+    // }
+    // else 
+    // {
+	//
+    //    console.warn('send message failed !!! webRtcDataChannelObj.readyState =', webRtcDataChannelObj.readyState);
+    // }
+	// return;
+    if (webRtcPlayerObj) {
+       // resetAfkWarningTimer();
+        webRtcPlayerObj.send(data);
+       //console.log('hex = ', bufhex(data));
+      //  if (ws && ws.readyState === WS_OPEN_STATE) 
+      // { 
+	  //
+      //    // let textDecoder = new TextDecoder("utf-8");
+      //    // let str = textDecoder.decode(data);
+      //    
+      //     //console.log('CS--> data channel  : = ', str);
+      //     //arrayBufferToString(data) 
+      //     let offersdp  = JSON.stringify({
+      //             msg_id: 210,
+      //             datachannel:    data
+      //         });
+      //    // console.log(`-> SS: offer:\n${offersdp}`);
+      //     
+      //     
+      //      
+      //     ws.send(offersdp); 
+	  //
+      // }
+    }
+}
+
+function addResponseEventListener(name, listener) {
+    responseEventListeners.set(name, listener);
+}
+
+function removeResponseEventListener(name) {
+    responseEventListeners.remove(name);
+}
+
+// Must be kept in sync with PixelStreamingProtocol::EToPlayerMsg C++ enum.
+const ToClientMessageType = {
+    QualityControlOwnership: 0,
+    Response: 1,
+    Command: 2,
+    FreezeFrame: 3,
+    UnfreezeFrame: 4,
+    VideoEncoderAvgQP: 5,
+    LatencyTest: 6,
+    InitialSettings: 7
+};
+
+let VideoEncoderQP = "N/A";
+function getQueryVariable(variable)
+{
+      
+       return params[variable];
+}
+
+function setupWebRtcPlayer(htmlElement, config) {
+    
+    webRtcPlayerObj = new webRtcPlayer(config);
+    webRtcPlayerObj.video.className = className;
+    htmlElement.appendChild(webRtcPlayerObj.video);
+
+    webRtcPlayerObj.onWebRtcOffer = function(webrtc_type, offerStr) {
+        if (ws && ws.readyState === WS_OPEN_STATE) 
+		{
+			var room_name = getQueryVariable('roomname');
+			var video_user_name	= getQueryVariable('videousername');
+
+            let offersdp  = JSON.stringify({
+					msg_id: 208,
+					data:  {
+                                rtc_type:webrtc_type,
+								offer : offerStr.sdp
+						   } 
+				});
+			
+			
+			
+			 
+            ws.send(offersdp);
+        }
+    };
+
+    webRtcPlayerObj.onWebRtcCandidate = function(webrtc_type, iceCandidate) {
+        if (ws && ws.readyState === WS_OPEN_STATE) {
+            ws.send(JSON.stringify({
+               /* type: 'iceCandidate',*/
+                /*candidate: candidate*/
+				msg_id: 208,
+					data:  {
+                                rtc_type:webrtc_type,
+								type : 'candidate',
+								label : iceCandidate.sdpMLineIndex,
+								id :  iceCandidate.sdpMid,
+								candidate :  iceCandidate.candidate
+						   } 
+            }));
+        }
+    };
+
+    webRtcPlayerObj.onVideoInitialised = function() {
+        if (ws && ws.readyState === WS_OPEN_STATE) {
+            playVideoStream();
+        }
+    };
+
+    // webRtcPlayerObj.onDataChannelConnected = function() {
+    //     if (ws && ws.readyState === WS_OPEN_STATE) {
+    //         showTextOverlay('WebRTC connected, waiting for video');
+
+    //         if (webRtcPlayerObj.video && webRtcPlayerObj.video.srcObject && webRtcPlayerObj.onVideoInitialised) {
+    //             webRtcPlayerObj.onVideoInitialised();
+    //         }
+    //     }
+    // };
+
+ 
+
+    function processFreezeFrameMessage(view) {
+        // Reset freeze frame if we got a freeze frame message and we are not "receiving" yet.
+        if (!freezeFrame.receiving) {
+            freezeFrame.receiving = true;
+            freezeFrame.valid = false;
+            freezeFrame.size = 0;
+            freezeFrame.jpeg = undefined;
+        }
+
+        // Extract total size of freeze frame (across all chunks)
+        freezeFrame.size = (new DataView(view.slice(1, 5).buffer)).getInt32(0, true);
+
+        // Get the jpeg part of the payload
+        let jpegBytes = view.slice(1 + 4);
+
+        // Append to existing jpeg that holds the freeze frame
+        if (freezeFrame.jpeg) {
+            let jpeg = new Uint8Array(freezeFrame.jpeg.length + jpegBytes.length);
+            jpeg.set(freezeFrame.jpeg, 0);
+            jpeg.set(jpegBytes, freezeFrame.jpeg.length);
+            freezeFrame.jpeg = jpeg;
+        }
+        // No existing freeze frame jpeg, make one
+        else {
+            freezeFrame.jpeg = jpegBytes;
+            freezeFrame.receiving = true;
+        }
+
+        // Uncomment for debug
+        //console.log(`Received freeze frame chunk: ${freezeFrame.jpeg.length}/${freezeFrame.size}`);
+
+        // Finished receiving freeze frame, we can show it now
+        if (freezeFrame.jpeg.length === freezeFrame.size) {
+            freezeFrame.receiving = false;
+            freezeFrame.valid = true;
+            showFreezeFrame();
+        }
+        // We received more data than the freeze frame payload message indicate (this is an error)
+        else if (freezeFrame.jpeg.length > freezeFrame.size) {
+            console.error(`received bigger freeze frame than advertised: ${freezeFrame.jpeg.length}/${freezeFrame.size}`);
+            freezeFrame.jpeg = undefined;
+            freezeFrame.receiving = false;
+        }
+    }
+
+    // webRtcPlayerObj.onDataChannelMessage = function(data) {
+    //     let view = new Uint8Array(data);
+
+    //     if (view[0] === ToClientMessageType.QualityControlOwnership) {
+    //         let ownership = view[1] === 0 ? false : true;
+    //         console.log("Received quality controller message, will control quality: " + ownership);
+    //         // If we own the quality control, we can't relenquish it. We only loose
+    //         // quality control when another peer asks for it
+    //         if (qualityControlOwnershipCheckBox !== null) {
+    //             qualityControlOwnershipCheckBox.disabled = ownership;
+    //             qualityControlOwnershipCheckBox.checked = ownership;
+    //         }
+    //     } else if (view[0] === ToClientMessageType.Response) {
+    //         let response = new TextDecoder("utf-16").decode(data.slice(1));
+    //         for (let listener of responseEventListeners.values()) {
+    //             listener(response);
+    //         }
+    //     } else if (view[0] === ToClientMessageType.Command) {
+    //         let commandAsString = new TextDecoder("utf-16").decode(data.slice(1));
+    //         console.log(commandAsString);
+    //         let command = JSON.parse(commandAsString);
+    //         if (command.command === 'onScreenKeyboard') {
+    //             showOnScreenKeyboard(command);
+    //         }
+    //     } else if (view[0] === ToClientMessageType.FreezeFrame) {
+    //         processFreezeFrameMessage(view);
+    //     } else if (view[0] === ToClientMessageType.UnfreezeFrame) {
+    //         invalidateFreezeFrameOverlay();
+    //     } else if (view[0] === ToClientMessageType.VideoEncoderAvgQP) {
+    //         VideoEncoderQP = new TextDecoder("utf-16").decode(data.slice(1));
+    //         //console.log(`received VideoEncoderAvgQP ${VideoEncoderQP}`);
+    //     } else if (view[0] == ToClientMessageType.LatencyTest) {
+    //         let latencyTimingsAsString = new TextDecoder("utf-16").decode(data.slice(1));
+    //         console.log("Got latency timings from UE.")
+    //         console.log(latencyTimingsAsString);
+    //         let latencyTimingsFromUE = JSON.parse(latencyTimingsAsString);
+    //         if (webRtcPlayerObj) {
+    //             webRtcPlayerObj.latencyTestTimings.SetUETimings(latencyTimingsFromUE);
+    //         }
+    //     } else if (view[0] == ToClientMessageType.InitialSettings) {
+    //         let settingsString = new TextDecoder("utf-16").decode(data.slice(1));
+    //         let settingsJSON = JSON.parse(settingsString);
+
+    //         // reminder bitrates are sent in bps but displayed in kbps
+
+    //         if (settingsJSON.Encoder) {
+    //             document.getElementById('encoder-rate-control').value = settingsJSON.Encoder.RateControl;
+    //             document.getElementById('encoder-target-bitrate-text').value = settingsJSON.Encoder.TargetBitrate > 0 ? settingsJSON.Encoder.TargetBitrate / 1000 : settingsJSON.Encoder.TargetBitrate;
+    //             document.getElementById('encoder-max-bitrate-text').value = settingsJSON.Encoder.MaxBitrate > 0 ? settingsJSON.Encoder.MaxBitrate / 1000 : settingsJSON.Encoder.MaxBitrate;
+    //             document.getElementById('encoder-min-qp-text').value = settingsJSON.Encoder.MinQP;
+    //             document.getElementById('encoder-max-qp-text').value = settingsJSON.Encoder.MaxQP;
+    //             document.getElementById('encoder-filler-data-tgl').checked = settingsJSON.Encoder.FillerData == 1;
+    //             document.getElementById('encoder-multipass').value = settingsJSON.Encoder.MultiPass;
+    //         }
+    //         if (settingsJSON.WebRTC) {
+    //             document.getElementById('webrtc-degradation-pref').value = settingsJSON.WebRTC.DegradationPref;
+    //             document.getElementById("webrtc-max-fps-text").value = settingsJSON.WebRTC.MaxFPS;
+    //             document.getElementById("webrtc-min-bitrate-text").value = settingsJSON.WebRTC.MinBitrate / 1000;
+    //             document.getElementById("webrtc-max-bitrate-text").value = settingsJSON.WebRTC.MaxBitrate / 1000;
+    //             document.getElementById("webrtc-low-qp-text").value = settingsJSON.WebRTC.LowQP;
+    //             document.getElementById("webrtc-high-qp-text").value = settingsJSON.WebRTC.HighQP;
+    //         }
+    //     } else {
+    //         console.error(`unrecognized data received, packet ID ${view[0]}`);
+    //     }
+    // }; 
+
+    videoElement = webRtcPlayerObj.video;
+    store.commit(SET_WEBRTC_OBJ, {
+        [roomId]: webRtcPlayerObj
+    });
+    // On a touch device we will need special ways to show the on-screen keyboard.
+    if ('ontouchstart' in document.documentElement) {
+        createOnScreenKeyboardHelpers(htmlElement);
+    }
+
+    createWebRtcOffer();
+
+    return webRtcPlayerObj.video;
+}
+
+
+function setupWebRtcDataChannel(config)
+{
+    // if (!webRtcPlayerObj)
+    // {
+
+    //     console.warn('webrtcPlayer Obj == nullptr');
+    //     return;
+    // }
+    webRtcDataChannelObj = new RTCPeerConnection(null);
+     webRtcDataChannelObj.addEventListener('', () => {
+               
+            switch (webRtcDataChannelObj.iceConnectionState) {
+                 case 'checking':
+                    //this.emit('@connectionstatechange', 'connecting');
+                    
+                    break;
+                case 'connected':
+                case 'completed':
+                    //this.emit('@connectionstatechange', 'connected');
+                    break;
+                case 'failed':
+                //    this.emit('@connectionstatechange', 'failed');
+                    break;
+                case 'disconnected':
+                  //  this.emit('@connectionstatechange', 'disconnected');
+                    break;
+                case 'closed':
+                //    this.emit('@connectionstatechange', 'closed');
+                    break;
+            }
+        });
+         
+         
+          webRtcDataChannelObj.addEventListener('icegatheringstatechange', (state) => {
+               
+            switch (webRtcDataChannelObj.iceConnectionState) {
+                 case 'checking':
+                    //this.emit('@connectionstatechange', 'connecting');
+                    
+                    break;
+                case 'connected':
+                case 'completed':
+                    //this.emit('@connectionstatechange', 'connected');
+                    break;
+                case 'failed':
+                //    this.emit('@connectionstatechange', 'failed');
+                    break;
+                case 'disconnected':
+                  //  this.emit('@connectionstatechange', 'disconnected');
+                    break;
+                case 'closed':
+                //    this.emit('@connectionstatechange', 'closed');
+                    break;
+            }
+        });
+          webRtcDataChannelObj.addEventListener('onicecandidate', (e)=>{
+            if (ws && ws.readyState === WS_OPEN_STATE) {
+            ws.send(JSON.stringify({
+               /* type: 'iceCandidate',*/
+                /*candidate: candidate*/
+                msg_id: 208,
+                    data:  {
+                                rtc_type:1,
+                                type : 'candidate',
+                                label : e.sdpMLineIndex,
+                                id :  e.sdpMid,
+                                candidate :  e.candidate
+                           } 
+            }));
+        }
+          });
+  //  webRtcDataChannelObj = new webRtcDataChannel(config);
+  //   webRtcDataChannelObj.onWebRtcDataChannelOffer = function(webrtc_type, offerStr)
+    //{
+    //    if (ws && ws.readyState === WS_OPEN_STATE) 
+    //    {
+    //        var room_name = getQueryVariable('roomname');
+    //        var video_user_name = getQueryVariable('videousername');
+    //        var codecs = getQueryVariable('codec');;
+	//
+    //        console.log('datachannel cs --> offer : = ', offerStr);
+    //        let offersdp  = JSON.stringify({
+    //                msg_id: 208,
+    //                data:  {
+    //                            rtc_type: webrtc_type,
+    //                            offer : offerStr.sdp
+    //                       } 
+    //            });
+    //        console.log(`-> SS: offer:\n${offersdp}`);
+    //        
+    //        
+    //        
+    //         
+    //        ws.send(offersdp);
+    //    }
+    //};
+
+   // webRtcDataChannelObj.onWebRtcDataChannelOCandidate = function(webrtc_type, iceCandidate) {
+   //     if (ws && ws.readyState === WS_OPEN_STATE) {
+   //         console.log(`datachannel -> SS: iceCandidate\n${JSON.stringify(iceCandidate, undefined, 4)}`);
+   //         ws.send(JSON.stringify({
+   //            /* type: 'iceCandidate',*/
+   //             /*candidate: candidate*/
+   //             msg_id: 208,
+   //                 data:  {
+   //                             rtc_type:webrtc_type,
+   //                             type : 'candidate',
+   //                             label : iceCandidate.sdpMLineIndex,
+   //                             id :  iceCandidate.sdpMid,
+   //                             candidate :  iceCandidate.candidate
+   //                        } 
+   //         }));
+   //     }
+   // };
+
+   // webRtcDataChannelObj.onVideoDataChannelOInitialised = function() {
+   //     if (ws && ws.readyState === WS_OPEN_STATE) {
+   //         if (shouldShowPlayOverlay) {
+   //             showPlayOverlay();
+   //             resizePlayerStyle();
+   //         }
+   //         else {
+   //             resizePlayerStyle();
+   //             playVideoStream();
+   //         }
+   //     }
+   // };
+   //
+   // webRtcDataChannelObj.onDataChannelDataChannelOConnected = function() {
+   //     if (ws && ws.readyState === WS_OPEN_STATE)
+   //     {
+   //         showTextOverlay('WebRTC connected, waiting for video');
+   //
+   //         if (webRtcPlayerObj.video && webRtcPlayerObj.video.srcObject && webRtcPlayerObj.onVideoInitialised) {
+   //             webRtcPlayerObj.onVideoInitialised();
+   //         }
+   //     }
+   // };
+   // createWebRtcDataChannelOffer();
+}
+
+
+
+function onWebRtcAnswer(webRTCData) {
+    webRtcPlayerObj.receiveAnswer(webRTCData);
+
+    let printInterval = 5 * 60 * 1000; /*Print every 5 minutes*/
+    let nextPrintDuration = printInterval;
+
+    webRtcPlayerObj.onAggregatedStats = (aggregatedStats) => {
+        let numberFormat = new Intl.NumberFormat(window.navigator.language, {
+            maximumFractionDigits: 0
+        });
+        let timeFormat = new Intl.NumberFormat(window.navigator.language, {
+            maximumFractionDigits: 0,
+            minimumIntegerDigits: 2
+        });
+
+        // Calculate duration of run
+        let runTime = (aggregatedStats.timestamp - aggregatedStats.timestampStart) / 1000;
+        let timeValues = [];
+        let timeDurations = [60, 60];
+        for (let timeIndex = 0; timeIndex < timeDurations.length; timeIndex++) {
+            timeValues.push(runTime % timeDurations[timeIndex]);
+            runTime = runTime / timeDurations[timeIndex];
+        }
+        timeValues.push(runTime);
+
+        let runTimeSeconds = timeValues[0];
+        let runTimeMinutes = Math.floor(timeValues[1]);
+        let runTimeHours = Math.floor([timeValues[2]]);
+
+        receivedBytesMeasurement = 'B';
+        // eslint-disable-next-line no-prototype-builtins
+        receivedBytes = aggregatedStats.hasOwnProperty('bytesReceived') ? aggregatedStats.bytesReceived : 0;
+        let dataMeasurements = ['kB', 'MB', 'GB'];
+        for (let index = 0; index < dataMeasurements.length; index++) {
+            if (receivedBytes < 100 * 1000)
+                break;
+            receivedBytes = receivedBytes / 1000;
+            receivedBytesMeasurement = dataMeasurements[index];
+        }
+
+        const orangeQP = 26;
+        const redQP = 35;
+
+        if (print_stats) {
+            if (aggregatedStats.timestampStart) {
+                if ((aggregatedStats.timestamp - aggregatedStats.timestampStart) > nextPrintDuration) {
+                    if (ws && ws.readyState === WS_OPEN_STATE) {
+                        ws.send(JSON.stringify({
+                            type: 'stats',
+                            data: aggregatedStats
+                        }));
+                    }
+                    nextPrintDuration += printInterval;
+                }
+            }
+        }
+    };
+
+    webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/ );
+
+    webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function(timings) {
+
+        if (!timings.BrowserReceiptTimeMs) {
+            return;
+        }
+
+        let latencyExcludingDecode = timings.BrowserReceiptTimeMs - timings.TestStartTimeMs;
+        let uePixelStreamLatency = timings.UEPreEncodeTimeMs == 0 || timings.UEPreCaptureTimeMs == 0 ? "???" : timings.UEPostEncodeTimeMs - timings.UEPreCaptureTimeMs;
+        let captureLatency = timings.UEPostCaptureTimeMs - timings.UEPreCaptureTimeMs;
+        let encodeLatency = timings.UEPostEncodeTimeMs - timings.UEPreEncodeTimeMs;
+        let ueLatency = timings.UETransmissionTimeMs - timings.UEReceiptTimeMs;
+        let networkLatency = latencyExcludingDecode - ueLatency;
+        let browserSendLatency = latencyExcludingDecode - networkLatency - ueLatency;
+
+        //these ones depend on FrameDisplayDeltaTimeMs
+        let endToEndLatency = null;
+        let browserSideLatency = null;
+
+        if (timings.FrameDisplayDeltaTimeMs && timings.BrowserReceiptTimeMs) {
+            endToEndLatency = timings.FrameDisplayDeltaTimeMs + latencyExcludingDecode;
+            browserSideLatency = endToEndLatency - networkLatency - ueLatency;
+        }
+    }
+}
+
+
+
+function onWebRtcDataChannelAnswer(webRtcDataChannelData)
+{
+    if (webRtcDataChannelObj)
+    {
+            ///console.log(answer);
+            // var answerDesc = new RTCSessionDescription(webRtcDataChannelData);
+            webRtcDataChannelObj.setRemoteDescription(webRtcDataChannelData);
+
+  
+    } 
+}
+
+function onWebRtcIce(iceCandidate) {
+    if (webRtcPlayerObj)
+        webRtcPlayerObj.handleCandidateFromServer(iceCandidate);
+}
+
+function onWebRtcDataChannelIce(iceCandidate) 
+{
+    if (webRtcDataChannelObj)
+    {
+            
+            let candidate = new RTCIceCandidate(iceCandidate);
+            webRtcDataChannelObj.addIceCandidate(candidate);
+        // webRtcDataChannelObj.handleCandidateFromServer(iceCandidate);
+    }
+}
+
+let styleWidth;
+let styleHeight;
+let styleTop;
+let styleLeft;
+let styleCursor = 'default';
+let styleAdditional;
+
+const ControlSchemeType = {
+    // A mouse can lock inside the WebRTC player so the user can simply move the
+    // mouse to control the orientation of the camera. The user presses the
+    // Escape key to unlock the mouse.
+    LockedMouse: 0,
+
+    // A mouse can hover over the WebRTC player so the user needs to click and
+    // drag to control the orientation of the camera.
+    HoveringMouse: 1
+};
+
+let inputOptions = {
+    // The control scheme controls the behaviour of the mouse when it interacts
+    // with the WebRTC player.
+    controlScheme: ControlSchemeType.LockedMouse,
+
+    // Browser keys are those which are typically used by the browser UI. We
+    // usually want to suppress these to allow, for example, UE4 to show shader
+    // complexity with the F5 key without the web page refreshing.
+    suppressBrowserKeys: true,
+
+    // UE4 has a faketouches option which fakes a single finger touch when the
+    // user drags with their mouse. We may perform the reverse; a single finger
+    // touch may be converted into a mouse drag UE4 side. This allows a
+    // non-touch application to be controlled partially via a touch device.
+    fakeMouseWithTouches: false
+};
+
+
+// Fix for bug in iOS where windowsize is not correct at instance or orientation change
+// https://github.com/dimsemenov/PhotoSwipe/issues/1315
+let _orientationChangeTimeout;
+
+function onOrientationChange(event) {
+    clearTimeout(_orientationChangeTimeout);
+    _orientationChangeTimeout = setTimeout(function() {
+        // resizePlayerStyle();
+    }, 500);
+}
+
+// Must be kept in sync with PixelStreamingProtocol::EToUE4Msg C++ enum.
+const MessageType = {
+
+    /**********************************************************************/
+
+    /*
+     * Control Messages. Range = 0..49.
+     */
+    IFrameRequest: 0,
+    RequestQualityControl: 1,
+    MaxFpsRequest: 2,
+    AverageBitrateRequest: 3,
+    StartStreaming: 4,
+    StopStreaming: 5,
+    LatencyTest: 6,
+    RequestInitialSettings: 7,
+
+    /**********************************************************************/
+
+    /*
+     * Input Messages. Range = 50..89.
+     */
+
+    // Generic Input Messages. Range = 50..59.
+    UIInteraction: 50,
+    Command: 51,
+
+    // Keyboard Input Message. Range = 60..69.
+    KeyDown: 60,
+    KeyUp: 61,
+    KeyPress: 62,
+
+    // Mouse Input Messages. Range = 70..79.
+    MouseEnter: 70,
+    MouseLeave: 71,
+    MouseDown: 72,
+    MouseUp: 73,
+    MouseMove: 74,
+    MouseWheel: 75,
+
+    // Touch Input Messages. Range = 80..89.
+    TouchStart: 80,
+    TouchEnd: 81,
+    TouchMove: 82,
+
+    // Gamepad Input Messages. Range = 90..99
+    GamepadButtonPressed: 90,
+    GamepadButtonReleased: 91,
+    GamepadAnalog: 92
+
+    /**************************************************************************/
+};
+
+// A generic message has a type and a descriptor.
+function emitDescriptor(messageType, descriptor) {
+    // Convert the dscriptor object into a JSON string.
+    let descriptorAsString = JSON.stringify(descriptor);
+
+    // Add the UTF-16 JSON string to the array byte buffer, going two bytes at
+    // a time.
+    let data = new DataView(new ArrayBuffer(1 + 2 + 2 * descriptorAsString.length));
+    let byteIdx = 0;
+    data.setUint8(byteIdx, messageType);
+    byteIdx++;
+    data.setUint16(byteIdx, descriptorAsString.length, true);
+    byteIdx += 2;
+    for (let i = 0; i < descriptorAsString.length; i++) {
+        data.setUint16(byteIdx, descriptorAsString.charCodeAt(i), true);
+        byteIdx += 2;
+    }
+
+    //let str = data.getString(0, data.byteLength, "utf-8");
+   // console.log('str ===== ', str);
+   sendInputData(data.buffer);
+   // sendInputData({Type : });
+}
+
+// A UI interation will occur when the user presses a button powered by
+// JavaScript as opposed to pressing a button which is part of the pixel
+// streamed UI from the UE4 client.
+function emitUIInteraction(descriptor) {
+    emitDescriptor(MessageType.UIInteraction, descriptor);
+}
+
+// A build-in command can be sent to UE4 client. The commands are defined by a
+// JSON descriptor and will be executed automatically.
+// The currently supported commands are:
+//
+// 1. A command to run any console command:
+//    "{ ConsoleCommand: <string> }"
+//
+// 2. A command to change the resolution to the given width and height.
+//    "{ Resolution.Width: <value>, Resolution.Height: <value> } }"
+//
+function emitCommand(descriptor) {
+    emitDescriptor(MessageType.Command, descriptor);
+}
+
+function requestInitialSettings() {
+    sendInputData(new Uint8Array([MessageType.RequestInitialSettings]).buffer);
+}
+
+function requestQualityControl() {
+    sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
+}
+
+let playerElementClientRect = undefined;
+let normalizeAndQuantizeUnsigned = undefined;
+let normalizeAndQuantizeSigned = undefined;
+
+function setupNormalizeAndQuantize() {
+   
+    if (playerElement && videoElement.length > 0) {
+        let playerAspectRatio = playerElement.clientHeight / playerElement.clientWidth;
+        let videoAspectRatio = videoElement[0].videoHeight / videoElement[0].videoWidth;
+       // console.log('videoElement[0].videoHeight = ' + videoElement[0].videoHeight + ', videoElement[0].videoWidth = ' + videoElement[0].videoWidth);
+       // console.log('playerAspectRatio =', playerAspectRatio);
+      //  console.log('videoAspectRatio =', videoAspectRatio);
+        // Unsigned XY positions are the ratio (0.0..1.0) along a viewport axis,
+        // quantized into an uint16 (0..65536).
+        // Signed XY deltas are the ratio (-1.0..1.0) along a viewport axis,
+        // quantized into an int16 (-32767..32767).
+        // This allows the browser viewport and client viewport to have a different
+        // size.
+        // Hack: Currently we set an out-of-range position to an extreme (65535)
+        // as we can't yet accurately detect mouse enter and leave events
+        // precisely inside a video with an aspect ratio which causes mattes.
+        if (playerAspectRatio > videoAspectRatio) 
+        {
+          
+            let ratio = playerAspectRatio / videoAspectRatio;
+          //  console.log('ratio = ', ratio);
+            // Unsigned.
+            normalizeAndQuantizeUnsigned = (x, y) => {
+                let normalizedX = x / playerElement.clientWidth;
+                let normalizedY =  ratio * (y / playerElement.clientHeight - 0.5) + 0.5;
+               // console.log('normalizedX = ' + normalizedX + ', normalizedY = '+ normalizedY);
+                if (normalizedX < 0.0 || normalizedX > 1.0 || normalizedY < 0.0 || normalizedY > 1.0) 
+                {
+                    return {
+                        inRange: false,
+                        x: 65535,
+                        y: 65535
+                    };
+                }
+                else 
+                {
+                    return {
+                        inRange: true,
+                        x: normalizedX * 65536,
+                        y: normalizedY * 65536
+                    };
+                }
+            };
+            unquantizeAndDenormalizeUnsigned = (x, y) => {
+                let normalizedX = x / 65536;
+                let normalizedY = (y / 65536 - 0.5) / ratio + 0.5;
+                return {
+                    x: normalizedX * playerElement.clientWidth,
+                    y: normalizedY * playerElement.clientHeight
+                };
+            };
+            // Signed.
+            normalizeAndQuantizeSigned = (x, y) => {
+                let normalizedX = x / (0.5 * playerElement.clientWidth);
+                let normalizedY = (ratio * y) / (0.5 * playerElement.clientHeight);
+                return {
+                    x: normalizedX * 32767,
+                    y: normalizedY * 32767
+                };
+            };
+        }
+         else 
+        {
+         
+            let ratio = videoAspectRatio / playerAspectRatio;
+            // Unsigned.
+            normalizeAndQuantizeUnsigned = (x, y) => {
+                let normalizedX = ratio * (x / playerElement.clientWidth - 0.5) + 0.5;
+                let normalizedY = y / playerElement.clientHeight;
+                if (normalizedX < 0.0 || normalizedX > 1.0 || normalizedY < 0.0 || normalizedY > 1.0) {
+                    return {
+                        inRange: false,
+                        x: 65535,
+                        y: 65535
+                    };
+                } else {
+                    return {
+                        inRange: true,
+                        x: normalizedX * 65536,
+                        y: normalizedY * 65536
+                    };
+                }
+            };
+            // eslint-disable-next-line no-undef
+            unquantizeAndDenormalizeUnsigned = (x, y) => {
+                let normalizedX = (x / 65536 - 0.5) / ratio + 0.5;
+                let normalizedY = y / 65536;
+                return {
+                    x: normalizedX * playerElement.clientWidth,
+                    y: normalizedY * playerElement.clientHeight
+                };
+            };
+            // Signed.
+            normalizeAndQuantizeSigned = (x, y) => {
+                let normalizedX = (ratio * x) / (0.5 * playerElement.clientWidth);
+                let normalizedY = y / (0.5 * playerElement.clientHeight);
+                return {
+                    x: normalizedX * 32767,
+                    y: normalizedY * 32767
+                };
+            };
+        }
+    }
+}
+
+function createOnScreenKeyboardHelpers(htmlElement) {
+    if (document.getElementById('hiddenInput') === null) {
+        hiddenInput = document.createElement('input');
+        hiddenInput.id = 'hiddenInput';
+        hiddenInput.maxLength = 0;
+        htmlElement.appendChild(hiddenInput);
+    }
+
+    if (document.getElementById('editTextButton') === null) {
+        editTextButton = document.createElement('button');
+        editTextButton.id = 'editTextButton';
+        editTextButton.innerHTML = 'edit text';
+        htmlElement.appendChild(editTextButton);
+
+        // Hide the 'edit text' button.
+        editTextButton.classList.add('hiddenState');
+
+        editTextButton.addEventListener('click', function() {
+            // Show the on-screen keyboard.
+            hiddenInput.focus();
+        });
+    }
+}
+
+
+
+
+
+function onExpandOverlay_Click( /* e */ ) {
+    let overlay = document.getElementById('overlay');
+    overlay.classList.toggle("overlay-shown");
+}
+
+function start() {
+    // update "quality status" to "disconnected" state
+    connect();
+    updateKickButton(0);
+}
+
+function updateKickButton(playersCount) {
+    let kickButton = document.getElementById('kick-other-players-button');
+    if (kickButton)
+        kickButton.value = `Kick (${playersCount})`;
+}
+
+function connect() {
+    "use strict";
+
+    window.WebSocket = window.WebSocket || window.MozWebSocket;
+
+    if (!window.WebSocket) {
+        alert('Your browser doesn\'t support WebSocket');
+        return;
+    }
+
+	//window.location.href.replace('http://', 'ws://').replace('https://', 'wss://')
+	var rtc_ip = getQueryVariable('rtc_ip');
+	var rtc_port =  getQueryVariable('rtc_port');
+	var video_user_name	= getQueryVariable('videousername');
+	var ws_url = 'ws://'+rtc_ip+':'+rtc_port +'/?peerId='+video_user_name;
+
+    ws = new WebSocket(ws_url);
+
+    ws.onmessage = function(event) {
+       
+	    let msg = JSON.parse(event.data);
+		/*
+		  if (msg.type === 'config') {
+            onConfig(msg);
+        } else if (msg.type === 'playerCount') {
+            updateKickButton(msg.count - 1);
+        } else
+		*/
+   	   if (msg.msg_id === 1075) 
+	   // eslint-disable-next-line no-mixed-spaces-and-tabs
+	   {
+		  // console.log(msg.data.sdp);
+            onWebRtcAnswer(msg.data);
+        /*
+		} else if (msg.type === 'iceCandidate') {
+            onWebRtcIce(msg.candidate);
+		*/
+        }
+        else if (msg.msg_id === 211)
+        {
+			console.log('')
+        } 
+		else if (msg.msg_id === 500)
+		{
+			if (msg.data.type === 'answer')
+			{
+				var answerDesc = new RTCSessionDescription({type: 'answer', sdp: msg.data.sdp});
+                if (msg.data.rtc_type === 0)
+                {
+                    onWebRtcAnswer(answerDesc);
+                }
+				else
+                {
+                    onWebRtcDataChannelAnswer(answerDesc);
+                }
+			}
+			// eslint-disable-next-line no-prototype-builtins
+			else if (msg.data.hasOwnProperty('candidate'))
+			{
+				//let candidate = new RTCIceCandidate({type: 'candidate', sdp: msg.data.candidate});
+				//var candidate = new RTCIceCandidate({
+				//	sdpMLineIndex :0,
+				//	candidate: msg.data.candidate
+				//});
+				
+				if (msg.data.rtc_type === 0)
+                {
+                    onWebRtcIce({sdpMid:msg.data.id, sdpMLineIndex :msg.data.label, candidate:msg.data.candidate});
+                }
+                else 
+                {
+                    onWebRtcDataChannelIce({sdpMid:msg.data.id, sdpMLineIndex :msg.data.label, candidate:msg.data.candidate});
+                }
+			}
+		}
+        else 
+        {
+        }
+
+    };
+
+    ws.onerror = function(event) {
+        console.log(`WS error: ${JSON.stringify(event)}`);
+    };
+
+    ws.onclose = function(event) {
+        console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
+        ws = undefined;
+        is_reconnection = true;
+
+        // destroy `webRtcPlayerObj` if any
+        if (webRtcPlayerObj) {
+            playerElement.removeChild(webRtcPlayerObj.video);
+            webRtcPlayerObj.close();
+            webRtcPlayerObj = undefined;
+        }
+        if (webRtcDataChannelObj)
+        {
+            webRtcDataChannelObj.close();
+            webRtcDataChannelObj = null;
+        }
+       // if (webRtcDataChannelObj)
+        {
+         //   webRtcDataChannelObj.close();
+           // webRtcDataChannelObj = undefined;
+        }
+
+        showTextOverlay(`Disconnected: ${event.reason}`);
+        start()
+    };
+	ws.onopen = function(event)
+	{
+        var room_name = getQueryVariable('roomname');
+            var video_user_name = getQueryVariable('videousername');
+            let offersdp  = JSON.stringify({
+					msg_id: 202,
+					data:  {
+								user_name : video_user_name.toString(),
+								room_name : room_name.toString()
+						} 
+				});
+			
+            ws.send(offersdp);
+		onConfig('');
+	}
+}
+
+// Config data received from WebRTC sender via the Cirrus web server
+function onConfig(config) {
+    setupWebRtcPlayer(playerElement, config);
+    //setupWebRtcDataChannel(config);
+}
+
+export const  load = async (ele, id, obj, styleName) => {
+    roomId = id;
+    playerElement = ele;
+    params = obj;
+    // eslint-disable-next-line no-self-assign
+    className = styleName;
+    await start();
+    return videoElement;
+}