diff --git a/client/janus_gateway_win/usocket_test/peer_connection.cpp b/client/janus_gateway_win/usocket_test/peer_connection.cpp
index 9dcdc83..8bf35c6 100644
--- a/client/janus_gateway_win/usocket_test/peer_connection.cpp
+++ b/client/janus_gateway_win/usocket_test/peer_connection.cpp
@@ -11,9 +11,6 @@
 #include "modules/video_capture/video_capture_factory.h"
 
 
-
-
-
 std::string  IceGatheringStateName(webrtc::PeerConnectionInterface::IceGatheringState w) {
 	switch (w) {
 	case webrtc::PeerConnectionInterface::IceGatheringState::kIceGatheringNew:
diff --git a/client/rtmp_demo/yuvgl/depency/conanfile.txt b/client/rtmp_demo/yuvgl/depency/conanfile.txt
new file mode 100644
index 0000000..3134468
--- /dev/null
+++ b/client/rtmp_demo/yuvgl/depency/conanfile.txt
@@ -0,0 +1,4 @@
+[requires]
+ffmpeg/4.2.1
+[imports]
+.,* -> ./third/msvc32 @ folder=True, ignore_case=True, excludes=*.html *.jpeg
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/css/QssMainWindow.css b/client/webrtc_demo/qss/css/QssMainWindow.css
new file mode 100644
index 0000000..3a28dc5
--- /dev/null
+++ b/client/webrtc_demo/qss/css/QssMainWindow.css
@@ -0,0 +1,8 @@
+
+QFrame#window {
+    border: 1px solid black;
+    font-style: normal;
+    background: rgb(239,242,245);
+}
+
+
diff --git a/client/webrtc_demo/qss/css/QssTitleBar.css b/client/webrtc_demo/qss/css/QssTitleBar.css
new file mode 100644
index 0000000..90be03b
--- /dev/null
+++ b/client/webrtc_demo/qss/css/QssTitleBar.css
@@ -0,0 +1,65 @@
+QWidget#qssTitleBar{
+    color: white;
+    background: rgb(51,101,177);
+    border: 0px;
+    margin: 0px;
+
+}
+QWidget#qssTitleBar > QPushButton#titlebaricon{
+    background: rgb(51,101,177);
+    width: 25px;
+    height:25px;
+}
+
+QWidget#qssTitleBar > QPushButton#titlebarclosebtn{
+    image: url(":/qss/icon/btn_close_down.svg");
+    background:  rgb(51,101,177);
+    width: 25px;
+    height:25px;
+    margin-left: 1px;
+}
+QWidget#qssTitleBar >QPushButton#titlebarmaxbtn{
+    background:  rgb(51,101,177);
+    width: 25px;
+    height:25px;
+    margin-left: 1px;
+    image: url(":/qss/icon/btn_max_normal.svg");
+
+}
+QWidget#qssTitleBar >QPushButton#titlebarclosebtn:enabled:hover{
+    background: red;
+}
+QWidget#qssTitleBar >QPushButton#titlebarminbtn{
+    image: url(":/qss/icon/btn_mini_down.svg");
+    background:  rgb(51,101,177);
+    width: 25px;
+    height:25px;
+    margin-left: 1px;
+}
+QWidget#qssTitleBar >QPushButton#titlebarminbtn:enabled:hover{
+    background: rgb(187, 212, 238);
+}
+QWidget#qssTitleBar >QPushButton#titlebarrestorebtn{
+    image: url(":/qss/icon/btn_max_normal.svg");
+    background: rgb(187, 212, 238);
+    width: 25px;
+    height:25px;
+    margin-left: 1px;
+    margin-right: 2px;
+}
+QWidget#qssTitleBar >QPushButton#titlebarrestorebtn:enabled:hover{
+    background: rgb(187, 212, 238);
+}
+QWidget#qssTitleBar >QPushButton#btn_serial:!enabled {
+    background: rgb(180, 180, 180);
+    color: white;
+}
+QWidget#qssTitleBar >QPushButton#titlebarmaxbtn:enabled:hover{
+    background: rgb(100, 160, 220);
+}
+QWidget#qssTitleBar > QLabel#title{
+    color: white;
+    font-size: 13px;
+    font-family: monospace;
+}
+
diff --git a/client/webrtc_demo/qss/css/basic.css b/client/webrtc_demo/qss/css/basic.css
new file mode 100644
index 0000000..3299e21
--- /dev/null
+++ b/client/webrtc_demo/qss/css/basic.css
@@ -0,0 +1,149 @@
+
+QPushButton:enabled {
+    background: rgb(22,155,213);
+    color: white;
+    border-radius:3px;
+}
+
+QPushButton:!enabled {
+    background: white;
+    color: black;
+}
+
+QPushButton:enabled:hover {
+    background: rgb(100, 160, 220);
+}
+
+QPushButton:enabled:pressed {
+    background: rgb(120, 170, 220);
+}
+
+
+
+QLabel{
+
+}
+/**********下拉列表**********/
+QComboBox {
+    height: 25px;
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+    border-radius:3px;
+}
+
+QComboBox:enabled {
+        color: rgb(84, 84, 84);
+}
+
+QComboBox:!enabled {
+        color: rgb(80, 80, 80);
+}
+
+QComboBox:enabled:hover, QComboBox:enabled:focus {
+        color: rgb(51, 51, 51);
+}
+
+QComboBox::drop-down {
+        width: 20px;
+        border: none;
+        background: transparent;
+}
+
+QComboBox::drop-down:hover {
+        background: rgba(0, 0, 0, 30);
+}
+
+QComboBox::down-arrow {
+        image: url(:/qss/icon/combo_arrow.png);
+        max-height:30%;
+        max-width: 30%;
+}
+
+QComboBox::down-arrow:on {
+        top: 1px;
+}
+
+QComboBox QAbstractItemView {
+        border: 1px solid rgb(111, 156, 207);
+        background: white;
+        outline: none;
+}
+
+QComboBox QAbstractItemView::item {
+        height: 25px;
+        color: rgb(73, 73, 73);
+}
+
+QComboBox QAbstractItemView::item:selected {
+        background: rgb(232, 241, 250);
+        color: rgb(2, 65, 132);
+}
+
+
+
+QTabWidget{
+    margin-left:10;
+    background: rgb(239,242,245);
+
+}
+
+QTabWidget::pane {
+    border: none;
+
+}
+
+QTabWidget::tab-bar {
+    border: none;
+}
+
+QTabBar::tab {
+    border: none;
+    border-top-left-radius: 4px;
+    color: white;
+    background: rgb(239,242,245);
+    color: black;
+
+    height: 28px;
+    min-width: 85px;
+    margin-right: 5px;
+}
+
+QTabBar::tab:hover {
+    background: rgb(51,101,177);
+}
+
+QTabBar::tab:selected {
+    color: white;
+    background: rgb(51,101,177);
+}
+
+
+QTableView {
+    border: none;
+}
+QTableView::item {
+    padding-left: 5px;
+    padding-right: 5px;
+    background: white;
+}
+QTableView::item:selected {
+    border: 1px solid black;
+    color: rgb(65, 65, 65);
+
+}
+QTableView::item:selected:!active {
+    color: rgb(65, 65, 65);
+}
+QTableView::indicator {
+    border: 1px solid black;
+
+    width: 20px;
+    height: 20px;
+}
+
+
+QLineEdit {
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+    border-radius:3px;
+}
diff --git a/client/webrtc_demo/qss/css/corrugation_form.css b/client/webrtc_demo/qss/css/corrugation_form.css
new file mode 100644
index 0000000..b7e5d55
--- /dev/null
+++ b/client/webrtc_demo/qss/css/corrugation_form.css
@@ -0,0 +1,192 @@
+
+QPushButton:enabled {
+    background: rgb(22,155,213);
+    color: white;
+    border-radius:3px;
+}
+
+QPushButton:!enabled {
+    background: white;
+    color: black;
+}
+
+QPushButton:enabled:hover {
+    background: rgb(100, 160, 220);
+}
+
+QPushButton:enabled:pressed {
+    background: rgb(120, 170, 220);
+}
+
+
+QPushButton#pushButton:enabled {
+    background: white;
+    color: black;
+    border-radius:3px;
+}
+
+QPushButton#pushButton:!enabled {
+    background: rgb(180, 180, 180);
+    color: white;
+}
+
+QPushButton#pushButton:enabled:hover{
+    background: rgb(100, 160, 220);
+}
+
+QPushButton#pushButton:enabled:pressed{
+    background: rgb(120, 170, 220);
+}
+
+QLabel{
+    font-size: 13px;
+}
+/**********�����б�**********/
+QComboBox {
+    height: 25px;
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+    border-radius:3px;
+}
+
+QComboBox:enabled {
+        color: rgb(84, 84, 84);
+}
+
+QComboBox:!enabled {
+        color: rgb(80, 80, 80);
+}
+
+QComboBox:enabled:hover, QComboBox:enabled:focus {
+        color: rgb(51, 51, 51);
+}
+
+QComboBox::drop-down {
+        width: 20px;
+        border: none;
+        background: transparent;
+}
+
+QComboBox::drop-down:hover {
+        background: rgba(0, 0, 0, 30);
+}
+
+QComboBox::down-arrow {
+        image: url(:/qss/icon/combo_arrow.png);
+        max-height:30%;
+        max-width: 30%;
+}
+
+QComboBox::down-arrow:on {
+        top: 1px;
+}
+
+QComboBox QAbstractItemView {
+        border: 1px solid rgb(111, 156, 207);
+        background: white;
+        outline: none;
+}
+
+QComboBox QAbstractItemView::item {
+        height: 25px;
+        color: rgb(73, 73, 73);
+}
+
+QComboBox QAbstractItemView::item:selected {
+        background: rgb(232, 241, 250);
+        color: rgb(2, 65, 132);
+}
+
+
+
+QTabWidget{
+    margin-left:10;
+    background: rgb(239,242,245);
+
+}
+
+QTabWidget::pane {
+    border: none;
+
+}
+
+QTabWidget::tab-bar {
+    border: none;
+}
+
+QTabBar::tab {
+    border: none;
+    border-top-left-radius: 4px;
+    color: white;
+    background: rgb(239,242,245);
+    color: black;
+
+    height: 28px;
+    min-width: 85px;
+    margin-right: 5px;
+}
+
+QTabBar::tab:hover {
+    background: rgb(51,101,177);
+}
+
+QTabBar::tab:selected {
+    color: white;
+    background: rgb(51,101,177);
+}
+
+
+QTableView {
+        border: 1px solid grey;
+}
+QTableView::item {
+        padding-left: 5px;
+        padding-right: 5px;
+        background: white;
+}
+QTableView::item:selected {
+    border: 1px solid black;
+    background: rgba(255, 255, 255, 30);
+    color: black;
+}
+QTableView::item:selected:!active {
+        color: rgb(65, 65, 65);
+}
+QTableView::indicator {
+    border: 1px solid black;
+
+    width: 20px;
+    height: 20px;
+}
+
+
+QTableView::indicator:enabled:unchecked {
+
+        image: url(:/White/checkBox);
+}
+QTableView::indicator:enabled:unchecked:hover {
+        image: url(:/White/checkBoxHover);
+}
+QTableView::indicator:enabled:unchecked:pressed {
+        image: url(:/White/checkBoxPressed);
+}
+QTableView::indicator:enabled:checked {
+        image: url(:/White/checkBoxChecked);
+}
+QTableView::indicator:enabled:checked:hover {
+        image: url(:/White/checkBoxCheckedHover);
+}
+QTableView::indicator:enabled:checked:pressed {
+        image: url(:/White/checkBoxCheckedPressed);
+}
+QTableView::indicator:enabled:indeterminate {
+        image: url(:/White/checkBoxIndeterminate);
+}
+QTableView::indicator:enabled:indeterminate:hover {
+        image: url(:/White/checkBoxIndeterminateHover);
+}
+QTableView::indicator:enabled:indeterminate:pressed {
+        image: url(:/White/checkBoxIndeterminatePressed);
+}
+
+
diff --git a/client/webrtc_demo/qss/css/dark.css b/client/webrtc_demo/qss/css/dark.css
new file mode 100644
index 0000000..c7021da
--- /dev/null
+++ b/client/webrtc_demo/qss/css/dark.css
@@ -0,0 +1,866 @@
+/*
+Colour scheme used:
+- White (text): #eff0f1
+- Dark black (main bg): #272a2d
+- Lighter dark black (menu bar): #373b3f
+- Dark blue: #18465d
+- Gray: #76797C
+- Red (accents): #db1c49
+
+Useful reference on QSS:
+ - http://doc.qt.io/qt-5/stylesheet-reference.html#alternate-background-color-prop
+
+Be sure to change all image urls to the appropriate folder on your system.
+*/
+
+
+QPushButton#btn_serial:enabled {
+        border-image: url(:/qss/icon/btn_serial.png);
+        background: rgb(120, 170, 220);
+        color: white;
+        margin-left: 10;
+        margin-top:5;
+}
+QPushButton#btn_serial:!enabled {
+        background: rgb(180, 180, 180);
+        color: white;
+}
+
+QPushButton#btn_serial:enabled:hover{
+        background: rgb(100, 160, 220);
+}
+QPushButton#btn_serial:enabled:pressed{
+        background: rgb(0, 78, 161);
+}
+
+
+QPushButton#btn_process:enabled {
+        background: rgb(120, 170, 220);
+        color: white;
+        margin-left: 5;
+        margin-top:5;
+}
+QPushButton#btn_process:!enabled {
+        background: rgb(180, 180, 180);
+        color: white;
+}
+QPushButton#btn_process:enabled:hover{
+        background: rgb(100, 160, 220);
+}
+QPushButton#btn_process:enabled:pressed{
+        background: rgb(0, 78, 161);
+}
+
+/*================================================================
+QWidget
+================================================================*/
+QWidget {
+        color: #eff0f1;
+        background-color: #272a2d;
+        selection-background-color: #db1c49;
+        selection-color: #eff0f1;
+}
+
+QWidget::item:hover {
+        background-color: #18465d;
+        color: #eff0f1;
+}
+
+QWidget::item:selected {
+        background-color: #18465d;
+}
+
+/*================================================================
+QCheckBox/QGroupBox
+================================================================*/
+QCheckBox {
+        spacing: 5px;
+        outline: none;
+        color: #eff0f1;
+        margin-bottom: 2px;
+}
+
+QCheckBox:disabled {
+        color: #76797C;
+}
+
+QCheckBox::indicator,
+QGroupBox::indicator {
+        width: 18px;
+        height: 18px;
+}
+
+QGroupBox::indicator {
+        margin-left: 2px;
+}
+
+QCheckBox::indicator:unchecked {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_unchecked.png);
+}
+
+QCheckBox::indicator:unchecked:hover,
+QCheckBox::indicator:unchecked:focus,
+QCheckBox::indicator:unchecked:pressed,
+QGroupBox::indicator:unchecked:hover,
+QGroupBox::indicator:unchecked:focus,
+QGroupBox::indicator:unchecked:pressed {
+        border: none;
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_unchecked_focus.png);
+}
+
+QCheckBox::indicator:checked {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_checked.png);
+}
+
+QCheckBox::indicator:checked:hover,
+QCheckBox::indicator:checked:focus,
+QCheckBox::indicator:checked:pressed,
+QGroupBox::indicator:checked:hover,
+QGroupBox::indicator:checked:focus,
+QGroupBox::indicator:checked:pressed {
+        border: none;
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_checked_focus.png);
+}
+
+QCheckBox::indicator:indeterminate {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_indeterminate.png);
+}
+
+QCheckBox::indicator:indeterminate:focus,
+QCheckBox::indicator:indeterminate:hover,
+QCheckBox::indicator:indeterminate:pressed {
+        image: url(C:/Users/franc/AppData/Roaming/TeXstudio/rc/checkbox_indeterminate_focus.png);
+}
+
+QCheckBox::indicator:checked:disabled,
+QGroupBox::indicator:checked:disabled {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_checked_disabled.png);
+}
+
+QCheckBox::indicator:unchecked:disabled,
+QGroupBox::indicator:unchecked:disabled {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_unchecked_disabled.png);
+}
+
+/*================================================================
+QMenuBar - e.g. Main toolbar (file/edit/idefix etc.)
+================================================================*/
+QMenuBar {
+        color: #eff0f1;
+        background-color: #373b3f;
+}
+
+QMenuBar::item {
+        background: transparent;
+}
+
+/*================================================================
+QMenu
+================================================================*/
+QMenu {
+        border: 1px solid #76797C;
+        color: #eff0f1;
+        margin: 2px;
+}
+
+QMenu::separator {
+        height: 2px;
+        background: #76797C;
+        margin-left: 5px;
+        margin-right: 5px;
+}
+
+/*================================================================
+QToolbar
+================================================================*/
+QToolBar {
+        border: 1px solid #393838;
+        background: 1px solid #272a2d;
+        font-weight: bold;
+}
+
+QToolBar::handle:horizontal {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/Hmovetoolbar.png);
+}
+
+QToolBar::handle:vertical {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/Vmovetoolbar.png);
+}
+
+QToolBar::separator:horizontal {
+        width: 2px;
+        margin: 3px 10px;
+        background-color: #76797C;
+}
+
+QToolBar::separator:vertical {
+        height: 2px;
+        margin: 10px 3px;
+        background-color: #76797C;
+}
+
+/*================================================================
+QScrollBar - e.g. Scrollbar in internal PDFviewer, editor window etc.
+================================================================*/
+QScrollBar:horizontal {
+        height: 25px;
+        margin: 3px 27px 3px 27px;
+        border: 1px transparent #2A2929;
+        border-radius: 4px;
+        background-color: #000000;
+}
+
+QScrollBar::handle:horizontal {
+        background-color: #76797C;
+        min-width: 15px;
+        border-radius: 4px;
+}
+
+QScrollBar::add-line:horizontal {
+        margin: 0px 3px 0px 3px;
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/right_arrow_disabled.png);
+        width: 20px;
+        height: 20px;
+        subcontrol-position: right;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal {
+        margin: 0px 3px 0px 3px;
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/left_arrow_disabled.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: left;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:horizontal:hover,
+QScrollBar::add-line:horizontal:on {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/right_arrow.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: right;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:horizontal:hover,
+QScrollBar::sub-line:horizontal:on {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/left_arrow.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: left;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:horizontal,
+QScrollBar::down-arrow:horizontal {
+        background: none;
+}
+
+QScrollBar::add-page:horizontal,
+QScrollBar::sub-page:horizontal {
+        background: none;
+}
+
+QScrollBar:vertical {
+        background-color: #000000;
+        width: 25px;
+        margin: 27px 3px 27px 3px;
+        border: 1px solid #2A2929;
+        border-radius: 4px;
+}
+
+QScrollBar::handle:vertical {
+        background-color: #76797C;
+        min-height: 15px;
+        border-radius: 4px;
+}
+
+QScrollBar::sub-line:vertical {
+        margin: 3px 0px 3px 0px;
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/up_arrow_disabled.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: top;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical {
+        margin: 3px 0px 3px 0px;
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/down_arrow_disabled.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: bottom;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::sub-line:vertical:hover,
+QScrollBar::sub-line:vertical:on {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/up_arrow.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: top;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::add-line:vertical:hover,
+QScrollBar::add-line:vertical:on {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/down_arrow.png);
+        height: 20px;
+        width: 20px;
+        subcontrol-position: bottom;
+        subcontrol-origin: margin;
+}
+
+QScrollBar::up-arrow:vertical,
+QScrollBar::down-arrow:vertical {
+        background: none;
+}
+
+QScrollBar::add-page:vertical,
+QScrollBar::sub-page:vertical {
+        background: none;
+}
+
+/*================================================================
+QTabBar - e.g. File tabs (top), Bottom panel tabs (top), Autocompleter window tabs (bottom)
+================================================================*/
+QTabBar {
+        qproperty-drawBase: 0; /* important */
+        background-color: transparent;
+}
+
+/* <FIX> Workaround for QTabBars created from docked QDockWidgets which don't draw the border if not set and reseted as follows: */
+QTabBar {
+        border-top: 1px transparent #76797C;  /* set color for all QTabBars */
+}
+QDialog QTabBar {
+        border-color: transparent; /* set color for QTabBars inside Preferences dialog */
+}
+/* </FIX> */
+
+QTabBar::close-button {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close.png);
+        background: transparent;
+        margin-top: 6px;
+        margin-bottom: 6px;
+}
+
+QTabBar::close-button:hover {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close-hover.png);
+        background: transparent;
+        margin-top: 6px;
+        margin-bottom: 6px;
+}
+
+QTabBar::close-button:pressed {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close-pressed.png);
+        background: transparent;
+        margin-top: 6px;
+        margin-bottom: 6px;
+}
+
+/* TOP TABS */
+
+QTabBar::tab:top {
+        color: #eff0f1;
+        border: 1px solid #76797C;
+        border-bottom: 1px transparent black;
+        background-color: #31363b;
+        padding: 5px;
+        min-width: 50px;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+}
+
+QTabBar::tab:top:selected {
+        color: #eff0f1;
+        background-color: #54575B;
+        border: 2px solid #76797C;
+        border-bottom: 3px solid #3daee9;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+}
+
+QTabBar::tab:top:!selected:hover {
+        background-color: #18465d;
+}
+
+/* BOTTOM TABS */
+
+QTabBar::tab:bottom {
+        color: #eff0f1;
+        border: 1px solid #76797C;
+        border-top: 1px transparent black;
+        background-color: #31363b;
+        padding: 5px;
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        min-width: 50px;
+}
+
+QTabBar::tab:bottom:selected {
+        color: #eff0f1;
+        background-color: #54575B;
+        border: 2px solid #76797C;
+        border-top: 3px solid #3daee9;
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+}
+
+QTabBar::tab:bottom:!selected:hover {
+        background-color: #18465d;
+}
+
+/*================================================================
+QDockWidget - e.g. "Search" header in internal PDF viewer
+================================================================*/
+QDockWidget {
+        titlebar-close-icon: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+        titlebar-normal-icon: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+}
+
+QDockWidget::title {
+        background: #373b3f;
+        color: transparent;
+        border: 1px transparent;
+        text-align: left;
+}
+
+QDockWidget::close-button,
+QDockWidget::float-button {
+        border: transparent;
+        padding: 0px;
+        icon-size: 25px;
+        background: transparent;
+}
+
+QDockWidget::float-button {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/undock.png);
+        subcontrol-position: right center;
+        left: -50px;
+}
+
+QDockWidget::close-button {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close.png);
+        subcontrol-position: right center;
+        left: -10px;
+}
+
+QDockWidget::float-button:hover {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/undock-pressed.png);
+        subcontrol-position: right center;
+        left: -50px;
+}
+
+QDockWidget::close-button:hover {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close-pressed.png);
+        subcontrol-position: right center;
+        left: -10px;
+}
+
+QDockWidget::close-button:pressed {
+        padding: 2px -2px -2px 2px;
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/close-pressed.png);
+}
+
+QDockWidget::float-button:pressed {
+        padding: 2px -2px -2px 2px;
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/undock-pressed.png);
+}
+
+QDockWidget QListView {
+        outline: 0;
+        background: #272a2d;
+        alternate-background-color: #373b3f;
+        color: #eff0f1;
+}
+
+/*================================================================
+QTreeView, QListView
+================================================================*/
+QTreeView,
+QListView {
+        border: 1px solid #76797C;
+        background-color: #232629;
+}
+
+QTreeView:branch:selected,
+QTreeView:branch:hover {
+        background: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+}
+
+QTreeView::branch:has-siblings:!adjoins-item {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+}
+
+QTreeView::branch:has-siblings:adjoins-item {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+}
+
+QTreeView::branch:!has-children:!has-siblings:adjoins-item {
+        border-image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/transparent.png);
+}
+
+QTreeView::branch:has-children:!has-siblings:closed,
+QTreeView::branch:closed:has-children:has-siblings {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/branch_closed.png);
+}
+
+QTreeView::branch:open:has-children:!has-siblings,
+QTreeView::branch:open:has-children:has-siblings {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/branch_open.png);
+}
+
+QTreeView::branch:has-children:!has-siblings:closed:hover,
+QTreeView::branch:closed:has-children:has-siblings:hover {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/branch_closed-on.png);
+}
+
+QTreeView::branch:open:has-children:!has-siblings:hover,
+QTreeView::branch:open:has-children:has-siblings:hover {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/branch_open-on.png);
+}
+
+QListView::item:!selected:hover,
+QTreeView::item:!selected:hover {
+        background: #18465d;
+        outline: 0;
+        color: #eff0f1;
+}
+
+QListView::item:selected:hover,
+QTreeView::item:selected:hover {
+        background: #287399;
+        color: #eff0f1;
+}
+
+QTreeView::indicator:checked,
+QListView::indicator:checked {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_checked.png);
+}
+
+QTreeView::indicator:unchecked,
+QListView::indicator:unchecked {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_unchecked.png);
+}
+
+QTreeView::indicator:checked:hover,
+QTreeView::indicator:checked:focus,
+QTreeView::indicator:checked:pressed,
+QListView::indicator:checked:hover,
+QListView::indicator:checked:focus,
+QListView::indicator:checked:pressed {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_checked_focus.png);
+}
+
+QTreeView::indicator:unchecked:hover,
+QTreeView::indicator:unchecked:focus,
+QTreeView::indicator:unchecked:pressed,
+QListView::indicator:unchecked:hover,
+QListView::indicator:unchecked:focus,
+QListView::indicator:unchecked:pressed {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/checkbox_unchecked_focus.png);
+}
+
+/*================================================================
+QPushButton
+================================================================*/
+QPushButton {
+        color: #eff0f1;
+        background-color: #31363b;
+        border-width: 1px;
+        border-color: #76797C;
+        border-style: solid;
+        padding: 5px;
+        border-radius: 2px;
+        outline: none;
+}
+
+QPushButton:disabled {
+        background-color: #31363b;
+        border-width: 1px;
+        border-color: #454545;
+        border-style: solid;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-radius: 2px;
+        color: #454545;
+}
+
+QPushButton:hover,
+QPushButton:focus {
+        background-color: #18465d;
+        color: #ffffff;
+}
+
+QPushButton:pressed {
+        background-color: #18465d;
+        padding-top: -15px;
+        padding-bottom: -17px;
+}
+
+QPushButton:checked {
+        background-color: #76797C;
+        border-color: #6A6969;
+}
+
+/*================================================================
+QToolButton - e.g. Reset pushbutton in GUI scaling, toolbar buttons
+================================================================*/
+QToolButton {
+        text-align: center;
+}
+
+/*================================================================
+QComboBox
+================================================================*/
+QComboBox {
+        selection-background-color: #db1c49;
+        border: 1px solid #76797C;
+        border-radius: 2px;
+        padding: 5px;
+        min-width: 75px;
+}
+
+QComboBox:hover,
+QPushButton:hover,
+QAbstractSpinBox:hover,
+QLineEdit:hover,
+QTextEdit:hover,
+QPlainTextEdit:hover,
+QAbstractView:hover,
+QTreeView:hover {
+        border: 1px solid #3daee9;
+        color: #eff0f1;
+}
+
+QComboBox:on {
+        padding-top: 3px;
+        padding-left: 4px;
+        selection-background-color: #4a4a4a;
+}
+
+QComboBox QAbstractItemView {
+        background-color: #232629;
+        border-radius: 2px;
+        border: 1px solid #76797C;
+        selection-background-color: #18465d;
+}
+
+QComboBox::drop-down {
+        subcontrol-origin: padding;
+        subcontrol-position: top right;
+        width: 35px;
+        border-left-width: 0px;
+        border-left-color: darkgray;
+        border-left-style: solid;
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+}
+
+QComboBox::down-arrow {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/down_arrow_disabled.png);
+}
+
+QComboBox::down-arrow:on,
+QComboBox::down-arrow:hover,
+QComboBox::down-arrow:focus {
+        image: url(C:/Users/user/AppData/Roaming/TeXstudio/rc/down_arrow.png);
+}
+
+/*================================================================
+QLineEdit - e.g. Search textbox in internal pdf viewer
+================================================================*/
+QLineEdit {
+        selection-background-color: #db1c49;
+        border: 1px solid #76797C;
+}
+
+/*================================================================
+QHeaderView
+================================================================*/
+QHeaderView {
+        background-color: #31363b;
+        border: 1px transparent;
+        border-radius: 0px;
+        margin: 0px;
+        padding: 0px;
+}
+
+QHeaderView::section {
+        background-color: #31363b;
+        color: #eff0f1;
+        padding: 5px;
+        border: 1px solid #76797C;
+        border-radius: 0px;
+        text-align: center;
+}
+
+QHeaderView::section::vertical::first,
+QHeaderView::section::vertical::only-one {
+        border-top: 1px solid #76797C;
+}
+
+QHeaderView::section::vertical {
+        border-top: transparent;
+}
+
+QHeaderView::section::horizontal::first,
+QHeaderView::section::horizontal::only-one {
+        border-left: 1px solid #76797C;
+}
+
+QHeaderView::section::horizontal {
+        border-left: transparent;
+}
+
+QHeaderView::section:checked {
+        color: #ffffff;
+        background-color: #31363B;
+}
+
+/*================================================================
+QTableWidget
+================================================================*/
+QTableWidget {
+        background-color: #373b3f; /*#232629;*/
+        gridline-color: yellow; /*#31363b;*/
+}
+
+QTableWidget::item {
+        outline-style: none;
+        color: #eff0f1;
+        background: #31363b;
+        border: none;
+        border-bottom: 1px solid #31363b;
+}
+
+/*================================================================
+QTableView - e.g. configMenu()->Syntax highlighting table
+================================================================*/
+QTableView {
+        border: 1px solid #76797C;
+        gridline-color: #31363b;
+        background-color: #232629;
+}
+
+QTableView,
+QHeaderView {
+        border-radius: 0px;
+}
+
+QTableView::item:hover {
+        background: #18465d;
+}
+
+QTableView::item:pressed,
+QListView::item:pressed,
+QTreeView::item:pressed {
+        background: #18465d;
+        color: #eff0f1;
+}
+
+QTableView::item:selected:active,
+QTreeView::item:selected:active,
+QListView::item:selected:active {
+        background: #287399;
+        color: #eff0f1;
+}
+
+QTableCornerButton::section {
+        background-color: #31363b;
+        border: 1px transparent #76797C;
+        border-radius: 0px;
+}
+
+/*================================================================
+QDialog - e.g. config menu, About TXS window, Wizards
+================================================================*/
+QDialog {
+        background-color: #373b3f;
+}
+
+QDialog QCheckBox,
+QDialog QLabel {
+        background-color: transparent;
+}
+
+QDialog QToolButton { /*Same as QPushButton*/
+        color: #eff0f1;
+        background-color: #31363b;
+        border-width: 1px;
+        border-color: #76797C;
+        border-style: solid;
+        padding: 5px;
+        border-radius: 2px;
+        outline: none;
+}
+
+QDialog QToolButton:hover,
+QDialog QToolButton:focus { /*Same as QPushButton*/
+        background-color: #18465d;
+        color: #ffffff;
+}
+
+QDialog QToolButton:pressed { /*Same as QPushButton*/
+        background-color: #18465d;
+        padding-top: -15px;
+        padding-bottom: -17px;
+}
+
+/* <FIX> Specific to table in "configMenu->Syntax highlighting" (hopefully) */
+
+QDialog QTableWidget::item,
+QDialog QTableView::item:hover { /* Turn off hover colour for cells -- it's distracting */
+        background-color: #31363b;
+}
+
+/* </FIX> */
+
+/*================================================================
+QSlider - e.g. GUI scaling settings
+================================================================*/
+QSlider,
+QSlider:active,
+QSlider:!active {
+        border: none;
+        background-color: transparent;
+}
+
+QSlider::groove:horizontal {
+        height: 12px;
+}
+
+QSlider::groove:vertical {
+        width: 12px;
+}
+
+QSlider::handle:horizontal,
+QSlider::handle:vertical {
+        background-color: #db1c49;
+        border: 1px solid #db1c49;
+        width: 10px;
+        height: 15px;
+        border-radius: 8px;
+}
+
+QSlider::handle:horizontal:hover,
+QSlider::handle:vertical:hover,
+QSlider::handle:horizontal:pressed,
+QSlider::handle:vertical:pressed {
+        border: 1px solid #A21538;
+        background-color: #A21538;
+}
+
+/*================================================================
+QToolTip - e.g. popup upon hovering on filename tabs
+================================================================*/
+QToolTip {
+    border: 1px solid #272a2d;
+    background-color: #373b3f;
+    color: white;
+    padding: 0px;                /*remove padding, for fix combobox tooltip.*/
+}
diff --git a/client/webrtc_demo/qss/css/mainwindow.css b/client/webrtc_demo/qss/css/mainwindow.css
new file mode 100644
index 0000000..cf55514
--- /dev/null
+++ b/client/webrtc_demo/qss/css/mainwindow.css
@@ -0,0 +1,45 @@
+
+QTabBar{
+    background: rgb(22,155,213);
+}
+QTabBar::tab {
+    border: none;
+    border-top-left-radius: 4px;
+    color: white;
+    background: rgb(239,242,245);
+    color: black;
+
+    height: 28px;
+    min-width: 85px;
+    margin-right: 5px;
+}
+
+QTabBar::tab:hover {
+    background: rgb(51,101,177);
+}
+
+QTabBar::tab:selected {
+    color: white;
+    background: rgb(51,101,177);
+}
+
+
+
+QPushButton:enabled {
+    background: rgb(22,155,213);
+    color: white;
+    border-radius:3px;
+}
+
+QPushButton:!enabled {
+    background: white;
+    color: black;
+}
+
+QPushButton:enabled:hover {
+    background: rgb(100, 160, 220);
+}
+
+QPushButton:enabled:pressed {
+    background: rgb(120, 170, 220);
+}
diff --git a/client/webrtc_demo/qss/css/qss.css b/client/webrtc_demo/qss/css/qss.css
new file mode 100644
index 0000000..49d6aee
--- /dev/null
+++ b/client/webrtc_demo/qss/css/qss.css
@@ -0,0 +1,779 @@
+QDialog{
+    border: 1px solid rgb(rgb(0, 78, 161));
+    padding: 5px;
+    background: rgb(232, 241, 252);
+}
+
+QMainWindow{
+    border: none;
+    background: rgb(255, 255, 255);
+}
+
+QMainWindow::title{
+    text-align: right; /* align the text to the left */
+    background:  rgb(7,71,166);
+    padding-left: 5px;
+}
+
+QWidget {
+/*    font-size:  10px;*/
+}
+
+
+QDockWidget{
+    background: rgb(187, 212, 238);
+}
+/*QFrame#window{
+    background: rgba(244,245,247,100);
+}*/
+
+QWidget#remoteWidget {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border: 1px solid rgb(111, 156, 207);
+    border-left: none;
+    background: transparent;
+}
+
+StyledWidget {
+    qproperty-normalColor: rgb(65, 65, 65);
+    qproperty-disableColor: rgb(180, 180, 180);
+    qproperty-highlightColor: rgb(0, 160, 230);
+    qproperty-errorColor: red;
+}
+
+QProgressIndicator {
+    qproperty-color: rgb(2, 65, 132);
+}
+
+/**********提示**********/
+QToolTip{
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+    color: rgb(51, 51, 51);
+}
+
+/**********菜单栏**********/
+QMenuBar {
+/*        background: rgb(7,71,166);*/
+    border: 1px solid rgb(111, 156, 207);
+    border-left: none;
+    border-right: none;
+}
+QMenuBar::item {
+    border: 1px solid transparent;
+    padding: 5px 10px 5px 10px;
+    height : 30px;
+    background: "white";
+    text-aligin: center;
+    font-size: 20px;;
+}
+QMenuBar::item:enabled {
+    font-size: 20px;;
+    background: rgb(198, 224, 252);
+}
+QMenuBar::item:!enabled {
+    font-size: 20px;;
+    background: rgb(198, 224, 252);
+}
+QMenuBar::item:enabled:selected {
+    font-size: 20px;;
+    background: rgb(198, 224, 252);
+}
+
+/**********菜单**********/
+QMenu {
+    border: 1px solid rgb(2, 65, 132);
+    background: rgb(232, 241, 250);
+    height : 50px;
+
+}
+
+QssMessageBox#messagebox{
+    background: rgb(0, 0, 250);
+}
+
+QMenu::item {
+    height: 22px;
+    padding: 0px 25px 0px 20px;
+}
+
+QMenu::item:enabled {
+    color: rgb(84, 84, 84);
+}
+
+QMenu::item:!enabled {
+    color: rgb(155, 155, 155);
+}
+
+QMenu::item:enabled:selected {
+    color: rgb(2, 65, 132);
+    background: rgba(255, 255, 255, 200);
+}
+
+QMenu::separator {
+    height: 1px;
+    background: rgb(111, 156, 207);
+}
+QMenu::indicator {
+    width: 13px;
+    height: 13px;
+}
+
+QMenu::icon {
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+/**********状态栏**********/
+QStatusBar {
+    background: rgb(111, 156, 207);
+    border: 1px solid rgb(111, 156, 207);
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+
+QStatusBar::item {
+    border: none;
+    border-right: 1px solid rgb(111, 156, 207);
+}
+
+/**********分组框**********/
+QGroupBox {
+    border: 1px solid rgb(111, 156, 207);
+    border-radius: 4px;
+    margin-top: 10px;
+}
+
+QGroupBox::title {
+    color: rgb(56, 99, 154);
+    top: -12px;
+    left: 10px;
+}
+
+QTabWidget{
+    margin-left:10;
+}
+/**********页签项**********/
+QTabWidget::pane {
+    border: none;
+    border-top: 3px solid rgb(0, 78, 161);
+    background: rgb(187, 212, 238);
+}
+
+QTabWidget::tab-bar {
+    border: none;
+}
+
+QTabBar::tab {
+    border: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    color: white;
+    background: rgb(120, 170, 220);
+    height: 28px;
+    min-width: 85px;
+    margin-right: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+QTabBar::tab:hover {
+    background: rgb(0, 78, 161);
+}
+
+QTabBar::tab:selected {
+    color: white;
+    background: rgb(0, 78, 161);
+}
+
+QTabWidget#tabWidget::pane {
+    border: 1px solid rgb(111, 156, 207);
+    background: rgb(232, 241, 252);
+    margin-top: -1px;
+}
+
+QTabBar#tabBar::tab {
+    border: 1px solid rgb(111, 156, 207);
+    border-bottom: none;
+    color: rgb(70, 71, 73);
+    background: transparent;
+}
+QTabBar#tabBar::tab:hover {
+    color: rgb(2, 65, 132);
+}
+QTabBar#tabBar::tab:selected {
+    color: rgb(2, 65, 132);
+    background: rgb(232, 241, 252);
+}
+
+/**********表头**********/
+QHeaderView{
+    border: 1px solid black;
+    border-bottom: 3px solid rgb(0, 78, 161);
+    background: transparent;
+    min-height: 30px;
+}
+QHeaderView::section:horizontal {
+    border: none;
+    color: rgb(2, 65, 132);
+    background: transparent;
+    padding-left: 5px;
+}
+QHeaderView::section:horizontal:hover {
+    color: white;
+    background: rgb(0, 78, 161);
+}
+QHeaderView::section:horizontal:pressed {
+    color: white;
+    background: rgb(6, 94, 187);
+}
+QHeaderView::up-arrow {
+    width: 13px;
+    height: 11px;
+    padding-right: 5px;
+    image: url(:/White/topArrow);
+    subcontrol-position: center right;
+}
+QHeaderView::up-arrow:hover, QHeaderView::up-arrow:pressed {
+    image: url(:/White/topArrowHover);
+}
+QHeaderView::down-arrow {
+    width: 13px;
+    height: 11px;
+    padding-right: 5px;
+    image: url(:/White/bottomArrow);
+    subcontrol-position: center right;
+}
+QHeaderView::down-arrow:hover, QHeaderView::down-arrow:pressed {
+    image: url(:/White/bottomArrowHover);
+}
+/**********TreeView**********/
+QTreeView::item {
+    height: 25px;
+    border-right: 0.5px solid grey;
+    background: transparent;
+}
+QTreeView::item:hover {
+    background : #DBDBDB;
+}
+
+QTreeView::item:selected {
+    background : grey;
+}
+/**********表格**********/
+QTableView {
+    border: 1px solid grey;
+    background: rgb(224, 238, 255);
+    gridline-color: rgb(111, 156, 207);
+}
+QTableView::item {
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 1px solid black;
+    background: white;
+}
+QTableView::item:selected {
+    border: 1px solid black;
+
+    background: rgba(255, 255, 255, 30);
+}
+QTableView::item:selected:!active {
+        color: rgb(65, 65, 65);
+}
+QTableView::indicator {
+    border: 1px solid black;
+
+    width: 20px;
+        height: 20px;
+}
+
+
+QTableView::indicator:enabled:unchecked {
+
+    image: url(:/White/checkBox);
+}
+QTableView::indicator:enabled:unchecked:hover {
+    image: url(:/White/checkBoxHover);
+}
+QTableView::indicator:enabled:unchecked:pressed {
+    image: url(:/White/checkBoxPressed);
+}
+QTableView::indicator:enabled:checked {
+    image: url(:/White/checkBoxChecked);
+}
+QTableView::indicator:enabled:checked:hover {
+    image: url(:/White/checkBoxCheckedHover);
+}
+QTableView::indicator:enabled:checked:pressed {
+    image: url(:/White/checkBoxCheckedPressed);
+}
+QTableView::indicator:enabled:indeterminate {
+    image: url(:/White/checkBoxIndeterminate);
+}
+QTableView::indicator:enabled:indeterminate:hover {
+    image: url(:/White/checkBoxIndeterminateHover);
+}
+QTableView::indicator:enabled:indeterminate:pressed {
+    image: url(:/White/checkBoxIndeterminatePressed);
+}
+
+/**********滚动条-水平**********/
+QScrollBar:horizontal {
+    height: 20px;
+    background: transparent;
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+QScrollBar::handle:horizontal {
+    height: 20px;
+    min-width: 30px;
+    background: rgb(170, 200, 230);
+    margin-left: 15px;
+    margin-right: 15px;
+}
+QScrollBar::handle:horizontal:hover {
+    background: rgb(165, 195, 225);
+}
+QScrollBar::sub-line:horizontal {
+    width: 15px;
+    background: transparent;
+    image: url(:/White/arrowLeft);
+    subcontrol-position: left;
+}
+QScrollBar::add-line:horizontal {
+    width: 15px;
+    background: transparent;
+    image: url(:/White/arrowRight);
+    subcontrol-position: right;
+}
+QScrollBar::sub-line:horizontal:hover {
+    background: rgb(170, 200, 230);
+}
+QScrollBar::add-line:horizontal:hover {
+    background: rgb(170, 200, 230);
+}
+QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
+    background: transparent;
+}
+
+/**********滚动条-垂直**********/
+QScrollBar:vertical {
+    width: 20px;
+    background: transparent;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+QScrollBar::handle:vertical {
+    width: 20px;
+    min-height: 30px;
+    background: rgb(170, 200, 230);
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+QScrollBar::handle:vertical:hover {
+    background: rgb(165, 195, 225);
+}
+QScrollBar::sub-line:vertical {
+    height: 15px;
+    background: transparent;
+    image: url(:/White/topArrow);
+    subcontrol-position: top;
+}
+QScrollBar::add-line:vertical {
+    height: 15px;
+    background: transparent;
+    image: url(:/White/bottomArrow);
+    subcontrol-position: bottom;
+}
+QScrollBar::sub-line:vertical:hover {
+    background: rgb(170, 200, 230);
+}
+QScrollBar::add-line:vertical:hover {
+    background: rgb(170, 200, 230);
+}
+QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
+    background: transparent;
+}
+
+QScrollBar#verticalScrollBar:vertical {
+    margin-top: 30px;
+}
+
+/**********下拉列表**********/
+QComboBox {
+    height: 25px;
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+}
+QComboBox:enabled {
+    color: rgb(84, 84, 84);
+}
+QComboBox:!enabled {
+    color: rgb(80, 80, 80);
+}
+QComboBox:enabled:hover, QComboBox:enabled:focus {
+    color: rgb(51, 51, 51);
+}
+QComboBox::drop-down {
+    width: 20px;
+    border: none;
+    background: transparent;
+}
+QComboBox::drop-down:hover {
+    background: rgba(0, 0, 0, 30);
+}
+QComboBox::down-arrow {
+    image: url(:/qss/icon/combo_arrow.png);
+    max-height:100%;
+    max-width:100%;
+}
+QComboBox::down-arrow:on {
+    top: 1px;
+}
+QComboBox QAbstractItemView {
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+    outline: none;
+}
+QComboBox QAbstractItemView::item {
+    height: 25px;
+    color: rgb(73, 73, 73);
+}
+QComboBox QAbstractItemView::item:selected {
+    background: rgb(232, 241, 250);
+    color: rgb(2, 65, 132);
+}
+
+/**********进度条**********/
+QProgressBar{
+    border: black;
+    text-align: center;
+    color: white;
+    background: rgb(173, 202, 232);
+}
+QProgressBar::chunk {
+    background: rgb(16, 135, 209);
+}
+
+QProgressBar {
+    border: rgb(173, 202, 232);
+    text-align: center;
+    color: light;
+    background-color: transparent;
+    background-image: rgb(173, 202, 232);
+    background-repeat: repeat-x;
+}
+QProgressBar::chunk {
+    border: none;
+    background-color:rgb(173, 202, 232);
+    background-repeat: repeat-x;
+}
+
+/**********复选框**********/
+QCheckBox{
+    spacing: 5px;
+}
+QCheckBox:enabled:checked{
+    color: rgb(2, 65, 132);
+}
+QCheckBox:enabled:!checked{
+    color: rgb(70, 71, 73);
+}
+QCheckBox:enabled:hover{
+    color: rgb(0, 78, 161);
+}
+QCheckBox:!enabled{
+    color: rgb(80, 80, 80);
+}
+QCheckBox::indicator {
+    width: 20px;
+    height: 20px;
+}
+QCheckBox::indicator:unchecked {
+    image: url(:/qss/icon/checkbox.png);
+}
+QCheckBox::indicator:unchecked:hover {
+    image: url(:/qss/icon/checkbox_h.png);
+}
+QCheckBox::indicator:unchecked:pressed {
+    image: url(:/qss/icon/checkbox_p.png);
+}
+QCheckBox::indicator:checked {
+    image: url(:/qss/icon/check_box_p.png);
+}
+QCheckBox::indicator:checked:hover {
+    image: url(:/qss/icon/check_box_p.png);
+}
+QCheckBox::indicator:checked:pressed {
+    image: url(:/qss/icon/check_box_p.png);
+}
+QCheckBox::indicator:indeterminate {
+    image: url(:/qss/icon/check_box_p.png);
+}
+QCheckBox::indicator:indeterminate:hover {
+    image: url(:/qss/icon/check_box_p.png);
+}
+QCheckBox::indicator:indeterminate:pressed {
+    image: url(:/qss/icon/check_box_p.png);
+}
+
+/**********单选框**********/
+QRadioButton{
+    spacing: 5px;
+}
+QRadioButton:enabled:checked{
+    color: rgb(2, 65, 132);
+}
+QRadioButton:enabled:!checked{
+    color: rgb(70, 71, 73);
+}
+QRadioButton:enabled:hover{
+    color: rgb(0, 78, 161);
+}
+QRadioButton:!enabled{
+    color: rgb(80, 80, 80);
+}
+QRadioButton::indicator {
+    width: 20px;
+    height: 20px;
+}
+QRadioButton::indicator:unchecked {
+    image: url(:/White/radioButton);
+}
+QRadioButton::indicator:unchecked:hover {
+    image: url(:/White/radioButtonHover);
+}
+QRadioButton::indicator:unchecked:pressed {
+    image: url(:/White/radioButtonPressed);
+}
+QRadioButton::indicator:checked {
+    image: url(:/White/radioButtonChecked);
+}
+QRadioButton::indicator:checked:hover {
+    image: url(:/White/radioButtonCheckedHover);
+}
+QRadioButton::indicator:checked:pressed {
+    image: url(:/White/radioButtonCheckedPressed);
+}
+
+/**********输入框**********/
+QLineEdit {
+    border-radius: 4px;
+    height: 25px;
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+}
+QLineEdit:enabled {
+    color: rgb(84, 84, 84);
+}
+QLineEdit:enabled:hover, QLineEdit:enabled:focus {
+    color: rgb(51, 51, 51);
+}
+QLineEdit:!enabled {
+    color: rgb(80, 80, 80);
+}
+
+/**********文本编辑框**********/
+QTextEdit {
+    border: 1px solid rgb(111, 156, 207);
+    color: rgb(70, 71, 73);
+    background: rgb(187, 212, 238);
+}
+
+/**********滚动区域**********/
+QScrollArea {
+    border: 1px solid rgb(111, 156, 207);
+    background: rgb(187, 212, 238);
+}
+
+/**********滚动区域**********/
+QWidget#transparentWidget {
+    background: transparent;
+}
+
+/**********微调器**********/
+QSpinBox {
+    border-radius: 4px;
+    height: 24px;
+    min-width: 40px;
+    border: 1px solid rgb(111, 156, 207);
+    background: white;
+}
+QSpinBox:enabled {
+    color: rgb(60, 60, 60);
+}
+QSpinBox:enabled:hover, QSpinBox:enabled:focus {
+    color: rgb(51, 51, 51);
+}
+QSpinBox:!enabled {
+    color: rgb(210, 210, 210);
+    background: transparent;
+}
+QSpinBox::up-button {
+    border-left: 1px solid rgb(111, 156, 207);
+    width: 18px;
+    height: 12px;
+    border-top-right-radius: 4px;
+    image: url(:/White/upButton);
+}
+QSpinBox::up-button:!enabled {
+    background: transparent;
+}
+QSpinBox::up-button:enabled:hover {
+    background: rgb(255, 255, 255, 30);
+}
+QSpinBox::down-button {
+    border-left: 1px solid rgb(111, 156, 207);
+    width: 18px;
+    height: 12px;
+    border-bottom-right-radius: 4px;
+    image: url(:/White/downButton);
+}
+QSpinBox::down-button:!enabled {
+    background: transparent;
+}
+QSpinBox::down-button:hover {
+        background: rgb(255, 255, 255, 30);
+}
+QLabel#label_3{
+    font-size: 20px;
+    background-color: rgb(255, 255, 255, 30);
+    color : light;
+}
+
+QDockWidget *{
+}
+/**********标签**********/
+QLabel#grayLabel {
+        color: rgb(70, 71, 73);
+}
+
+QLabel#highlightLabel {
+        color: rgb(2, 65, 132);
+}
+
+QLabel#redLabel {
+        color: red;
+}
+
+QLabel#grayYaHeiLabel {
+        color: rgb(175, 175, 175);
+        font-size: 15px;
+}
+
+QLabel#blueLabel {
+        color: rgb(0, 160, 230);
+}
+
+QLabel#listLabel {
+        color: rgb(51, 51, 51);
+}
+
+QLabel#lineBlueLabel {
+    background: rgb(0, 78, 161);
+}
+
+QLabel#graySeperateLabel {
+    background: rgb(200, 220, 230);
+}
+
+QLabel#seperateLabel {
+    background: rgb(112, 153, 194);
+}
+
+QLabel#radiusBlueLabel {
+    border-radius: 15px;
+    color: white;
+    font-size: 18px;
+    background: rgb(0, 78, 161);
+}
+
+QLabel#skinLabel[colorProperty="normal"] {
+    color: rgb(56, 99, 154);
+}
+QLabel#skinLabel[colorProperty="highlight"] {
+    color: rgb(0, 160, 230);
+}
+
+QLabel#informationLabel {
+    qproperty-pixmap: url(:/White/information);
+}
+
+QLabel#errorLabel {
+    qproperty-pixmap: url(:/White/error);
+}
+
+QLabel#successLabel {
+    qproperty-pixmap: url(:/White/success);
+}
+
+QLabel#questionLabel {
+    qproperty-pixmap: url(:/White/question);
+}
+
+QLabel#warningLabel {
+    qproperty-pixmap: url(:/White/warning);
+}
+
+QLabel#groupLabel {
+    color: rgb(56, 99, 154);
+    border: 1px solid rgb(111, 156, 207);
+    font-size: 15px;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+}
+
+/**********按钮**********/
+QToolButton#nsccButton {
+    border: none;
+    color: rgb(2, 65, 132);
+    background: transparent;
+    padding: 10px;
+    qproperty-icon: url(:/White/nscc);
+    qproperty-iconSize: 32px 32px;
+    qproperty-toolButtonStyle: ToolButtonTextUnderIcon;
+}
+QToolButton#nsccButton:hover {
+    background: rgb(187, 212, 238);
+}
+
+QToolButton#transferButton {
+    border: none;
+    color: rgb(2, 65, 132);
+    background: transparent;
+    padding: 10px;
+    qproperty-icon: url(:/White/transfer);
+    qproperty-iconSize: 32px 32px;
+    qproperty-toolButtonStyle: ToolButtonTextUnderIcon;
+}
+
+QToolButton#transferButton:hover {
+    background: rgb(187, 212, 238);
+}
+
+/**********按钮**********/
+QPushButton{
+    border: none;  /*去除边框*/
+    font-size: 15px;
+}
+
+QPushButton:enabled {
+    background: rgb(0, 78, 161);
+    color: white;
+}
+
+QPushButton:!enabled {
+    background: rgb(180, 180, 180);
+    color: white;
+}
+
+QPushButton:enabled:hover{
+    background: rgb(100, 160, 220);
+}
+
+QPushButton:enabled:pressed{
+    background: rgb(120, 170, 220);
+}
diff --git a/client/webrtc_demo/qss/css/save_data_form.css b/client/webrtc_demo/qss/css/save_data_form.css
new file mode 100644
index 0000000..d5ce63b
--- /dev/null
+++ b/client/webrtc_demo/qss/css/save_data_form.css
@@ -0,0 +1,6 @@
+QWidget#save_data_form
+{
+    background: "white";
+    border:1px solid black;
+}
+
diff --git a/client/webrtc_demo/qss/css/vibration_comparison_form.css b/client/webrtc_demo/qss/css/vibration_comparison_form.css
new file mode 100644
index 0000000..4a6cbd6
--- /dev/null
+++ b/client/webrtc_demo/qss/css/vibration_comparison_form.css
@@ -0,0 +1,46 @@
+QWidget#vibration_comparison_form
+{
+    border: 1px solid black;
+}
+QWidget#vibration_comparison_form QLabel#label
+{
+}
+QWidget#vibration_comparison_form QComboBox#comboBox
+{
+    border-radius:3px;
+}
+QWidget#vibration_comparison_form QComboBox#comboBox_2
+{
+    border-radius:3px;
+}
+QWidget#vibration_comparison_form QLabel#label_2
+{
+}
+QWidget#vibration_comparison_form QComboBox#comboBox_3
+{
+    border-radius:3px;
+
+}
+QWidget#vibration_comparison_form QComboBox#comboBox_4
+{
+    border-radius:3px;
+}
+QWidget#vibration_comparison_form  QPushButton#pushButton
+{
+    width: 24px;
+}
+
+QWidget#vibration_comparison_form QPushButton#pushButton_2
+{
+    width: 24px;
+
+}
+QWidget#vibration_comparison_form QLabel#label_3
+{
+}
+QWidget#vibration_comparison_form QRadioButton#radioButton
+{
+}
+QWidget#vibration_comparison_form QGraphicsView#graphicsView
+{
+}
diff --git a/client/webrtc_demo/qss/css/white.css b/client/webrtc_demo/qss/css/white.css
new file mode 100644
index 0000000..847d018
--- /dev/null
+++ b/client/webrtc_demo/qss/css/white.css
@@ -0,0 +1,303 @@
+/* * The MIT License (MIT) * * Copyright : http://blog.csdn.net/liang19890820 * * Author : 一去丶二三里 * * Date : 2016/07/22 * * Description : 白色靓丽 * */
+
+/**********子界面背景**********/
+QWidget#customWidget { background: rgb(173, 202, 232); }
+
+/**********子界面中央背景**********/
+QWidget#centerWidget { background: rgb(232, 241, 252); }
+
+/**********主界面样式**********/
+QWidget#mainWindow { border: 1px solid rgb(111, 156, 207); background: rgb(232, 241, 252); }
+
+QWidget#messageWidget { background: rgba(173, 202, 232, 50%); }
+
+QWidget#loadingWidget { border: none; border-radius: 5px; background: rgb(187, 212, 238); }
+
+QWidget#remoteWidget { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid rgb(111, 156, 207); border-left: none; background: transparent; }
+
+StyledWidget { qproperty-normalColor: rgb(65, 65, 65); qproperty-disableColor: rgb(180, 180, 180); qproperty-highlightColor: rgb(0, 160, 230); qproperty-errorColor: red; }
+
+QProgressIndicator { qproperty-color: rgb(2, 65, 132); }
+
+/**********提示**********/
+QToolTip{ border: 1px solid rgb(111, 156, 207); background: white; color: rgb(51, 51, 51); }
+
+/**********菜单栏**********/
+QMenuBar { background: rgb(187, 212, 238); border: 1px solid rgb(111, 156, 207); border-left: none; border-right: none; }
+QMenuBar::item { border: 1px solid transparent; padding: 5px 10px 5px 10px; background: transparent; }
+QMenuBar::item:enabled { color: rgb(2, 65, 132); }
+QMenuBar::item:!enabled { color: rgb(155, 155, 155); }
+QMenuBar::item:enabled:selected { border-top-color: rgb(111, 156, 207); border-bottom-color: rgb(111, 156, 207); background: rgb(198, 224, 252); }
+
+/**********菜单**********/
+QMenu { border: 1px solid rgb(111, 156, 207); background: rgb(232, 241, 250); }
+QMenu::item { height: 22px; padding: 0px 25px 0px 20px; }
+QMenu::item:enabled { color: rgb(84, 84, 84); }
+QMenu::item:!enabled { color: rgb(155, 155, 155); }
+QMenu::item:enabled:selected { color: rgb(2, 65, 132); background: rgba(255, 255, 255, 200); }
+QMenu::separator { height: 1px; background: rgb(111, 156, 207); }
+QMenu::indicator { width: 13px; height: 13px; }
+QMenu::icon { padding-left: 2px; padding-right: 2px; }
+
+/**********状态栏**********/
+QStatusBar { background: rgb(187, 212, 238); border: 1px solid rgb(111, 156, 207); border-left: none; border-right: none; border-bottom: none; }
+QStatusBar::item { border: none; border-right: 1px solid rgb(111, 156, 207); }
+
+/**********分组框**********/
+QGroupBox { font-size: 15px; border: 1px solid rgb(111, 156, 207); border-radius: 4px; margin-top: 10px; }
+QGroupBox::title { color: rgb(56, 99, 154); top: -12px; left: 10px; }
+
+/**********页签项**********/
+QTabWidget::pane { border: none; border-top: 3px solid rgb(0, 78, 161); background: rgb(187, 212, 238); }
+QTabWidget::tab-bar { border: none; }
+QTabBar::tab { border: none; border-top-left-radius: 4px; border-top-right-radius: 4px; color: white; background: rgb(120, 170, 220); height: 28px; min-width: 85px; margin-right: 5px; padding-left: 5px; padding-right: 5px; }
+QTabBar::tab:hover { background: rgb(0, 78, 161); }
+QTabBar::tab:selected { color: white; background: rgb(0, 78, 161); }
+
+QTabWidget#tabWidget::pane { border: 1px solid rgb(111, 156, 207); background: rgb(232, 241, 252); margin-top: -1px; }
+
+QTabBar#tabBar::tab { border: 1px solid rgb(111, 156, 207); border-bottom: none; color: rgb(70, 71, 73); background: transparent; }
+QTabBar#tabBar::tab:hover { color: rgb(2, 65, 132); }
+QTabBar#tabBar::tab:selected { color: rgb(2, 65, 132); background: rgb(232, 241, 252); }
+
+/**********表头**********/
+QHeaderView{ border: none; border-bottom: 3px solid rgb(0, 78, 161); background: transparent; min-height: 30px; }
+QHeaderView::section:horizontal { border: none; color: rgb(2, 65, 132); background: transparent; padding-left: 5px; }
+QHeaderView::section:horizontal:hover { color: white; background: rgb(0, 78, 161); }
+QHeaderView::section:horizontal:pressed { color: white; background: rgb(6, 94, 187); }
+QHeaderView::up-arrow { width: 13px; height: 11px; padding-right: 5px; image: url(:/White/topArrow); subcontrol-position: center right; }
+QHeaderView::up-arrow:hover, QHeaderView::up-arrow:pressed { image: url(:/White/topArrowHover); }
+QHeaderView::down-arrow { width: 13px; height: 11px; padding-right: 5px; image: url(:/White/bottomArrow); subcontrol-position: center right; }
+QHeaderView::down-arrow:hover, QHeaderView::down-arrow:pressed { image: url(:/White/bottomArrowHover); }
+
+/**********表格**********/
+QTableView { border: 1px solid rgb(111, 156, 207); background: rgb(224, 238, 255); gridline-color: rgb(111, 156, 207); }
+QTableView::item { padding-left: 5px; padding-right: 5px; border: none; background: white; border-right: 1px solid rgb(111, 156, 207); border-bottom: 1px solid rgb(111, 156, 207); }
+QTableView::item:selected { background: rgba(255, 255, 255, 100); }
+QTableView::item:selected:!active { color: rgb(65, 65, 65); }
+QTableView::indicator { width: 20px; height: 20px; }
+QTableView::indicator:enabled:unchecked { image: url(:/White/checkBox); }
+QTableView::indicator:enabled:unchecked:hover { image: url(:/White/checkBoxHover); }
+QTableView::indicator:enabled:unchecked:pressed { image: url(:/White/checkBoxPressed); }
+QTableView::indicator:enabled:checked { image: url(:/White/checkBoxChecked); }
+QTableView::indicator:enabled:checked:hover { image: url(:/White/checkBoxCheckedHover); }
+QTableView::indicator:enabled:checked:pressed { image: url(:/White/checkBoxCheckedPressed); }
+QTableView::indicator:enabled:indeterminate { image: url(:/White/checkBoxIndeterminate); }
+QTableView::indicator:enabled:indeterminate:hover { image: url(:/White/checkBoxIndeterminateHover); }
+QTableView::indicator:enabled:indeterminate:pressed { image: url(:/White/checkBoxIndeterminatePressed); }
+
+/**********滚动条-水平**********/
+QScrollBar:horizontal { height: 20px; background: transparent; margin-top: 3px; margin-bottom: 3px; }
+QScrollBar::handle:horizontal { height: 20px; min-width: 30px; background: rgb(170, 200, 230); margin-left: 15px; margin-right: 15px; }
+QScrollBar::handle:horizontal:hover { background: rgb(165, 195, 225); }
+QScrollBar::sub-line:horizontal { width: 15px; background: transparent; image: url(:/White/arrowLeft); subcontrol-position: left; }
+QScrollBar::add-line:horizontal { width: 15px; background: transparent; image: url(:/White/arrowRight); subcontrol-position: right; }
+QScrollBar::sub-line:horizontal:hover { background: rgb(170, 200, 230); }
+QScrollBar::add-line:horizontal:hover { background: rgb(170, 200, 230); }
+QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal { background: transparent; }
+
+/**********滚动条-垂直**********/
+QScrollBar:vertical { width: 20px; background: transparent; margin-left: 3px; margin-right: 3px; }
+QScrollBar::handle:vertical { width: 20px; min-height: 30px; background: rgb(170, 200, 230); margin-top: 15px; margin-bottom: 15px; }
+QScrollBar::handle:vertical:hover { background: rgb(165, 195, 225); }
+QScrollBar::sub-line:vertical { height: 15px; background: transparent; image: url(:/White/topArrow); subcontrol-position: top; }
+QScrollBar::add-line:vertical { height: 15px; background: transparent; image: url(:/White/bottomArrow); subcontrol-position: bottom; }
+QScrollBar::sub-line:vertical:hover { background: rgb(170, 200, 230); }
+QScrollBar::add-line:vertical:hover { background: rgb(170, 200, 230); }
+QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: transparent; }
+
+QScrollBar#verticalScrollBar:vertical { margin-top: 30px; }
+
+/**********下拉列表**********/
+QComboBox { height: 25px; border-radius: 4px; border: 1px solid rgb(111, 156, 207); background: white; }
+QComboBox:enabled { color: rgb(84, 84, 84); }
+QComboBox:!enabled { color: rgb(80, 80, 80); }
+QComboBox:enabled:hover, QComboBox:enabled:focus { color: rgb(51, 51, 51); }
+QComboBox::drop-down { width: 20px; border: none; background: transparent; }
+QComboBox::drop-down:hover { background: rgba(255, 255, 255, 30); }
+QComboBox::down-arrow { image: url(:/White/arrowBottom); }
+QComboBox::down-arrow:on { /**top: 1px;**/ }
+QComboBox QAbstractItemView { border: 1px solid rgb(111, 156, 207); background: white; outline: none; }
+QComboBox QAbstractItemView::item { height: 25px; color: rgb(73, 73, 73); }
+QComboBox QAbstractItemView::item:selected { background: rgb(232, 241, 250); color: rgb(2, 65, 132); }
+
+/**********进度条**********/
+QProgressBar{ border: none; text-align: center; color: white; background: rgb(173, 202, 232); }
+QProgressBar::chunk { background: rgb(16, 135, 209); }
+
+QProgressBar#progressBar { border: none; text-align: center; color: white; background-color: transparent; background-image: url(":/White/progressBar"); background-repeat: repeat-x; }
+QProgressBar#progressBar::chunk { border: none; background-color: transparent; background-image: url(":/White/progressBarChunk"); background-repeat: repeat-x; }
+
+/**********复选框**********/
+QCheckBox{ spacing: 5px; }
+QCheckBox:enabled:checked{ color: rgb(2, 65, 132); }
+QCheckBox:enabled:!checked{ color: rgb(70, 71, 73); }
+QCheckBox:enabled:hover{ color: rgb(0, 78, 161); }
+QCheckBox:!enabled{ color: rgb(80, 80, 80); }
+QCheckBox::indicator { width: 20px; height: 20px; }
+QCheckBox::indicator:unchecked { image: url(:/White/checkBox); }
+QCheckBox::indicator:unchecked:hover { image: url(:/White/checkBoxHover); }
+QCheckBox::indicator:unchecked:pressed { image: url(:/White/checkBoxPressed); }
+QCheckBox::indicator:checked { image: url(:/White/checkBoxChecked); }
+QCheckBox::indicator:checked:hover { image: url(:/White/checkBoxCheckedHover); }
+QCheckBox::indicator:checked:pressed { image: url(:/White/checkBoxCheckedPressed); }
+QCheckBox::indicator:indeterminate { image: url(:/White/checkBoxIndeterminate); }
+QCheckBox::indicator:indeterminate:hover { image: url(:/White/checkBoxIndeterminateHover); }
+QCheckBox::indicator:indeterminate:pressed { image: url(:/White/checkBoxIndeterminatePressed); }
+
+/**********单选框**********/
+QRadioButton{ spacing: 5px; }
+QRadioButton:enabled:checked{ color: rgb(2, 65, 132); }
+QRadioButton:enabled:!checked{ color: rgb(70, 71, 73); }
+QRadioButton:enabled:hover{ color: rgb(0, 78, 161); }
+QRadioButton:!enabled{ color: rgb(80, 80, 80); }
+QRadioButton::indicator { width: 20px; height: 20px; }
+QRadioButton::indicator:unchecked { image: url(:/White/radioButton); }
+QRadioButton::indicator:unchecked:hover { image: url(:/White/radioButtonHover); }
+QRadioButton::indicator:unchecked:pressed { image: url(:/White/radioButtonPressed); }
+QRadioButton::indicator:checked { image: url(:/White/radioButtonChecked); }
+QRadioButton::indicator:checked:hover { image: url(:/White/radioButtonCheckedHover); }
+QRadioButton::indicator:checked:pressed { image: url(:/White/radioButtonCheckedPressed); }
+
+/**********输入框**********/
+QLineEdit { border-radius: 4px; height: 25px; border: 1px solid rgb(111, 156, 207); background: white; }
+QLineEdit:enabled { color: rgb(84, 84, 84); }
+QLineEdit:enabled:hover, QLineEdit:enabled:focus { color: rgb(51, 51, 51); }
+QLineEdit:!enabled { color: rgb(80, 80, 80); }
+
+/**********文本编辑框**********/
+QTextEdit { border: 1px solid rgb(111, 156, 207); color: rgb(70, 71, 73); background: rgb(187, 212, 238); }
+
+/**********滚动区域**********/
+QScrollArea { border: 1px solid rgb(111, 156, 207); background: rgb(187, 212, 238); }
+
+/**********滚动区域**********/
+QWidget#transparentWidget { background: transparent; }
+
+/**********微调器**********/
+QSpinBox { border-radius: 4px; height: 24px; min-width: 40px; border: 1px solid rgb(111, 156, 207); background: white; }
+QSpinBox:enabled { color: rgb(60, 60, 60); }
+QSpinBox:enabled:hover, QSpinBox:enabled:focus { color: rgb(51, 51, 51); }
+QSpinBox:!enabled { color: rgb(210, 210, 210); background: transparent; }
+QSpinBox::up-button { border-left: 1px solid rgb(111, 156, 207); width: 18px; height: 12px; border-top-right-radius: 4px; image: url(:/White/upButton); }
+QSpinBox::up-button:!enabled { background: transparent; }
+QSpinBox::up-button:enabled:hover { background: rgb(255, 255, 255, 30); }
+QSpinBox::down-button { border-left: 1px solid rgb(111, 156, 207); width: 18px; height: 12px; border-bottom-right-radius: 4px; image: url(:/White/downButton); }
+QSpinBox::down-button:!enabled { background: transparent; }
+QSpinBox::down-button:hover { background: rgb(255, 255, 255, 30); }
+
+/**********标签**********/
+QLabel#grayLabel { color: rgb(70, 71, 73); }
+
+QLabel#highlightLabel { color: rgb(2, 65, 132); }
+
+QLabel#redLabel { color: red; }
+
+QLabel#grayYaHeiLabel { color: rgb(175, 175, 175); font-size: 16px; }
+
+QLabel#blueLabel { color: rgb(0, 160, 230); }
+
+QLabel#listLabel { color: rgb(51, 51, 51); }
+
+QLabel#lineBlueLabel { background: rgb(0, 78, 161); }
+
+QLabel#graySeperateLabel { background: rgb(200, 220, 230); }
+
+QLabel#seperateLabel { background: rgb(112, 153, 194); }
+
+QLabel#radiusBlueLabel { border-radius: 15px; color: white; font-size: 16px; background: rgb(0, 78, 161); }
+
+QLabel#skinLabel[colorProperty="normal"] { color: rgb(56, 99, 154); }
+QLabel#skinLabel[colorProperty="highlight"] { color: rgb(0, 160, 230); }
+
+QLabel#informationLabel { qproperty-pixmap: url(:/White/information); }
+
+QLabel#errorLabel { qproperty-pixmap: url(:/White/error); }
+
+QLabel#successLabel { qproperty-pixmap: url(:/White/success); }
+
+QLabel#questionLabel { qproperty-pixmap: url(:/White/question); }
+
+QLabel#warningLabel { qproperty-pixmap: url(:/White/warning); }
+
+QLabel#groupLabel { color: rgb(56, 99, 154); border: 1px solid rgb(111, 156, 207); font-size: 15px; border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; }
+
+/**********按钮**********/
+QToolButton#nsccButton { border: none; color: rgb(2, 65, 132); background: transparent; padding: 10px; qproperty-icon: url(:/White/nscc); qproperty-iconSize: 32px 32px; qproperty-toolButtonStyle: ToolButtonTextUnderIcon; }
+QToolButton#nsccButton:hover { background: rgb(187, 212, 238); }
+
+QToolButton#transferButton { border: none; color: rgb(2, 65, 132); background: transparent; padding: 10px; qproperty-icon: url(:/White/transfer); qproperty-iconSize: 32px 32px; qproperty-toolButtonStyle: ToolButtonTextUnderIcon; }
+QToolButton#transferButton:hover { background: rgb(187, 212, 238); }
+
+/**********按钮**********/
+QPushButton{ border-radius: 4px; border: none; width: 75px; height: 25px; }
+QPushButton:enabled { background: rgb(120, 170, 220); color: white; }
+QPushButton:!enabled { background: rgb(180, 180, 180); color: white; }
+QPushButton:enabled:hover{ background: rgb(100, 160, 220); }
+QPushButton:enabled:pressed{ background: rgb(0, 78, 161); }
+
+QPushButton#blueButton { color: white; }
+QPushButton#blueButton:enabled { background: rgb(0, 78, 161); color: white; }
+QPushButton:!enabled { background: rgb(180, 180, 180); color: white; }
+QPushButton#blueButton:enabled:hover { background: rgb(2, 65, 132); }
+QPushButton#blueButton:enabled:pressed { background: rgb(6, 94, 187); }
+
+QPushButton#selectButton { border: none; border-radius: none; border-left: 1px solid rgb(111, 156, 207); background: transparent; image: url(:/White/scan); color: rgb(51, 51, 51); }
+QPushButton#selectButton:enabled:hover{ background: rgb(187, 212, 238); }
+QPushButton#selectButton:enabled:pressed{ background: rgb(120, 170, 220); }
+
+QPushButton#linkButton { background: transparent; color: rgb(0, 160, 230); text-align:left; }
+QPushButton#linkButton:hover { color: rgb(20, 185, 255); text-decoration: underline; }
+QPushButton#linkButton:pressed { color: rgb(0, 160, 230); }
+
+QPushButton#transparentButton { background: transparent; }
+
+/*****************标题栏按钮*******************/
+QPushButton#minimizeButton { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/minimizeHover); }
+QPushButton#minimizeButton:hover { image: url(:/White/minimize); }
+QPushButton#minimizeButton:pressed { image: url(:/White/minimizePressed); }
+
+QPushButton#maximizeButton[maximizeProperty="maximize"] { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/maximizeHover); }
+QPushButton#maximizeButton[maximizeProperty="maximize"]:hover { image: url(:/White/maximize); }
+QPushButton#maximizeButton[maximizeProperty="maximize"]:pressed { image: url(:/White/maximizePressed); }
+
+QPushButton#maximizeButton[maximizeProperty="restore"] { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/restoreHover); }
+QPushButton#maximizeButton[maximizeProperty="restore"]:hover { image: url(:/White/restore); }
+QPushButton#maximizeButton[maximizeProperty="restore"]:pressed { image: url(:/White/restorePressed); }
+
+QPushButton#closeButton { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/closeHover); }
+QPushButton#closeButton:hover { image: url(:/White/close); }
+QPushButton#closeButton:pressed { image: url(:/White/closePressed); }
+
+QPushButton#skinButton { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/skinHover); }
+QPushButton#skinButton:hover { image: url(:/White/skin); }
+QPushButton#skinButton:pressed { image: url(:/White/skinPressed); }
+
+QPushButton#feedbackButton { border-radius: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: rgb(120, 170, 220); image: url(:/White/feedbackHover); }
+QPushButton#feedbackButton:hover { image: url(:/White/feedback); }
+QPushButton#feedbackButton:pressed { image: url(:/White/feedbackPressed); }
+
+QPushButton#closeTipButton { border-radius: none; border-image: url(:/White/close); background: transparent; }
+QPushButton#closeTipButton:hover { border-image: url(:/White/closeHover); }
+QPushButton#closeTipButton:pressed { border-image: url(:/White/closePressed); }
+
+QPushButton#changeSkinButton{ border-radius: 4px; border: 2px solid rgb(111, 156, 207); background: rgb(204, 227, 252); }
+QPushButton#changeSkinButton:hover{ border-color: rgb(60, 150, 200); }
+QPushButton#changeSkinButton:pressed, QPushButton#changeSkinButton:checked{ border-color: rgb(0, 160, 230); }
+
+QPushButton#transferButton { padding-left: 5px; padding-right: 5px; color: white; background: rgb(0, 78, 161); }
+QPushButton#transferButton:hover { background: rgb(2, 65, 132); }
+QPushButton#transferButton:pressed { background: rgb(6, 94, 187); }
+QPushButton#transferButton[iconProperty="left"] { qproperty-icon: url(:/White/left); }
+QPushButton#transferButton[iconProperty="right"] { qproperty-icon: url(:/White/right); }
+
+QPushButton#openButton { border-radius: none; image: url(:/White/open); background: transparent; }
+QPushButton#openButton:hover { image: url(:/White/openHover); }
+QPushButton#openButton:pressed { image: url(:/White/openPressed); }
+
+QPushButton#deleteButton { border-radius: none; image: url(:/White/delete); background: transparent; }
+QPushButton#deleteButton:hover { image: url(:/White/deleteHover); }
+QPushButton#deleteButton:pressed { image: url(:/White/deletePressed); }
+
+QPushButton#menuButton { text-align: left center; padding-left: 3px; color: rgb(84, 84, 84); border: 1px solid rgb(111, 156, 207); background: white; }
+QPushButton#menuButton::menu-indicator{ subcontrol-position: right center; subcontrol-origin: padding; image: url(:/White/arrowBottom); padding-right: 3px; }
diff --git a/client/webrtc_demo/qss/icon/1-最大化.svg b/client/webrtc_demo/qss/icon/1-最大化.svg
new file mode 100644
index 0000000..b704561
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/1-最大化.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580369534607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M444.3 539.9L202 782.2 199.8 563c0-16.5-13.5-30-30-30s-30 13.5-30 30l2.2 285.1c0 8.8 3.8 16.7 9.8 22.2 5.5 6 13.4 9.8 22.2 9.8h295.6c16.5 0 30-13.5 30-30s-13.5-30-30-30H248.9l237.8-237.8c11.7-11.7 11.7-30.8 0-42.4-11.6-11.6-30.7-11.6-42.4 0zM578.1 488l242.3-242.3 2.2 219.2c0 16.5 13.5 30 30 30s30-13.5 30-30l-2.2-285.1c0-8.8-3.8-16.7-9.8-22.2-5.5-6-13.4-9.8-22.2-9.8H552.8c-16.5 0-30 13.5-30 30s13.5 30 30 30h220.7L535.7 445.6c-11.7 11.7-11.7 30.8 0 42.4 11.7 11.7 30.8 11.7 42.4 0z" p-id="3687" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/Thumbs.db b/client/webrtc_demo/qss/icon/Thumbs.db
new file mode 100644
index 0000000..fb49600
Binary files /dev/null and b/client/webrtc_demo/qss/icon/Thumbs.db differ
diff --git a/client/webrtc_demo/qss/icon/action_config.png b/client/webrtc_demo/qss/icon/action_config.png
new file mode 100644
index 0000000..f7e64b6
Binary files /dev/null and b/client/webrtc_demo/qss/icon/action_config.png differ
diff --git a/client/webrtc_demo/qss/icon/array.svg b/client/webrtc_demo/qss/icon/array.svg
new file mode 100644
index 0000000..7ae234d
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/array.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1606632646518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M128 213.333333C128 166.4 166.4 128 213.333333 128L810.666667 128C857.6 128 896 166.4 896 213.333333L896 810.666667C896 857.6 857.6 896 810.666667 896L213.333333 896C165.973333 896 128 857.6 128 810.666667L128 213.333333M256 256 256 768 426.666667 768 426.666667 682.666667 341.333333 682.666667 341.333333 341.333333 426.666667 341.333333 426.666667 256 256 256M682.666667 682.666667 597.333333 682.666667 597.333333 768 768 768 768 256 597.333333 256 597.333333 341.333333 682.666667 341.333333 682.666667 682.666667Z" p-id="8425"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/boolean.svg b/client/webrtc_demo/qss/icon/boolean.svg
new file mode 100644
index 0000000..6592ee0
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/boolean.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1606630428606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7152" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 1024H64a64 64 0 0 1-64-64V64a64 64 0 0 1 64-64h896a64 64 0 0 1 64 64v896a64 64 0 0 1-64 64zM896 192a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V192z m-512 512L192 448h128l126.464 168.576L704 256h128l-320 448H384z" p-id="7153"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/btn_close_down.png b/client/webrtc_demo/qss/icon/btn_close_down.png
new file mode 100644
index 0000000..814cdc7
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_close_down.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_close_down.svg b/client/webrtc_demo/qss/icon/btn_close_down.svg
new file mode 100644
index 0000000..095ee89
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/btn_close_down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580641292734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2118" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M670.4 308.352 512 466.752l-158.4-158.4c-12.512-12.512-32.768-12.512-45.248 0s-12.512 32.768 0 45.248l158.4 158.4-158.4 158.4c-12.512 12.512-12.512 32.768 0 45.248 12.48 12.48 32.768 12.512 45.248 0l158.4-158.4 158.4 158.4c12.48 12.48 32.768 12.512 45.248 0 12.512-12.512 12.48-32.768 0-45.248L557.248 512l158.4-158.4c12.512-12.512 12.48-32.768 0-45.248C703.136 295.84 682.88 295.84 670.4 308.352z" p-id="2119" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/btn_close_highlight.png b/client/webrtc_demo/qss/icon/btn_close_highlight.png
new file mode 100644
index 0000000..2bc66bb
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_close_highlight.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_close_normal.png b/client/webrtc_demo/qss/icon/btn_close_normal.png
new file mode 100644
index 0000000..11c1f52
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_close_normal.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_data.png b/client/webrtc_demo/qss/icon/btn_data.png
new file mode 100644
index 0000000..61329e1
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_data.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_max_down.png b/client/webrtc_demo/qss/icon/btn_max_down.png
new file mode 100644
index 0000000..ab159f8
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_max_down.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_max_highlight.png b/client/webrtc_demo/qss/icon/btn_max_highlight.png
new file mode 100644
index 0000000..f9a2a1b
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_max_highlight.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_max_normal.png b/client/webrtc_demo/qss/icon/btn_max_normal.png
new file mode 100644
index 0000000..cb065af
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_max_normal.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_max_normal.svg b/client/webrtc_demo/qss/icon/btn_max_normal.svg
new file mode 100644
index 0000000..daacc05
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/btn_max_normal.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580641360656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2752" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M512 1255.489906" p-id="2753" fill="#e6e6e6"></path><path d="M865.682191 310.085948l-554.675195 0c-14.634419 0-26.403358 11.973616-26.403358 26.710374L284.603638 423.681791l-92.309414 0c-14.634419 0-26.403358 11.973616-26.403358 26.710374l0 349.998001c0 14.634419 11.768939 26.505697 26.403358 26.505697l554.675195 0c14.634419 0 26.710374-11.871277 26.710374-26.505697L773.679792 713.30002l92.002399 0c14.634419 0 26.710374-11.871277 26.710374-26.505697l0-349.998001C892.392564 322.059564 880.31661 310.085948 865.682191 310.085948zM728.65081 781.86688 210.817509 781.86688 210.817509 468.710774l517.8333 0L728.65081 781.86688zM847.363582 668.271037l-73.68379 0L773.679792 450.392165c0-14.634419-12.075954-26.710374-26.710374-26.710374L329.530282 423.681791l0-68.56686 517.8333 0L847.363582 668.271037z" p-id="2754" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/btn_mini_down.png b/client/webrtc_demo/qss/icon/btn_mini_down.png
new file mode 100644
index 0000000..d7a579a
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_mini_down.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_mini_down.svg b/client/webrtc_demo/qss/icon/btn_mini_down.svg
new file mode 100644
index 0000000..4ae753b
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/btn_mini_down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580642261924" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3432" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M784 80H240c-88 0-160 72-160 160v544c0 88 72 160 160 160h544c88 0 160-72 160-160V240c0-88-72-160-160-160z m96 704c0 52.8-43.2 96-96 96h-96v-96c0-52.8 43.2-96 96-96h96v96z m0-160h-96c-88 0-160 72-160 160v96H240c-52.8 0-96-43.2-96-96V240c0-52.8 43.2-96 96-96h544c52.8 0 96 43.2 96 96v384z" p-id="3433" fill="#e6e6e6"></path><path d="M560 336c-17.6 0-32 14.4-32 32v115.2L302.4 257.6c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8L483.2 528H368c-17.6 0-32 14.4-32 32s14.4 32 32 32h192c9.6 0 17.6-3.2 22.4-9.6 6.4-6.4 9.6-14.4 9.6-22.4V368c0-17.6-14.4-32-32-32z" p-id="3434" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/btn_mini_highlight.png b/client/webrtc_demo/qss/icon/btn_mini_highlight.png
new file mode 100644
index 0000000..71b6020
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_mini_highlight.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_mini_normal.png b/client/webrtc_demo/qss/icon/btn_mini_normal.png
new file mode 100644
index 0000000..644727a
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_mini_normal.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_restore_down.png b/client/webrtc_demo/qss/icon/btn_restore_down.png
new file mode 100644
index 0000000..67b4705
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_restore_down.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_restore_down.svg b/client/webrtc_demo/qss/icon/btn_restore_down.svg
new file mode 100644
index 0000000..04bc9e2
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/btn_restore_down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566285509502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M734.814692 691.402973 884.428198 691.402973 884.428198 77.888951 258.144338 77.888951 258.144338 284.1005 294.983361 284.1005 294.983361 118.847805 847.589175 118.847805 847.589175 650.443096 734.814692 650.443096Z" p-id="1970"></path><path d="M108.530832 284.1005l626.28386 0 0 613.515045-626.28386 0L108.530832 284.1005 108.530832 284.1005zM145.369855 325.060377l0 531.59529 552.605813 0L697.975668 325.060377 145.369855 325.060377z" p-id="1971"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/btn_restore_highlight.png b/client/webrtc_demo/qss/icon/btn_restore_highlight.png
new file mode 100644
index 0000000..f57eb81
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_restore_highlight.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_restore_normal.png b/client/webrtc_demo/qss/icon/btn_restore_normal.png
new file mode 100644
index 0000000..e53f9c1
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_restore_normal.png differ
diff --git a/client/webrtc_demo/qss/icon/btn_serial.png b/client/webrtc_demo/qss/icon/btn_serial.png
new file mode 100644
index 0000000..8543aa8
Binary files /dev/null and b/client/webrtc_demo/qss/icon/btn_serial.png differ
diff --git a/client/webrtc_demo/qss/icon/charts.png b/client/webrtc_demo/qss/icon/charts.png
new file mode 100644
index 0000000..ddb2e5b
Binary files /dev/null and b/client/webrtc_demo/qss/icon/charts.png differ
diff --git a/client/webrtc_demo/qss/icon/check_box_p.png b/client/webrtc_demo/qss/icon/check_box_p.png
new file mode 100644
index 0000000..33c8d49
Binary files /dev/null and b/client/webrtc_demo/qss/icon/check_box_p.png differ
diff --git a/client/webrtc_demo/qss/icon/checkbox.png b/client/webrtc_demo/qss/icon/checkbox.png
new file mode 100644
index 0000000..2c56aa4
Binary files /dev/null and b/client/webrtc_demo/qss/icon/checkbox.png differ
diff --git a/client/webrtc_demo/qss/icon/checkbox_h.png b/client/webrtc_demo/qss/icon/checkbox_h.png
new file mode 100644
index 0000000..3d89dc3
Binary files /dev/null and b/client/webrtc_demo/qss/icon/checkbox_h.png differ
diff --git a/client/webrtc_demo/qss/icon/checkbox_p.png b/client/webrtc_demo/qss/icon/checkbox_p.png
new file mode 100644
index 0000000..8f8d37b
Binary files /dev/null and b/client/webrtc_demo/qss/icon/checkbox_p.png differ
diff --git a/client/webrtc_demo/qss/icon/close_main.png b/client/webrtc_demo/qss/icon/close_main.png
new file mode 100644
index 0000000..3356428
Binary files /dev/null and b/client/webrtc_demo/qss/icon/close_main.png differ
diff --git a/client/webrtc_demo/qss/icon/code-array.svg b/client/webrtc_demo/qss/icon/code-array.svg
new file mode 100644
index 0000000..0434557
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/code-array.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580818424312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7832" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M128 213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h597.333334a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333334a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333m128 42.666667v512h170.666667v-85.333333H341.333333V341.333333h85.333334V256H256m426.666667 426.666667h-85.333334v85.333333h170.666667V256h-170.666667v85.333333h85.333334v341.333334z" fill="" p-id="7833"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/combo_arrow.png b/client/webrtc_demo/qss/icon/combo_arrow.png
new file mode 100644
index 0000000..a054bcd
Binary files /dev/null and b/client/webrtc_demo/qss/icon/combo_arrow.png differ
diff --git a/client/webrtc_demo/qss/icon/dataflow.svg b/client/webrtc_demo/qss/icon/dataflow.svg
new file mode 100644
index 0000000..0c69265
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/dataflow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1563782191748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1982" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M524 1008c-8 0-16 0-24-0.8-105.6-6.4-202.4-52.8-272.8-132-64.8-72.8-100-166.4-100-264 0-90.4 22.4-185.6 65.6-281.6 4-8 12.8-12 20.8-8s12 12.8 8 20.8C180.8 435.2 160 525.6 160 611.2c0 89.6 32 176 92 242.4 64.8 72.8 153.6 116 250.4 121.6s190.4-26.4 263.2-91.2c6.4-5.6 16.8-5.6 22.4 1.6s5.6 16.8-1.6 22.4c-72.8 64.8-164.8 100-262.4 100z m359.2-256.8c-1.6 0-3.2 0-4.8-0.8-8-3.2-12.8-12-9.6-20 12.8-38.4 20-78.4 20-119.2C888 399.2 717.6 48 524 48c-70.4 0-129.6 35.2-191.2 113.6-5.6 7.2-15.2 8-22.4 2.4-7.2-5.6-8-15.2-2.4-22.4C375.2 56 444 16 524 16 752.8 16 920 407.2 920 611.2c0 44-7.2 88-21.6 129.6-2.4 6.4-8 10.4-15.2 10.4z" fill="#27B1BD" p-id="1983"></path><path d="M532 836.8C388.8 836.8 272 720 272 576.8 272 436.8 440 184 532 184 621.6 184 792 440.8 792 576.8c0 143.2-116.8 260-260 260z m0-620.8C470.4 216 304 439.2 304 576.8c0 125.6 102.4 228 228 228S760 702.4 760 576.8C760 443.2 592 216 532 216zM272 336c-48.8 0-88-39.2-88-88s39.2-88 88-88 88 39.2 88 88-39.2 88-88 88z m0-144c-31.2 0-56 24.8-56 56s24.8 56 56 56 56-24.8 56-56-24.8-56-56-56z" fill="#27B1BD" p-id="1984"></path><path d="M630.4 523.2c42.4 56.8 30.4 136.8-26.4 179.2s-136.8 30.4-179.2-26.4c-23.2-31.2-35.2-70.4-25.6-108m0.8 0c21.6-2.4 54.4 20.8 80 16 90.4-16 101.6-60.8 150.4-60.8" fill="#53DBEA" p-id="1985"></path><path d="M842.4 893.6c-41.6 0-75.2-33.6-75.2-75.2s33.6-75.2 75.2-75.2 75.2 33.6 75.2 75.2c-0.8 41.6-34.4 75.2-75.2 75.2z m0-117.6c-24 0-43.2 19.2-43.2 43.2s19.2 43.2 43.2 43.2 43.2-19.2 43.2-43.2-20-43.2-43.2-43.2z" fill="#27B1BD" p-id="1986"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/downarrow.png b/client/webrtc_demo/qss/icon/downarrow.png
new file mode 100644
index 0000000..b810e44
Binary files /dev/null and b/client/webrtc_demo/qss/icon/downarrow.png differ
diff --git a/client/webrtc_demo/qss/icon/hor_scroll_left_arrow.png b/client/webrtc_demo/qss/icon/hor_scroll_left_arrow.png
new file mode 100644
index 0000000..1093f6e
Binary files /dev/null and b/client/webrtc_demo/qss/icon/hor_scroll_left_arrow.png differ
diff --git a/client/webrtc_demo/qss/icon/hor_scroll_right_arrow.png b/client/webrtc_demo/qss/icon/hor_scroll_right_arrow.png
new file mode 100644
index 0000000..cc3bf17
Binary files /dev/null and b/client/webrtc_demo/qss/icon/hor_scroll_right_arrow.png differ
diff --git a/client/webrtc_demo/qss/icon/int.png b/client/webrtc_demo/qss/icon/int.png
new file mode 100644
index 0000000..1052220
Binary files /dev/null and b/client/webrtc_demo/qss/icon/int.png differ
diff --git a/client/webrtc_demo/qss/icon/int.svg b/client/webrtc_demo/qss/icon/int.svg
new file mode 100644
index 0000000..9ce427c
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/int.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1606629528256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6317" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M332.799002 686.081014m-332.799002 0a332.799002 332.799002 0 1 0 665.598003 0 332.799002 332.799002 0 1 0-665.598003 0Z" fill="#D3EFDE" p-id="6318"></path><path d="M883.19735 1024h-639.99808A141.055577 141.055577 0 0 1 102.399693 883.200422v-742.397772A141.055577 141.055577 0 0 1 243.19927 0.003072h516.350451a89.087733 89.087733 0 0 1 63.231811 25.599923l189.695431 189.695431A38.399885 38.399885 0 0 1 1023.996928 243.202342v639.99808a141.055577 141.055577 0 0 1-140.799578 140.799578zM243.19927 76.802842A63.999808 63.999808 0 0 0 179.199462 140.80265v742.397772A63.999808 63.999808 0 0 0 243.19927 947.20023h639.99808a63.999808 63.999808 0 0 0 63.999808-63.999808V259.074295l-179.199462-179.199463a12.799962 12.799962 0 0 0-8.447975-3.07199z" fill="#434260" p-id="6319"></path><path d="M332.799002 399.105875h35.583893v226.047322H332.799002zM428.798714 399.105875h36.60789l75.007775 132.607602 22.783931 47.871856h1.535996c-1.791995-23.29593-4.607986-51.199846-4.607986-75.263774v-105.215684h33.791898v226.047322h-35.839892l-75.007775-133.3756-22.271933-47.359858h-1.535996c1.791995 23.29593 4.607986 49.407852 4.607986 73.983778v106.49568h-35.071894zM700.413899 428.801786h-66.303801v-29.695911h168.447494v29.695911h-66.5598v196.095411h-35.583893z" fill="#434260" p-id="6320"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/key.svg b/client/webrtc_demo/qss/icon/key.svg
new file mode 100644
index 0000000..cda69f7
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/key.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580815694677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4835" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M490.208 193.088l33.568 0 0 134.272-33.568 0 0-134.272z" p-id="4836" fill="#000000"></path><path d="M741.952 293.792c0-129.792-105.216-234.976-234.976-234.976-129.792 0-234.976 105.184-234.976 234.976 0 99.936 62.528 185.12 150.528 219.072l0 452.288 167.84 0 0-116.96 50.88-50.88-50.88-50.88 0-66.08 84.448-84.448-83.136-83.136c87.84-34.016 150.272-119.136 150.272-218.976zM579.552 481.472l-22.752 8.8 0 35.104 70.496 70.56-70.528 70.528 0 93.888 36.96 36.992-36.96 36.992 0 97.312-100.704 0 0-441.76-21.504-8.288c-78.368-30.24-129.024-103.904-129.024-187.744 0-111.072 90.336-201.408 201.408-201.408 111.04 0 201.408 90.336 201.408 201.408 0 83.712-50.592 157.376-128.832 187.68z" p-id="4837" fill="#000000"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/logo.png b/client/webrtc_demo/qss/icon/logo.png
new file mode 100644
index 0000000..5fbeb2a
Binary files /dev/null and b/client/webrtc_demo/qss/icon/logo.png differ
diff --git a/client/webrtc_demo/qss/icon/missing.svg b/client/webrtc_demo/qss/icon/missing.svg
new file mode 100644
index 0000000..fba40ff
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/missing.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580818580570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8091" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M341.333333 426.666667a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 0 1 85.333333 0z m170.666667 0a42.666667 42.666667 0 1 1-85.333333 0 42.666667 42.666667 0 0 1 85.333333 0z m256 426.666666a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m42.666667-384c70.570667 0 128 57.429333 128 128s-57.429333 128-128 128v42.666667a42.666667 42.666667 0 0 1-85.333334 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667h42.666667c23.509333 0 42.666667-19.157333 42.666666-42.666667 0-23.509333-19.157333-42.666667-42.666666-42.666666h-42.666667c-23.509333 0-42.666667 19.157333-42.666667 42.666666a42.666667 42.666667 0 0 1-85.333333 0c0-70.570667 57.429333-128 128-128h42.666667z m-128-42.666666a42.666667 42.666667 0 0 1-85.333334 0c0-30.72-6.656-60.501333-19.2-87.722667A125.44 125.44 0 0 1 554.666667 341.333333a127.872 127.872 0 0 1-127.488-123.008 211.797333 211.797333 0 0 0-86.357334 0A127.872 127.872 0 0 1 213.333333 341.333333a125.44 125.44 0 0 1-23.466666-2.389333A209.152 209.152 0 0 0 170.666667 426.666667v298.666666h384a42.666667 42.666667 0 0 1 0 85.333334H128a42.666667 42.666667 0 0 1-42.666667-42.666667v-341.333333c0-46.037333 10.794667-90.538667 30.890667-130.944A126.72 126.72 0 0 1 85.333333 213.333333V170.666667c0-47.061333 38.272-85.333333 85.333334-85.333334h128a42.666667 42.666667 0 0 1 42.666666 42.666667v3.712a300.928 300.928 0 0 1 85.333334 0V128a42.666667 42.666667 0 0 1 42.666666-42.666667h128c47.061333 0 85.333333 38.272 85.333334 85.333334v42.666666a126.72 126.72 0 0 1-30.890667 82.389334c20.096 40.405333 30.890667 84.906667 30.890667 130.944z m-341.333334 170.666666a42.666667 42.666667 0 0 1 0-85.333333h85.333334a42.666667 42.666667 0 0 1 0 85.333333 42.666667 42.666667 0 0 1-85.333334 0z m170.666667-384c0 23.509333 19.157333 42.666667 42.666667 42.666667 23.509333 0 42.666667-19.157333 42.666666-42.666667V170.666667h-85.333333v42.666666zM256 213.333333V170.666667H170.666667v42.666666c0 23.509333 19.157333 42.666667 42.666666 42.666667 23.509333 0 42.666667-19.157333 42.666667-42.666667z" fill="#000000" p-id="8092"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/objects.svg b/client/webrtc_demo/qss/icon/objects.svg
new file mode 100644
index 0000000..2f33712
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/objects.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1606632592168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7960" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M341.333333 725.333333 42.666667 725.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L0 42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667l640 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 298.666667c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667L640 85.333333 85.333333 85.333333l0 554.666667 256 0c25.6 0 42.666667 17.066667 42.666667 42.666667S366.933333 725.333333 341.333333 725.333333z" p-id="7961"></path><path d="M981.333333 1024 341.333333 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667L298.666667 341.333333c0-25.6 17.066667-42.666667 42.666667-42.666667l640 0c25.6 0 42.666667 17.066667 42.666667 42.666667l0 640C1024 1006.933333 1006.933333 1024 981.333333 1024zM384 938.666667l554.666667 0L938.666667 384 384 384 384 938.666667z" p-id="7962"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/radio.png b/client/webrtc_demo/qss/icon/radio.png
new file mode 100644
index 0000000..8c32808
Binary files /dev/null and b/client/webrtc_demo/qss/icon/radio.png differ
diff --git a/client/webrtc_demo/qss/icon/radio_h.png b/client/webrtc_demo/qss/icon/radio_h.png
new file mode 100644
index 0000000..84407ba
Binary files /dev/null and b/client/webrtc_demo/qss/icon/radio_h.png differ
diff --git a/client/webrtc_demo/qss/icon/radio_p.png b/client/webrtc_demo/qss/icon/radio_p.png
new file mode 100644
index 0000000..4f32d5e
Binary files /dev/null and b/client/webrtc_demo/qss/icon/radio_p.png differ
diff --git a/client/webrtc_demo/qss/icon/sizegrip.png b/client/webrtc_demo/qss/icon/sizegrip.png
new file mode 100644
index 0000000..f2667b9
Binary files /dev/null and b/client/webrtc_demo/qss/icon/sizegrip.png differ
diff --git a/client/webrtc_demo/qss/icon/string.svg b/client/webrtc_demo/qss/icon/string.svg
new file mode 100644
index 0000000..924a541
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/string.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580818387282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M391.68 561.792c0 24.96-6.464 47.36-19.264 67.264-12.864 19.904-31.68 35.392-56.384 46.656s-54.08 16.896-88 16.896c-40.704 0-74.24-7.616-100.672-22.976-18.752-11.072-33.984-25.856-45.696-44.288C69.824 606.72 64 588.8 64 571.392 64 561.28 67.52 552.576 74.56 545.344c7.04-7.232 16-10.816 26.88-10.816 8.832 0 16.256 2.752 22.4 8.384C129.856 548.544 135.04 556.928 139.392 568 144.64 581.12 150.272 592.128 156.416 600.96c6.08 8.832 14.656 16.064 25.728 21.76 11.072 5.76 25.6 8.64 43.584 8.64 24.768 0 44.864-5.824 60.288-17.344 15.488-11.584 23.232-25.92 23.232-43.2 0-13.696-4.16-24.832-12.544-33.344-8.32-8.576-19.136-15.04-32.32-19.584-13.248-4.48-30.912-9.28-53.056-14.4C181.76 496.704 156.992 488.576 136.96 479.232c-19.968-9.28-35.84-21.952-47.488-37.952C77.696 425.28 71.872 405.376 71.872 381.568c0-22.656 6.208-42.88 18.56-60.48s30.272-31.168 53.696-40.64c23.424-9.472 51.008-14.272 82.688-14.272 25.344 0 47.168 3.2 65.664 9.408 18.432 6.336 33.792 14.656 45.952 25.088 12.16 10.368 21.12 21.312 26.688 32.768s8.448 22.656 8.448 33.472c0 9.92-3.52 18.88-10.56 26.816C356.096 401.728 347.328 405.696 336.832 405.696c-9.536 0-16.832-2.368-21.76-7.104C310.016 393.728 304.64 385.92 298.816 375.04 291.328 359.488 282.368 347.392 271.872 338.624 261.312 329.92 244.48 325.568 221.248 325.568c-21.568 0-38.912 4.736-52.16 14.208-13.184 9.472-19.84 20.864-19.84 34.176 0 8.256 2.24 15.36 6.72 21.376s10.688 11.2 18.56 15.488 15.872 7.68 23.936 10.112 21.376 6.016 39.936 10.624c23.232 5.504 44.288 11.52 63.168 17.984 18.816 6.656 34.88 14.592 48.064 23.936C362.816 482.88 373.12 494.72 380.544 509.056 387.968 523.456 391.68 540.992 391.68 561.792zM449.856 387.2l8.448 0L458.304 341.056c0-12.352 0.32-22.144 1.024-29.12 0.64-7.04 2.496-13.12 5.44-18.112 3.008-5.248 7.296-9.536 12.928-12.8C483.328 277.696 489.6 276.032 496.576 276.032c9.728 0 18.56 3.648 26.432 11.008 5.248 4.864 8.64 10.816 9.984 17.792C534.4 311.936 535.104 321.92 535.104 334.784L535.104 387.2l28.096 0c10.88 0 19.136 2.56 24.896 7.68 5.76 5.184 8.64 11.84 8.64 19.84 0 10.368-4.096 17.536-12.224 21.696S564.608 442.56 549.504 442.56L535.104 442.56l0 141.184c0 12.032 0.384 21.248 1.28 27.712C537.28 617.92 539.52 623.168 543.104 627.2c3.648 4.032 9.6 6.08 17.856 6.08 4.48 0 10.624-0.832 18.24-2.368 7.744-1.6 13.76-2.432 17.984-2.432 6.272 0 11.776 2.496 16.768 7.488 4.992 4.928 7.488 11.136 7.488 18.368 0 12.352-6.72 21.888-20.224 28.416s-33.024 9.792-58.24 9.792c-24 0-42.24-3.968-54.592-12.032s-20.48-19.2-24.32-33.408-5.76-33.344-5.76-57.152L458.304 442.56 448.192 442.56c-11.072 0-19.52-2.624-25.344-7.872S414.144 422.784 414.144 414.656c0-8 3.008-14.656 9.152-19.84C429.376 389.76 438.272 387.2 449.856 387.2zM725.76 581.824l0 64.128c0 15.552-3.648 27.2-10.88 35.008-7.36 7.744-16.64 11.648-27.904 11.648-11.136 0-20.096-3.904-27.264-11.776s-10.752-19.52-10.752-34.88l0-213.76c0-34.496 12.48-51.776 37.376-51.776 12.736 0 22.016 3.968 27.648 12.032s4.864 16.192 5.504 31.936c9.152-15.744 22.4-23.872 32-31.936s22.656-12.032 38.72-12.032 31.744 3.968 46.848 12.032c15.232 8.064 22.848 18.752 22.848 32.064 0 9.344-3.264 17.152-9.728 23.168-6.528 6.144-13.504 9.216-20.992 9.216-2.752 0-9.6-1.728-20.352-5.248-10.752-3.456-20.224-5.184-28.48-5.184-11.264 0-20.48 2.944-27.648 8.896-7.104 5.888-12.608 14.656-16.512 26.304-3.968 11.648-6.72 25.408-8.256 41.408C726.528 539.2 725.76 558.656 725.76 581.824zM881.344 607.936c-26.496 0-48 21.568-48 48 0 26.496 21.504 48.064 48 48.064s48-21.568 48-48.064C929.344 629.504 907.904 607.936 881.344 607.936z" p-id="6756"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/ver_scroll_bottom_arrow.png b/client/webrtc_demo/qss/icon/ver_scroll_bottom_arrow.png
new file mode 100644
index 0000000..2be161f
Binary files /dev/null and b/client/webrtc_demo/qss/icon/ver_scroll_bottom_arrow.png differ
diff --git a/client/webrtc_demo/qss/icon/ver_scroll_top_arrow.png b/client/webrtc_demo/qss/icon/ver_scroll_top_arrow.png
new file mode 100644
index 0000000..a8e4fed
Binary files /dev/null and b/client/webrtc_demo/qss/icon/ver_scroll_top_arrow.png differ
diff --git a/client/webrtc_demo/qss/icon/关闭.svg b/client/webrtc_demo/qss/icon/关闭.svg
new file mode 100644
index 0000000..90e1a95
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/关闭.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580369499637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2832" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M503.466667 467.285333l319.829333-319.829333a25.6 25.6 0 1 1 36.181333 36.181333l-319.829333 319.829334 319.829333 319.829333a25.6 25.6 0 1 1-36.181333 36.181333l-319.829333-319.829333-319.829334 319.829333a25.6 25.6 0 1 1-36.181333-36.181333l319.829333-319.829333-319.829333-319.829334a25.6 25.6 0 1 1 36.181333-36.181333l319.829334 319.829333z" p-id="2833" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/icon/最小化.svg b/client/webrtc_demo/qss/icon/最小化.svg
new file mode 100644
index 0000000..171b4f6
--- /dev/null
+++ b/client/webrtc_demo/qss/icon/最小化.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1580369518247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3279" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M98.23 451.003l829.685-1.992 0.154 64-829.685 1.992z" fill="#ffffff" p-id="3280"></path></svg>
\ No newline at end of file
diff --git a/client/webrtc_demo/qss/qss.qrc b/client/webrtc_demo/qss/qss.qrc
new file mode 100644
index 0000000..5792182
--- /dev/null
+++ b/client/webrtc_demo/qss/qss.qrc
@@ -0,0 +1,56 @@
+<RCC>
+    <qresource prefix="/qss">
+        <file>icon/btn_close_down.png</file>
+        <file>icon/btn_close_highlight.png</file>
+        <file>icon/btn_close_normal.png</file>
+        <file>icon/btn_max_down.png</file>
+        <file>icon/btn_max_highlight.png</file>
+        <file>icon/btn_max_normal.png</file>
+        <file>icon/btn_mini_down.png</file>
+        <file>icon/btn_mini_highlight.png</file>
+        <file>icon/btn_mini_normal.png</file>
+        <file>icon/btn_restore_down.png</file>
+        <file>icon/btn_restore_highlight.png</file>
+        <file>icon/btn_restore_normal.png</file>
+        <file>icon/checkbox.png</file>
+        <file>icon/checkbox_h.png</file>
+        <file>icon/checkbox_p.png</file>
+        <file>icon/downarrow.png</file>
+        <file>icon/hor_scroll_left_arrow.png</file>
+        <file>icon/hor_scroll_right_arrow.png</file>
+        <file>icon/radio.png</file>
+        <file>icon/radio_h.png</file>
+        <file>icon/radio_p.png</file>
+        <file>icon/ver_scroll_bottom_arrow.png</file>
+        <file>icon/ver_scroll_top_arrow.png</file>
+        <file>icon/sizegrip.png</file>
+        <file>css/qss.css</file>
+        <file>icon/btn_serial.png</file>
+        <file>css/white.css</file>
+        <file>css/dark.css</file>
+        <file>icon/btn_data.png</file>
+        <file>icon/dataflow.svg</file>
+        <file>icon/check_box_p.png</file>
+        <file>icon/combo_arrow.png</file>
+        <file>icon/charts.png</file>
+        <file>icon/btn_max_normal.svg</file>
+        <file>icon/btn_restore_down.svg</file>
+        <file>icon/btn_mini_down.svg</file>
+        <file>icon/btn_close_down.svg</file>
+        <file>icon/close_main.png</file>
+        <file>icon/logo.png</file>
+        <file>icon/key.svg</file>
+        <file>icon/action_config.png</file>
+        <file>icon/int.svg</file>
+        <file>icon/objects.svg</file>
+        <file>icon/string.svg</file>
+        <file>icon/missing.svg</file>
+        <file>css/QssMainWindow.css</file>
+        <file>css/QssTitleBar.css</file>
+        <file>css/corrugation_form.css</file>
+        <file>css/vibration_comparison_form.css</file>
+        <file>css/mainwindow.css</file>
+        <file>css/basic.css</file>
+        <file>css/save_data_form.css</file>
+    </qresource>
+</RCC>
diff --git a/client/webrtc_demo/src/MyCapturer.cpp b/client/webrtc_demo/src/camera_capture.cpp
similarity index 89%
rename from client/webrtc_demo/src/MyCapturer.cpp
rename to client/webrtc_demo/src/camera_capture.cpp
index 18f33a8..ed7c83f 100644
--- a/client/webrtc_demo/src/MyCapturer.cpp
+++ b/client/webrtc_demo/src/camera_capture.cpp
@@ -1,36 +1,35 @@
-#include "MyCapturer.h"
+#include "camera_capture.h"
 #include "rtc_base/thread.h"
 #include <modules/desktop_capture/desktop_capture_options.h>
 #include <QDebug>
 #include <iostream>
 #include "easylog.h"
 
