Create webrtc connexion between two player

front/dist/resources/style/style.css

@@ -0,0 +1,81 @@
+.webrtc{
+    display: none;
+}
+.webrtc.active{
+    display: block;
+}
+.myCam{
+    display: none;
+}
+.myCam.active{
+    display: block;
+}
+.webrtc, .activeCam{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+}
+.webrtc video{
+    width: 100%;
+    height: 100%;
+}
+.myCam{
+    height: 200px;
+    width: 300px;
+    position: absolute;
+    right: 10px;
+    background: black;
+    border: none;
+    bottom: 20px;
+    max-height: 17%;
+    max-width: 17%;
+    opacity: 1;
+    transition: opacity 1s;
+}
+.myCam video{
+    width: 100%;
+    height: 100%;
+}
+.btn-cam-action div{
+    cursor: pointer;
+    position: absolute;
+    border: solid 0px black;
+    width: 64px;
+    height: 64px;
+    background: #666;
+    left: 6vw;
+    box-shadow: 2px 2px 24px #444;
+    border-radius: 48px;
+    transform: translateX(calc(-6vw - 96px));
+    transition-timing-function: ease-in-out;
+}
+.webrtc:hover .btn-cam-action.active div{
+    transform: translateX(0);
+}
+.btn-cam-action div:hover{
+    background: #407cf7;
+    box-shadow: 4px 4px 48px #666;
+    transition: 280ms;
+}
+.btn-micro{
+    bottom: 277px;
+    transition: all .3s;
+}
+.btn-video{
+    bottom: 177px;
+    transition: all .2s;
+}
+.btn-call{
+    bottom: 77px;
+    transition: all .1s;
+}
+.btn-cam-action div img{
+    height: 32px;
+    width: 40px;
+    top: calc(48px - 32px);
+    left: calc(48px - 35px);
+    position: relative;
+}