-MyCapturer::MyCapturer() {
+CameraCapturer::CameraCapturer() {
 
 }
 
-void MyCapturer::startCapturer() {
+void CameraCapturer::startCapturer() {
   auto options = webrtc::DesktopCaptureOptions::CreateDefault();
   options.set_allow_directx_capturer(true);
   capturer_ = webrtc::DesktopCapturer::CreateScreenCapturer(options);
   capturer_->Start(this);
   CaptureFrame();
-
 }
 
-webrtc::MediaSourceInterface::SourceState MyCapturer::state() const {
+webrtc::MediaSourceInterface::SourceState CameraCapturer::state() const {
   return webrtc::MediaSourceInterface::kLive;
 }
 
-bool MyCapturer::remote() const {
+bool CameraCapturer::remote() const {
   return false;
 }
 
-bool MyCapturer::is_screencast() const {
+bool CameraCapturer::is_screencast() const {
   return true;
 }
 
-absl::optional<bool> MyCapturer::needs_denoising() const {
+absl::optional<bool> CameraCapturer::needs_denoising() const {
   return false;
 }
 
@@ -95,25 +94,19 @@ static void RawToBmp(unsigned char *pRawImage, int ImageHeight, int ImageWidth,
             }
         }
     }
-
-
     int dw = ImageWidth*bitcount / 8;
     for (int i = 0; i < ImageHeight; i++)
     {
         memcpy(imgData + headerLength + dataSizePerLine*i, pRawImage + dw*i, dw);
     }
 
-
-
     FILE *fp_bmp;
     fp_bmp = fopen(filePath.c_str()/*"temp.bmp"*/, "wb");
     fwrite((void*)imgData, bfSize, 1, fp_bmp);
     fclose(fp_bmp);
-
-
 }
 
-void MyCapturer::OnCaptureResult(webrtc::DesktopCapturer::Result result,
+void CameraCapturer::OnCaptureResult(webrtc::DesktopCapturer::Result result,
                                  std::unique_ptr<webrtc::DesktopFrame> frame) {
     if (result != webrtc::DesktopCapturer::Result::SUCCESS)
         return;
@@ -131,12 +124,12 @@ void MyCapturer::OnCaptureResult(webrtc::DesktopCapturer::Result result,
     OnFrame(webrtc::VideoFrame(i420_buffer_, 0, 0, webrtc::kVideoRotation_0));
 }
 
-void MyCapturer::OnMessage(rtc::Message* msg) {
+void CameraCapturer::OnMessage(rtc::Message* msg) {
   if (msg->message_id == 0)
     CaptureFrame();
 }
 
-void MyCapturer::CaptureFrame() {
+void CameraCapturer::CaptureFrame() {
   capturer_->CaptureFrame();
 
   rtc::Location loc(__FUNCTION__, __FILE__,__LINE__);
diff --git a/client/webrtc_demo/src/MyCapturer.h b/client/webrtc_demo/src/camera_capture.h
similarity index 84%
rename from client/webrtc_demo/src/MyCapturer.h
rename to client/webrtc_demo/src/camera_capture.h
index b7c976e..63e48c9 100644
--- a/client/webrtc_demo/src/MyCapturer.h
+++ b/client/webrtc_demo/src/camera_capture.h
@@ -12,29 +12,23 @@
 #include "rtc_base/message_handler.h"
 #include "libyuv.h"
 
-class MyCapturer : public rtc::AdaptedVideoTrackSource,
+class CameraCapturer : public rtc::AdaptedVideoTrackSource,
                    public rtc::MessageHandler,
                    public webrtc::DesktopCapturer::Callback {
- public:
-  MyCapturer();
-
+public:
+  CameraCapturer();
   void startCapturer();
-
   void CaptureFrame();
-
   bool is_screencast() const override;
 
   absl::optional<bool> needs_denoising() const override;
-
   webrtc::MediaSourceInterface::SourceState state() const override;
-
   bool remote() const override;
-
   void OnCaptureResult(webrtc::DesktopCapturer::Result result,
-                               std::unique_ptr<webrtc::DesktopFrame> frame) override;
+                              std::unique_ptr<webrtc::DesktopFrame> frame) override;
   void OnMessage(rtc::Message* msg) override;
 
- private:
+private:
   std::unique_ptr<webrtc::DesktopCapturer> capturer_;
   rtc::scoped_refptr<webrtc::I420Buffer> i420_buffer_;
   //mutable volatile int ref_count_;
diff --git a/client/webrtc_demo/src/cplaywidget.cpp b/client/webrtc_demo/src/cplaywidget.cpp
index b7899b3..730767c 100644
--- a/client/webrtc_demo/src/cplaywidget.cpp
+++ b/client/webrtc_demo/src/cplaywidget.cpp
@@ -271,7 +271,6 @@ void CPlayWidget::paintGL()
 void CPlayWidget::initShaderYuv()
 {
     //?????????��????????tex_y, tex_u, tex_v??��??,??��????????????????
-    //????????????��??????
     textureUniformY = m_pShaderProgram->uniformLocation("tex_y");
     textureUniformU =  m_pShaderProgram->uniformLocation("tex_u");
     textureUniformV =  m_pShaderProgram->uniformLocation("tex_v");
diff --git a/client/webrtc_demo/src/main.cpp b/client/webrtc_demo/src/main.cpp
index 0e320a5..5804837 100644
--- a/client/webrtc_demo/src/main.cpp
+++ b/client/webrtc_demo/src/main.cpp
@@ -45,11 +45,12 @@
 #include "api/video/i420_buffer.h"
 #include "signal_client.h"
 #include <QStandardItemModel>
-
+#include <Windows.h>
 
 #pragma comment (lib,"advapi32.lib")
 
 extern"C"
+
 BOOLEAN WINAPI SystemFunction036(PVOID, ULONG);
 
 #pragma comment(lib, "ws2_32.lib")
@@ -66,31 +67,10 @@ BOOLEAN WINAPI SystemFunction036(PVOID, ULONG);
 #pragma comment(lib, "Gdi32.lib")
 
 
-void EnumCapture()
-{
-    std::unique_ptr<webrtc::VideoCaptureModule::DeviceInfo> info(
-      webrtc::VideoCaptureFactory::CreateDeviceInfo());
 
-    int num_devices = info->NumberOfDevices();
-    if (!info) {
-        RTC_LOG(LERROR) << "CreateDeviceInfo failed";
-        return;
-    }
-    for (int i = 0; i < num_devices; ++i) {
-        char name[128];
-        char id[128];
 
-        info->GetDeviceName(i,name,128,id,128,nullptr,0);
-        int cap_len = info->NumberOfCapabilities(id);
-        for(int j = 0;j < cap_len;j++){
-            webrtc::VideoCaptureCapability p;
-            info->GetCapability(id,j,p);
-            qDebug()<<QString::asprintf("GetCapability:    %s %d %d ",id,p.width,p.height);
-        }
-        printf("%s\r\n",name);
-        //使用索引i创建capture对象
-    }
-}
+
+
 void InitCustomMetaType(){
     qRegisterMetaType<rtc::scoped_refptr<webrtc::I420BufferInterface>>("rtc::scoped_refptr<webrtc::I420BufferInterface>");
     qRegisterMetaType<rtc::scoped_refptr<webrtc::I420BufferInterface>>("rtc::scoped_refptr<webrtc::I420BufferInterface>&");
@@ -102,6 +82,7 @@ void InitCustomMetaType(){
 }
 
 
+
 int main(int argc, char *argv[])
 {
     InitCustomMetaType();
@@ -117,7 +98,11 @@ int main(int argc, char *argv[])
     QCoreApplication::setAttribute(Qt::AA_DisableHighDpiScaling);
     QApplication a(argc, argv);
     MainWindow w;
+    w.setFixedSize(1024,768);
+    w.setWindowTitle(QString("webrtc janus demo "));
 
     w.show();
     return a.exec();
 }
+
+
diff --git a/client/webrtc_demo/src/mainwindow.cpp b/client/webrtc_demo/src/mainwindow.cpp
index 1f012fb..3c5daca 100644
--- a/client/webrtc_demo/src/mainwindow.cpp
+++ b/client/webrtc_demo/src/mainwindow.cpp
@@ -2,7 +2,7 @@
 #include "ui_mainwindow.h"
 #include <QDebug>
 #include <QMessageBox>
-#include "MyCapturer.h"
+#include "camera_capture.h"
 #include <QThread>
 #include <windows.h>
 #include <Lmcons.h>
@@ -17,6 +17,50 @@ const char kCandidateSdpMlineIndexName[] = "sdpMLineIndex";
 const char kCandidateSdpName[] = "candidate";
 
 
+typedef  struct {
+    std::string id;
+    std::string name;
+    std::vector<webrtc::VideoCaptureCapability> caps;
+} VideoDevice;
+
+std::vector<VideoDevice> EnumCaptures()
+{
+    std::vector<VideoDevice>  ret;
+    std::unique_ptr<webrtc::VideoCaptureModule::DeviceInfo> info(
+      webrtc::VideoCaptureFactory::CreateDeviceInfo());
+
+    int num_devices = info->NumberOfDevices();
+    if (!info) {
+        RTC_LOG(LERROR) << "CreateDeviceInfo failed";
+        return ret;
+    }
+    for (int i = 0; i < num_devices; ++i) {
+        VideoDevice v;
+        char name[128];
+        char id[128];
+
+        info->GetDeviceName(i,name,128,id,128,nullptr,0);
+        int cap_len = info->NumberOfCapabilities(id);
+        for(int j = 0;j < cap_len;j++){
+            webrtc::VideoCaptureCapability p;
+            info->GetCapability(id,j,p);
+            qDebug()<<QString::asprintf("获取设备能力cap %d:   "
+                                        " %s %d %d %d %d",j,id,
+                                        p.width,p.height,p.videoType,p.interlaced);
+            v.caps.push_back(p);
+        }
+        qDebug()<<"device name is "<<name;
+        v.name = std::string(name);
+        v.id = id;
+
+        //使用索引i创建capture对象
+        ret.push_back(v);
+    }
+    return ret;
+}
+
+
+
 QString IceGatheringStateName(webrtc::PeerConnectionInterface::IceGatheringState w){
     switch (w) {
     case webrtc::PeerConnectionInterface::IceGatheringState::kIceGatheringNew:
@@ -52,7 +96,7 @@ QString IceConnectionStateName(webrtc::PeerConnectionInterface::IceConnectionSta
 
 
 MainWindow::MainWindow(QWidget *parent)
-    : QMainWindow(parent)
+    : QssMainWindow(parent)
     , ui(new Ui::MainWindow)
     ,mHandler(new rtc::RefCountedObject<WebrtcHanlder>())
     ,mSignalClient(nullptr)
@@ -62,6 +106,12 @@ MainWindow::MainWindow(QWidget *parent)
     ,mLocalVideoTrack(nullptr)
 {
     ui->setupUi(this);
+    std::vector<VideoDevice> devices = EnumCaptures();
+
+    for(auto itr = devices.begin();itr != devices.end();itr++){
+        ui->comboBox->addItem(QString::fromStdString(itr->name),QString::fromStdString(itr->name));
+    }
+
     ui->openGLWidget->show();
 
     TCHAR username[UNLEN + 1];
@@ -76,6 +126,9 @@ MainWindow::MainWindow(QWidget *parent)
             this,SLOT(on_local_sdp(QString)));
     connect((WebrtcHanlder*)(mHandler.get()),SIGNAL(OnRemoteTrack(webrtc::MediaStreamTrackInterface*)),
             this,SLOT(on_track_add(webrtc::MediaStreamTrackInterface*)));
+
+    mHandler->InitWebrtc();
+
 }
 
 MainWindow::~MainWindow()
@@ -102,7 +155,6 @@ WebrtcHanlder::WebrtcHanlder()
 
 int WebrtcHanlder::InitWebrtc()
 {
-
     m_peer_connection_factory_ = webrtc::CreatePeerConnectionFactory(
     nullptr /* network_thread */, nullptr /* worker_thread */,
     nullptr /* signaling_thread */, nullptr /* default_adm */,
@@ -133,7 +185,7 @@ int WebrtcHanlder::InitWebrtc()
     config, nullptr, nullptr, this);
 
     if (!m_peer_connection_) {
-    auto x = new QMessageBox(nullptr);
+        auto x = new QMessageBox(nullptr);
         x->setText("创建peerconnection失败");
         x->show();
         exit(0);
@@ -231,6 +283,7 @@ void WebrtcHanlder::SetRemoteCandidate(QString sdp)
 void WebrtcHanlder::CreateAnwer()
 {
     qDebug()<<"create answer";
+    qDebug()<<m_peer_connection_.get();
     m_peer_connection_->CreateAnswer(
         this, webrtc::PeerConnectionInterface::RTCOfferAnswerOptions());
     gLog()->Log((QString::asprintf("%s %d",__FILE__,__LINE__) +
@@ -267,7 +320,7 @@ void WebrtcHanlder::AddLocalTrack()
     gLog()->Log((QString::asprintf("%s %d",__FILE__,__LINE__) +
                  " m_peer_connection_ AddTrack" + kAudioLabel).toStdString());
     if(mVideoTrack == nullptr){
-        rtc::scoped_refptr<MyCapturer> video_device = new rtc::RefCountedObject<MyCapturer>();
+        rtc::scoped_refptr<CameraCapturer> video_device = new rtc::RefCountedObject<CameraCapturer>();
         if (video_device) {
             video_device->startCapturer();
             rtc::scoped_refptr<webrtc::VideoTrackInterface> video_track_(
@@ -446,7 +499,7 @@ void MainWindow::signal_response(int type,QJsonObject data)
 {
     qDebug()<<type<<data;
     switch (type) {
-    case 2004:
+    case 2004:  // RESP_LISTROOM
         this->mModel->clear();
         for (auto itr = data.begin();itr != data.end();itr++){
             auto item = new QStandardItem(itr.key());
@@ -454,7 +507,7 @@ void MainWindow::signal_response(int type,QJsonObject data)
             mModel->appendRow(item);
         }
         break;
-    case 2005:
+    case 2005:  // RESP_SENDSDP
     {
         auto sdp = data["sdp"].toString();
         auto remote_name = data["remote_name"].toString();
@@ -466,7 +519,7 @@ void MainWindow::signal_response(int type,QJsonObject data)
             mHandler->CreateAnwer();
         break;
     }
-    case 2006:
+    case 2006: //RESP_SENDCANDIDATE
     {
         auto candidate = data["candidate"].toString();
         auto remote_names = data["remote_name"].toString();
@@ -488,7 +541,6 @@ void MainWindow::itemClicked(QModelIndex index)
         qDebug()<<"请先连接信令服务";
         return;
     }
-    mHandler->InitWebrtc();
     this->mLocalVideoTrack = mHandler->VideoTrack();
     qDebug()<<mModel->item(index.row())->text();
 
diff --git a/client/webrtc_demo/src/mainwindow.h b/client/webrtc_demo/src/mainwindow.h
index 10568d8..efaef21 100644
--- a/client/webrtc_demo/src/mainwindow.h
+++ b/client/webrtc_demo/src/mainwindow.h
@@ -29,6 +29,7 @@
 #include "api/video/i420_buffer.h"
 #include "signal_client.h"
 #include <QStandardItemModel>
+#include "Qss.h"
 
 QT_BEGIN_NAMESPACE
 namespace Ui { class MainWindow; }
@@ -148,7 +149,7 @@ private:
     webrtc::AudioTrackInterface *mAudioTrack;
 };
 
-class MainWindow :public QMainWindow
+class MainWindow :public QssMainWindow
 {
     Q_OBJECT
 public:
diff --git a/client/webrtc_demo/src/mainwindow.ui b/client/webrtc_demo/src/mainwindow.ui
index 2fa6b9b..68b43e5 100644
--- a/client/webrtc_demo/src/mainwindow.ui
+++ b/client/webrtc_demo/src/mainwindow.ui
@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>1056</width>
-    <height>616</height>
+    <width>1166</width>
+    <height>776</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -73,7 +73,7 @@
       <item>
        <widget class="QLineEdit" name="lineEdit_2">
         <property name="text">
-         <string>ws://192.168.5.73:9555/ws</string>
+         <string>ws://192.168.5.192:9555/ws</string>
         </property>
        </widget>
       </item>
diff --git a/client/webrtc_demo/src/signal_client.cpp b/client/webrtc_demo/src/signal_client.cpp
index fac3d65..1b87103 100644
--- a/client/webrtc_demo/src/signal_client.cpp
+++ b/client/webrtc_demo/src/signal_client.cpp
@@ -160,7 +160,6 @@ void SignalClient::onSocketError(QAbstractSocket::SocketError error)
     qDebug()<<error;
     gLog()->Log((QString::asprintf("%s %d",__FILE__,__LINE__)   +
                  " WebSocket unconnected").toStdString());
-
 }
 
 void SignalClient::onReconenectTimeout()
diff --git a/client/webrtc_demo/src/video_capture.cpp b/client/webrtc_demo/src/video_capture.cpp
index 01435af..0ee77dd 100644
--- a/client/webrtc_demo/src/video_capture.cpp
+++ b/client/webrtc_demo/src/video_capture.cpp
@@ -79,9 +79,9 @@ void VcmCapturerTest::OnFrame(const webrtc::VideoFrame& frame) {
             std::chrono::system_clock::now().time_since_epoch()).count();
     static size_t cnt = 0;
 
-//    RTC_LOG(LS_INFO) << "OnFrame  "<<frame.width()<<" "<<frame.height()<<"  "
-//                   <<frame.size()<<" "<<frame.timestamp()<<frame.video_frame_buffer().get()->type()
-//                  <<" stride "<<frame.video_frame_buffer().get()->GetI420()->StrideY()<< frame.video_frame_buffer().get()->GetI420()->StrideU() ;
+    RTC_LOG(LS_INFO) << "OnFrame  "<<frame.width()<<" "<<frame.height()<<"  "
+                   <<frame.size()<<" "<<frame.timestamp()<<frame.video_frame_buffer().get()->type()
+                  <<" stride "<<frame.video_frame_buffer().get()->GetI420()->StrideY()<< frame.video_frame_buffer().get()->GetI420()->StrideU() ;
 
     int m_height = frame.height();
     int m_width = frame.width();
diff --git a/client/webrtc_demo/src/video_capturer_test.h b/client/webrtc_demo/src/video_capturer_test.h
index c199b2d..d5c8703 100644
--- a/client/webrtc_demo/src/video_capturer_test.h
+++ b/client/webrtc_demo/src/video_capturer_test.h
@@ -13,6 +13,10 @@
 #include <mutex>
 #include <QObject>
 
+
+void EnumCapture();
+
+
 class VideoCapturerTest : public QObject,
         public rtc::VideoSourceInterface<webrtc::VideoFrame>{
 Q_OBJECT
diff --git a/client/webrtc_demo/webrtc_demo.pro b/client/webrtc_demo/webrtc_demo.pro
index 1697823..d329001 100644
--- a/client/webrtc_demo/webrtc_demo.pro
+++ b/client/webrtc_demo/webrtc_demo.pro
@@ -1,6 +1,8 @@
 QT       += core gui websockets
 
 
+include(D:\\project\\c++qt\\qsswraper\\qsswraper.pri)
+RESOURCES += $$PWD/qss/qss.qrc
 
 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
 
@@ -21,7 +23,7 @@ INCLUDEPATH += third/include/
 LIBS += -L$$PWD/third/lib libwebrtc.lib  ole32.lib oleaut32.lib strmiids.lib yuv.lib
 
 SOURCES += \
-    src/MyCapturer.cpp \
+    src/camera_capture.cpp \
     src/cplaywidget.cpp \
     src/easylog.cpp \
     src/main.cpp \
@@ -31,7 +33,7 @@ SOURCES += \
     src/video_capturer_test.cpp
 
 HEADERS += \
-    src/MyCapturer.h \
+    src/camera_capture.h \
     src/cplaywidget.h \
     src/easylog.h \
     src/mainwindow.h \