CodePen Embed - webRTC Type1 Preview

<div id="wrap">
  <section>
    <div class="pc">
      <article class="header">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </article>

      <article class="contents">
        <div class="toast" style='display:none'></div>
        <!-- 비디오 영역 -->
        <div class="webcam">
          <div class="login" style="display: block;">
            <p class="login-title">채팅방 설정</p>
            <div class="name">
              <label for="name">대화명</label>
              <input class="name" type="text" id="name" value="" placeholder="로그인 할 대화명을 입력 해주세요.">
              <p></p>
            </div>
            <button class="popupbtn">확인</button>
          </div>
          <div class="cam-area">

            <div class="cam-list">
            </div>
          </div>

          <!-- 비디오 버튼 영역 -->
          <div class="cam-footer">
            <p class="roomtitle"></p>
            <ul class="cam-btn">
              <li class="mic btn_on" onclick="mic_on_off(this)">
                <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_mic.png" alt="마이크 재생">
              </li>
              <li class="exit btn_on">
                <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/exit.png" alt="화상채팅 종료">
              </li>
              <li class="cam btn_on" onclick="cam_on_off(this)">
                <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_cam.png" alt="카메라 재생">
              </li>
            </ul>
            <p class="present-btn">
              <img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/present.png" alt="Present now"> Present now
            </p>
          </div>
        </div>
        <!-- 비디오 영역 끝 -->

      </article>
    </div>
    <!-- 샘플 화면 끝 -->
  </section>
</div>

body{
	/* background: #eff3f6; */
	font-family: "Noto Sans KR"; /* dr 변경 210630 */
	font-weight: 400;
}
/* #wrap{
	width: 1500px;
	height: 845px;
	display: inline-flex;
} */

/* 샘플 화면 메뉴 스타일 */
nav{
	flex-direction: column;
	width: 220px;
	height: 100%;
	border-right: 1px solid rgba(104,144,129,0.2);
	color: #0b2239;
}
nav p{
	font-size: 18px;
	font-weight: 700;
	margin:36px auto 160px;
	letter-spacing: -0.8px;
	text-align: center;
}
ul.navi li a{
	display: block;
	font-size: 18px;
	color: rgba(11,34,57,0.5);
	text-align: right;
	letter-spacing: -0.8px;
	margin: 60px 20px 0;
	position: relative;
	float: right;
}
ul.navi li a:hover, ul.navi li a.focus{ color: rgba(11,34,57,1); }
ul.navi li a.focus{ color: rgba(11,34,57,1); font-weight: 600; }
ul.navi li a.focus::after{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background:#0b2239;
	position: absolute;
	top: 6px;
	right: -25px;
	content: '';
}
/* section{
	margin: 55px auto;
} */

/* 유튜브 스타일 */
div.pc{
	width: 1200px;
	height: 675px;	
	background: #f7fafb;
	border: 8px solid #fff;	
	border-radius: 15px;
	/* box-shadow: 10px 17px 41px 0 rgba(212,220,233,0.7); */
	overflow: hidden;
}
div.mobile{
	width: 375px;
	height: 675px;	
	background: #f7fafb;
	border: 8px solid #fff;
	border-radius: 15px;
	box-shadow: 10px 17px 41px 0 rgba(212,220,233,0.7);
	overflow: hidden;
	float: left;
}
article.header{ width: 100%; background: #0b2239; }
article.header ul{ margin-left: 18px; padding: 10px 0; }
article.header ul li{
	width: 10px;
	height: 10px;	
	background: #fff;
	border-radius: 50%;
	display: inline-block;
	margin-right: 5px;
}
article.header ul li:nth-child(2){ background: #2bc48a;}
.header span i{ font-size: 11px; color: #fff; padding: 10px 15px; }
div.pc article.contents{ margin:20px; display: flex;}

/* 비디오 영역 스타일 */
div.pc article.contents div.video{
	width: 800px;
	height: 450px;
	background: #999;
	margin-right: 20px;
	margin-bottom: 10px;
}
div.pc article.contents ul.like{
	color: #555;
	vertical-align: middle;
	float: right;
	margin-top: 10px;
}
ul.like li{ display: inline-block; vertical-align: middle; text-align: right; font-size: 12px;}
ul.like li i{ font-size: 25px; }
ul.like li i:hover{ color: #ff2d2d;}
div.mobile article.contents div.video{
	width: 100%;
	height: 210px;
	background: #999;
}

/* 채팅 영역 스타일 */
div.pc .chat{ width: 340px; position: relative; }
div.moblie .chat{ width: 100%; height: 435px; }

/* 로그인 스타일 */
.login{
	width: 280px;
	background: #fff;
	box-shadow: 3px 4px 8px 0 rgba(240,240,240,0.5);
	border:1px solid #eaeaea;
	box-sizing: border-box;
	display: none;
}
.pc .login{ position: absolute; top: 135px; left: 440px; }
.mobile .login{ margin: 45px auto 0; }
.login p.login-title{
	font-size: 14px;
	letter-spacing: -0.64px;
	color:#fff;
	padding: 17px 99px;
	background: #2bc48a;
}
.login .profile { width: 240px; margin: 20px auto 0; }
.login .profile p, .login .room label{ font-size: 14px; color: #999; display: block;}
.login .profile p, .login .name label{ font-size: 14px; color: #999; display: block;}
.login .profile ul{display: flex; flex-direction: row; justify-content: space-between; margin-top: 7px;}
.login .profile ul li a{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #efefef;
	box-sizing: border-box;
	overflow: hidden;
	display: inherit;
	opacity: 0.5;
}
.login .profile ul li a:hover{ border: 3px solid #2bc48a; opacity: 1; }

.login .profile ul li a.active {
	border: 3px solid #2bc48a;
	opacity: 1;
}
.login .room{ width: 240px;	margin: 20px auto 0; }
.login .room input[type="text"]{
	width: 240px;
	height: 24px;	
	border: 1px solid #ededed;
	border-radius: 0;
	outline:0;
	margin: 10px 0 15px;
}

.login .name{ width: 240px;	margin: 20px auto 0; }
.login .name input[type="text"]{
	width: 240px;
	height: 24px;	
	border: 1px solid #ededed;
	border-radius: 0;
	outline:0;
	margin: 10px 0 15px;
}
.login .name input:focus{ border:1px solid #2bc48a;}

.login button{
	appearance: none;
	font-size: 12px;
	color: #6c7b85;
	background: #e3e9ed;
	padding: 7px 13px;
	border: 0;
	outline: 0;
	margin: 0 auto 20px;
	display: block;
}
.login button:hover{
	cursor: pointer;
	background: #2bc48a;
	color: #fff;	
}

/* 에러 팝업 210628 추가*/
.errorpopup {
	line-height: 1.5;
	font-size: 14px;
	width: 330px;
	position: absolute;
	top: calc(50% - 80px);
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	padding: 30px 20px;
	box-sizing: border-box;
	z-index: 100;
	background: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	display: none;
}

.errorpopup p i {
	color: #dd2c00;
	font-size: 30px;
	margin-bottom: 10px;
}
.popupbtn {
	font-size: 13px;
	display: inline-block;
	clear: both;
	padding: 5px 15px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	margin: 10px 10px 0;
}

.popupbtn:hover {
	background: #2bc48a;
}

.custompopup {
	line-height: 1.5;
	font-size: 14px;
	width: 330px;
	position: absolute;
	top: calc(50% - 80px);
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	padding: 30px 20px;
	box-sizing: border-box;
	z-index: 100;
	background: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	display: none;
}

/* 채팅 도움말 내용 */
.use_help{
	display: none; /* seoeun 변경 210628 */
	position: absolute;
	top: 41px;
	left: 0;
	z-index: 100;	
}
.help_contents{
	height: 524px;
	background: #FFF;
	padding: 15px 20px 15px 15px;
	box-sizing: border-box;
	overflow-y: auto;
}
.use_help ul{
	padding-bottom: 20px;
}
.use_help li{
	font-size: 12px;
	line-height: 1.5;
	padding: 0 0 5px 9px;
	color: #555;
}
.use_help li.help_title{
	font-size: 14px;
	color: #333;
	font-weight: bold;
}
.use_help li span.btn_send{
	font-size: 12px;
	padding: 3px 5px;
	color: #fff;
	margin: 0;
	display: inline-block;
}
.use_help li img{
	width: 100%;
}
.btn_help_close{
	font-size: 14px;
	color: #6c7b85;
	background: #e3e9ed;
	padding: 12px 9px;
	text-align: center;
}


/* 채팅 내용 스타일 */
.pc .chat_field{ border: 1px solid #eaeaea; height: 565px;}
.mobile .chat_field{ height: 434px; }
.chat_field{
	width: 100%;
	background: #fff;
	box-shadow: 6px 11px 21px 0 rgba(212,220,233,0.2);
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	display: block;
}

/* 채팅방 이름 */
.chat_name{
	font-size: 15px;
	color:#fff;
	background: #2bc48a;
	padding:12px 15px;
}
.chat_name ul li{ display: inline-block; vertical-align: middle;}
.chat_name ul li:first-child{width: 243px}
.mobile .chat_name ul li:first-child{width: 210px; text-align: left;}
.mobile .chat_name ul.like li:nth-child(2){
	width: 80px; /* dr 변경 210624 */
	text-align: right;
	font-size: 12px;
	opacity: 0.8;
}
.mobile .chat_name ul.like li:last-child i:hover{color: #fff;}  /* dr 변경 210630 */
.chat_name ul li a{font-size: 12px; color: #fff; line-height: 15px;}
.chat_name ul li a:hover{text-decoration: underline;}
.mobile .chat_name ul li:nth-child(3) a{font-size: 15px; margin-right: 5px;}/*seoeun 변경 210701 */
.pc .chat_name ul li:last-child a{font-size: 15px; margin-left: 10px;}


/* 채팅 대화 내용 */
.pc .chat_contents{
	width: 100%;
	max-height: 426px;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 12px;
	color:#333;
	line-height: 1.5;
}
.mobile .chat_contents{
	width: 100%;
	max-height: 351px; /* dr 변경 210630 */
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 12px;
	color:#333;
	line-height: 1.5;
}
/* 대화 내용 스타일 */
.entery, .content, .notice, .whisper, .chatout, .warn{ margin:15px; }
.notice, .whisper{ background: #f4f4f4; padding: 12px; display: flex; }
.entery{ color: #2a9956; text-align: center; }
.content .name{ color : #999; margin-right: 5px;}/* dr 변경 210626 */
.content .comment{ color: #333; }
.notice i{ color: #fc3232; padding-right: 12px; }
.notice span{ color: #666; }
.whisper i{ color: #1d75bd; padding-right: 12px; }
.whisper .name{ color: #1d75bd; font-weight: bold; }
.whisper .comment{ color: #666; }
.chatout{ color: #fc3232; text-align: center; }

/* 대화명 클릭 시 노출 팝업 스타일 */
.popupLayer{
	display: none;
	background: #fff;
	box-shadow: 3px 6px 10px 0 rgba(177,184,188,0.5);
	font-size: 14px;
}
.popup_content li {margin: 10px 15px; }
.popup_content li i{ padding-right: 6px; }
.popup_content li a{ color: #666; }
.popup_content li a:hover{ color: #333; }
#whisper{ display: none; }
#whisper form{ margin-bottom: 10px; }
#whisper input{
	border: 1px solid #eaeaea;
	font-size: 12px;
	padding: 7px 5px;
	outline: none;
	margin-right: 5px;
}
#whisper button{
	font-size: 12px;
	color: #fff;
	background: #2bc48a;
	outline: none;
	padding: 7px;
	border: none;
}

/* 메시지 작성 스타일 */
.pc .chat_input{
	width: 100%;
	position: absolute;
	bottom: 40px;
	background: #fff;
	border-top: 1px solid #f4f4f4;
	box-sizing: border-box;
}
.mobile .chat_input{
	width: 100%;
	position: absolute;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #f4f4f4;
	box-sizing: border-box;
}
.mobile .chat_input div{display: inline-block;}
.pc .chat_input .name{ font-size: 12px; color: #2a9956; padding: 12px 12px 5px;}
.pc .chat_input .textbox{ font-size: 12px; color: #333;}
.mobile .chat_input .profile_img{
	width: 24px;
	height: 24px;
	border: 1px solid #efefef;
	border-radius: 50%;
	margin: 7px 0 7px 9px;
	box-sizing: border-box;
	vertical-align: top;
}
.pc .textbox[contenteditable=true] {
   	color: #333;
    font-size: 12px;
    padding: 0 12px 12px;
   	line-height: 18px;
    box-sizing: border-box;
}
.mobile .textbox[contenteditable=true] {
   	width: 279px; /* dr 변경 210630 */
   	min-height: 37px;
   	color: #333;
    font-size: 12px;
   	line-height: 1.5;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 10px;
    border-right: 1px solid #efefef;
}
[contenteditable=true]:empty:before{ content: attr(placeholder); color: #999;  display: block; }

.room::placeholder {
	color: #999;
	font-style: italic;
	font-size: 0.7em;
}

.name::placeholder {
	color: #999;
	font-style: italic;
	font-size: 0.7em;
}

/* 6/30 수정된 내용(mobile 프로필 이미지 추가) */
.mobile .profile_img{
	width: 26px;
	height: 26px;
	border: 1px solid #efefef;
	border-radius: 50%;
	box-sizing: border-box;
	vertical-align: top;
}
.mobile .chat_input .profile_img{
	margin: 8px 0 8px 10px;
}
.mobile .content ul li{ display: inline-block; vertical-align: top;}
.mobile .content ul .user_img{ margin-right: 5px;}
.mobile .content ul .user_img img{ display: inline-block; }
.mobile .content ul .user_comment{
	width: calc( 100% - 35px );
	line-height: 1.5;
	margin: 4px 0;
}
.mobile .content ul .user_comment .name{
	display: inline-block;
	margin-right: 8px;
}

/* 이모지 및 전송 버튼 스타일 */
.emoji_contents{ padding:10px; display: none; flex-wrap: wrap; background: #fff;}
.emoji_contents a{ display: inline-table; width: 22px; height: 22px; padding: 3px; } /* seoeun 수정 210629 */
.emoji_contents a:hover { /* seoeun 추가 210629 */
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat_input_btn{
	width: 100%;
	height: 40px;
	background: #fff;
	position: absolute;
	bottom: 0;
}
.emoji{ float: left; position: relative; }
.emoji a:hover{ color: #2bc48a; }
.send{ float: right; font-size: 14px; color: #999; display: flex; flex-direction: row;}
.ico_emoji, .ico_keyboard{
	font-size: 20px;
	color: #999;
	position: absolute;
	top: 10px;
	left: 10px;
	display: none;
}
.send li{ vertical-align: middle; }
.btn_send{ background: #2bc48a; padding:13px; margin-left: 10px; }
.btn_send a{ color: #fff; font-size: 12px;}
.mobile .btn_send{ float: right; padding: 12px; line-height: 14px; margin: 0;}
/* 채팅 숨기기 및 보이기 버튼 스타일 */
.btn_hide, .btn_show{
	font-size: 14px;
	color: #6c7b85;
	background: #e3e9ed;
	padding: 12px 9px;
	text-align: center;
	display: none;
}

/* button 공통 사용 스타일 */
.show{ display: block; }

/* 카카오톡 스타일 */
div.kakao{
	width: 375px;
	height: 675px;	
	background: #e8f0f3;
	border: 8px solid #fff;
	border-radius: 15px;
	box-shadow: 10px 17px 41px 0 rgba(212,220,233,0.7);
	overflow: hidden;
	position: relative;
	float: left;
}
.kakao .login{ margin: 178px auto 0; }
.talk_field{ position: relative; height: 644px }
.opponent_profile { width: 100%; background: #d5e3e8;}
.opponent_profile ul{padding: 10px;}
.opponent_profile ul li{
	display: inline-block;
	font-size: 16px;
	color: #333;
	vertical-align: middle;
}
.kakao .profile_img{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #efefef;
	background: #fff;
	box-sizing: border-box;
}
 .kakao .room_img{  /*seoeun 추가(채팅방 아이콘) 210628 */
	width: 30px;
	height: 30px;
}
.talk_contents{ height: 524px; padding:15px; overflow-y: auto; }
.talk_contents .notice{ font-size: 12px; text-align: center; color: #666; background: none; display: block; padding: 0; margin: 0 auto 25px;  }
.opponent{ margin-bottom: 25px; display: flex; justify-content: flex-start;} 
.user{ margin-bottom: 25px; display: flex; justify-content: flex-end;}
.opponent div{ display: inline-flex;}
.user div{ display: inline-flex; flex-direction: row-reverse; justify-content: flex-end;}
.opponent_talk{ margin-left: 13px; position: relative; }
.user_talk{ margin-right: 13px; position: relative; }
.opponent_name, .user_name{ width: 100%; margin-bottom: 6px; font-size: 12px; color: #333; }
.user_name{ text-align: right; }
.opponent_text_balloon{
	max-width: 200px;
	padding: 10px;
	background: #fff;
	font-size: 12px;
	color: #333;
	border-radius: 5px;
	line-height: 1.5;
	word-break: break-all; /* seoeun 추가 210628 */
}
.opponent_text_balloon::before{
	content: url("../img/opponent_text_balloon.svg");
	position: absolute;
	top: 20px ;
	left: -10px;
}
.user_text_balloon{
	max-width: 200px;
	padding: 10px;
	background: #a8e8d1;
	font-size: 12px;
	color: #333;
	border-radius: 5px;
	line-height: 1.5;
	word-break: break-all; /* seoeun 추가 210628 */
}
.user_text_balloon::after{
	content: url("../img/user_text_balloon.svg");
	position: absolute;
	top: 20px ;
	right: -10px;
}
.talk_input{ width: 100%; background: #fff; position: absolute; bottom: 0; }
.talk_input .textbox{ width: 310px; float: left; }
.talk_input .textbox[contenteditable=true] {
   	width: 316px;
   	min-height: 40px;
   	color: #333;
    font-size: 12px;
   	line-height: 1.5;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 9px 10px;
    border-right: 1px solid #efefef

}
.talk_input .btn_send { padding: 12px; margin: 0; float: right; }

/* 라이브커머스 스타일 */
div.livecommerce{
	width: 375px;
	height: 675px;	
	border-radius: 15px;
	box-shadow: 10px 17px 41px 0 rgba(212,220,233,0.7);
	overflow: hidden;
	position: relative;
	border: 8px solid #fff;
	float: left;
}
.livecommerce .video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	/* 임시 배경 */
	background: url('https://img.youtube.com/vi/l82gMvnnUyA/0.jpg') no-repeat; /* dr 변경 210630 */
	background-size: cover;
}
.dim{
	min-width: 100%;
	min-height: 100%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99; /* dr 변경 210630 */
	/*display: none;*/ /* dr 변경 210630 */
}
.livecommerce .login{
	margin: 247px 40px;
	box-shadow: 3px 4px 8px 0 rgba(0,0,0,0.3);
	display: block;
	position: absolute;
	z-index: 100;
}
.livecommerce .title{
	width: 100%;
	height: 139px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../img/livecommerce_titleBG.png');
}
.livecommerce .title p{
	width: 335px;
	font-size: 14px;
	color: #fff;
	line-height: 1.7;
	margin: 20px auto;
	text-align: left;
}
.livecommerce .title .close{ /* dr 생성 210630 */
	text-align: right;
}
.livecommerce .title span{
	font-size: 11px;
	color: #fff;
	border-radius: 3px;
	background: #ec2014;
	padding: 2px 5px;
	margin-right: 6px;
}
.livecommerce .chat{
	position: absolute;
	bottom: 0;	
	width: 100%;
	height: 340px;	
	background: url('../img/livecommerce_chatBG.png');
	margin-top: 196px;
}
.livecommerce .chat_contents{
	padding: 0 15px;
	margin-top: 80px;
	height: 180px;
	overflow-y: auto;
	font-size: 12px;
	color: #fff;	
}
.livecommerce .chat_contents::-webkit-scrollbar { width: 3px;}
.livecommerce .chat_contents::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0);}
.livecommerce .chat_contents::-webkit-scrollbar-track{ background: rgba(0,0,0,0);}
.livecommerce .chat_contents p { padding: 5px 0; line-height: 1.5;}
.livecommerce .marketer{ text-align: center; color: #fff000; }
.livecommerce .name{ color: #c3c3c3; } /* dr 변경 210625 */
.livecommerce span.name{ color: #c3c3c3; margin-right: 5px;} /* dr 변경 210625 */
.livecommerce .livenotice{ text-align: center; color: #00ff7e; }
.livecommerce .chat_input{ 
	margin: 20px 15px;
	border-radius: 20px;
	border: 1px solid #fff;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	display: inline-flex;
	background: rgba(0,0,0,0.5);
}
.livecommerce .chat_input .textbox{
	width: 220px;
	color: #fff;
	font-size: 12px;
	margin: 0 15px;
	padding: 10px 0;
	line-height: 1.5;
}
.livecommerce .chat_input .send{ align-items: center; }
.livecommerce .chat_input .send a{
	font-size: 12px;
	color: #fff;
	padding: 10px;
	border-left: 1px solid #b0b0b0;
}
.livecommerce .like i{ /* dr 변경 210625 */
	position: absolute;
	bottom: 35px;
	right: 21px;
	font-size: 18px;
	color: #fff;
	transform: all;
	transition: 0.2s ;
}
.livecommerce .like span{ /* dr 변경 210625 */
	width: 50px;
	position: absolute;
	bottom: 20px;
	right: 5px;
	font-size: 8px;
	color: #fff;
	transform: all;
	transition: 0.2s ;
	text-align: center;
}
.livecommerce .like i:hover{ /* dr 변경 210625 */
	position: absolute;
	bottom: 33px;
	right: 18px;
	font-size: 24px;
	color: #ff2d2d;
}

/* 추가 CSS 210722 */ 
.download_pc{
	margin-left: 810px;
}
.download_mobile{
	margin-left: 20px;
	float: left;
}
.download_mobile .download_btn{
	display: block;
}
.download_pc .download_btn{
	display: inline-block;
}
.download_btn a{
	display: block;
	width: 200px;
	padding: 15px 0;
	text-align: center;
	background: #dae3e8;
	color: #6c7b85;
	border-radius: 8px;
	margin-bottom: 10px;
}
.download_btn a:hover{ background: #2bc48a; color: #fff;}

/*section.chatintro{ margin: 55px 0; }*/
.chatintro h1{
	text-align: center;
	font-size: 25px;
	color: #0b2239;
	line-height: 1.3;
	margin-bottom: 50px;
	font-weight: normal;
}
.chatintro div{
	margin: 0 auto;
	padding-bottom: 50px;
	display: flex;
	align-items: center;
}
.chatintro div img{
	width: 200px;
	float: left;
}
.chatintro .intro{
	display: inline-block;
	color: #666;
	margin: 0 0 0 20px;
}
.chatintro .intro p.title{
	font-size: 20px;
	font-weight: bold;
	color: #2bc48a;
	line-height: 2;
}
.chatintro .intro p.subtitle{
	font-size: 14px;
	line-height: 1.2;
}

/* 211020 추가CSS */
.admin { color: #1342dc; }
.admin a.name { font-weight: bold; color: #1342dc; }
.admin_kakao_name { width: 100%; margin-bottom: 6px; font-size: 12px; font-weight: bold; color: #1342dc; }
.admin_livecommerce { color: #68acff; }
.admin_livecommerce span.name { font-weight: bold; margin-right: 5px; color: #68acff;}
.admin_livecommerce span.adm_whisper { margin-right: 5px; color: #68acff;}
.admin_text_balloon{
	max-width: 200px;
	padding: 10px;
	background: #A3E4FB;
	font-size: 12px;
	color: #333;
	border-radius: 5px;
	line-height: 1.5;
	word-break: break-all; /* seoeun 추가 210628 */
}
.admin_text_balloon::before{
	content: url("../img/admin_text_balloon.svg");
	position: absolute;
	top: 20px ;
	left: -10px;
}

/* 211112 추가CSS - webRTC 샘플화면2 스타일 */

div.webcam { width: 1160px; height: 605px; position: relative;}
div.webcam div.cam-area { width: 100%; height: 530px;}
div.cam-area div.mycam { width: 942px; height: 530px; display: inline-block; float: left; background: #292929; position: relative;}
div.mycam div.camvideo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
div.mycam div.camvideo img.nocam { position: absolute; top: 165px; left: 371px; display: none;}
div.mycam div.camvideo img.active { display: block; }
div.mycam img.nomic { position: absolute; top: 10px; right: 10px; display: none; z-index: 1000;}
div.mycam img.active { display: block; }
div.mycam div.cam-name { width: 942px; height: 86px; position: absolute; bottom: 0; left: 0; background: url('../img/webRTC/mycam_dim.png') no-repeat; z-index: 100;}
div.mycam div.cam-name p { width: 902px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 100; font-size: 13px; color: #fff; margin: 50px auto 20px; padding: 2px 0;}

div.cam-area div.cam-list { width: 218px; height: 530px; overflow: overlay; position: relative; display: inline-block; float: left;}
div.cam-list::-webkit-scrollbar { width: 6px;}
div.cam-list::-webkit-scrollbar-thumb { background: hsla(0, 0%, 42%, 0.49); border-radius: 3px;}
div.cam-list div.cam-wrap{width: 218px; height: 100%; position: absolute; top: 0; left: 0;}
div.cam-list div.camvideo-wrap { width: 218px; height: 123px; background: #292929; display: inline-block; float: left; border: 0; position: relative;}
div.camvideo-wrap div.camvideo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1px; }
div.camvideo-wrap div.camvideo img.nocam { margin: 31px auto; display: none; }
div.camvideo-wrap div.camvideo img.active { display: block; }
div.camvideo-wrap img.nomic { position: absolute; top: 10px; right: 10px; display: none;}
div.camvideo-wrap img.active { display: block; }
div.camvideo-wrap div.cam-name { width: 218px; height: 57px; position: absolute; bottom: 0; left: 0; background: url('../img/webRTC/dim.png') no-repeat; z-index: 100;}
div.cam-name p { width: 188px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 100; font-size: 13px; color: #fff; margin: 30px auto 10px; padding: 2px 0;}


div.webcam div.cam-footer { width: 100%; height: 75px; background: #fff; border: 1px solid #efefef; box-sizing: border-box;}
div.cam-footer p.roomtitle { width: 250px; margin: 30px 0 30px 20px; font-weight: 300; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 16px; letter-spacing: -0.8px; color: #444; float: left;}
div.cam-footer ul.cam-btn{ float: left; margin-left: 220px; vertical-align: middle;}
ul.cam-btn li { display: inline-block; width: 50px; height: 50px; box-sizing: border-box; margin: 13px 7px 12px; border-radius: 25px;  transform: all;}
ul.cam-btn li.btn_on{ border: 1px solid #dedede; transition: 0.5s; background: #fff;}
ul.cam-btn li.btn_on:hover { background: #e3e9ed; transition: 0.5s; cursor: pointer;}
ul.cam-btn li.btn_off { background: #ea4335; transition: 0.5s; border: 0;}
ul.cam-btn li.btn_off:hover { background: #b63227; transition: 0.5s; cursor: pointer;}
ul.cam-btn li img { display: grid; width: fit-content; margin: 0 auto; vertical-align: middle;}
div.cam-footer p.present-btn{ width: 120px; height: 75px; float: right; font-size: 13px; color: #6c7b85; text-align: center;}
div.cam-footer p.present-btn:hover { background: #e3e9ed; transition: 0.5s; cursor: pointer;}
p.present-btn img { display: block; width: fit-content; margin: 20px auto 6px; }
.toast {
    width: 250px;
    height: 20px;
    height:auto;
    position: fixed;
    left: 600px;
    margin-left:-125px;
    top: 600px;
    z-index: 9999;
    background-color: #383838;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 15px;
    padding: 10px;
    text-align:center;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

var channelKey = "YUcxwPRjTX-oVdUQqfLEE-20231212121518";

// login.js
const vChatCloud = new VChatCloud();
let channel, userNick, userKey; //, channelKey;

var getParameters = function(paramName) {
    // 리턴값을 위한 변수 선언
    var returnValue;

    // 현재 URL 가져오기
    var url = location.href;

    // get 파라미터 값을 가져올 수 있는 ? 를 기점으로 slice 한 후 split 으로 나눔
    var parameters = (url.slice(url.indexOf('?') + 1, url.length)).split('&');

    // 나누어진 값의 비교를 통해 paramName 으로 요청된 데이터의 값만 return
    for (var i = 0; i < parameters.length; i++) {
        var varName = parameters[i].split('=')[0];
        if (varName.toUpperCase() == paramName.toUpperCase()) {
            returnValue = parameters[i].split('=')[1];
            return decodeURIComponent(returnValue);
        }
    }
};


$(function() {
    // channelKey = getParameters('channelKey');
    let p = $('div.login').show();

    $('button.popupbtn', p).click(function() {
        let r = { nick: $('input#name', p).val() };
        if (r.nick) {
            joinRoom(channelKey, 'xxxxxxxx'.replace(/[xy]/g, function(a, b) { return (b = Math.random() * 16, (a == 'y' ? b & 3 | 8 : b | 0).toString(16)) }), r.nick, function(err, history) {
                if (err) {
                    console.log(err)
                    res.toastPopup((errMsg[err.code] == undefined) ? err.code : errMsg[err.code].kor);
                    vChatCloud.disconnect();
                } else {
                    p.hide();
                    $("#wrap > section > div > article.contents > div.webcam > div.cam-footer > p.roomtitle").text(channel.roomName);
                    // 이벤트 바인딩 시작
                    videoInit();
                }
            });
        }
    });

    $('.exit.btn_on').click(function() {
        exit(p)
    })

    $('#wrap > section > div > article.contents > div.webcam > div.cam-footer > p.present-btn').click(function() {
        if (channel) {
            channel.toggleRTCMedia('display')
        } else {
            res.toastPopup("로그인을 해주세요");
        }
    })
})

function exit(p) {
    if (channel) {
        var exit_chk = confirm('종료 하시겠습니까?')
        if (!exit_chk)
            return;

        $("#wrap > section > div > article.contents > div.webcam > div.cam-footer > p.roomtitle").text('')
        p.show();
        $('.cam-footer .cam-btn .mic').off("click.rtc")
        $('.cam-footer .cam-btn .cam').off("click.rtc")
        vChatCloud.disconnect();
        $("#likeCounter").text("0");
        channel = undefined;
    } else {
        res.toastPopup("로그인을 해주세요");
    }
}

function joinRoom(roomId, clientKey, nickName, callback) {
    // vchatcloud 객체
    channel = vChatCloud.joinChannel({
        roomId: roomId,
        clientKey: clientKey,
        nickName: nickName
    }, function(error, history) {
        if (error) {
            if (callback) return callback(error, null);
            return error;
        }
        callback(error, history);
    })
}

function openError(code, callback) {
    let p = $('div.errorpopup').hide();
    if (errMsg[code] == undefined) {
        $('p:nth-child(2)', p).text(code);
    } else {
        $('p:nth-child(2)', p).text(errMsg[code].kor);
    }
    $('a', p).off().click(function() { p.hide(); if (typeof callback == 'function') { callback() } });
    p.show();
}

// rtc.js
let res, myWrap, listWrap;

window.addEventListener('load', function() {
    // 리소스 로드
    if (res === undefined) {
        res = new resources('.toast', 400, 1000, 400);
    }
    myWrap = $('#wrap > section > div > article.contents > div.webcam > div.cam-area');
    listWrap = $('#wrap > section > div > article.contents > div.webcam > div.cam-area > div.cam-list');
});

function mic_on_off(item) {
    if (channel) {
        var chk = $(item).attr('class');
        var img = $(item).children('img')[0];
        var cam_mic = $('div[name=my_cam]').children('img')[0];
        if (chk == 'mic btn_on') {
            $(item).attr('class', 'mic btn_off');
            $(img).attr('src', 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/off_mic.png');
            $(cam_mic).show();
            res.toastPopup("마이크 꺼짐.");
        } else {
            $(item).attr('class', 'mic btn_on');
            $(img).attr('src', 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_mic.png');
            $(cam_mic).hide();
            res.toastPopup("마이크 켜짐.");
        }
    } else {
        res.toastPopup("로그인을 해주세요");
    }
}

function cam_on_off(item) {
    if (channel) {
        var chk = $(item).attr('class');
        var img = $(item).children('img')[0];
        var video = $('div[name=my_cam]').children('div.camvideo')[0];

        if (chk == 'cam btn_on') {
            $(item).attr('class', 'cam btn_off');
            $(img).attr('src', 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/off_cam.png');
            res.toastPopup("카메라 꺼짐.");
        } else {
            $(item).attr('class', 'cam btn_on');
            $(img).attr('src', 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_cam.png');
            res.toastPopup("카메라 켜짐.");
        }
    } else {
        res.toastPopup("로그인을 해주세요");
    }
}

function videoInit() {
    // 채널에 local video or audio 추가시
    channel.on('rtcLocalStreamAppend', function(event) {
        let stream = event.target;
        let html = $('div[name=my_cam]', myWrap);
        if (!html.length) {
            html = $(res.myVideo);
            myWrap.prepend(html);
        }
        let video = $('video', html)[0];
        video.srcObject = stream;
        channel.setRTCLocalMedia(video)
    });
    channel.on('rtcLocalStreamRemove', function(event) {
        let html = $('div[name=my_cam]', myWrap);
        if (html.length) {
            html.remove();
        }
    });
    channel.on('rtcRemoteStreamAppend', function(event) {
        let stream = event.target;
        let html = $(`div[name=${event.clientKey}]`, listWrap);
        if (!html.length) {
            html = $(res.remoteVideo).attr({ name: event.clientKey });
            listWrap.append(html);
            $('.cam-name p', html).html(event.client.nickName);
        }
        let video = $('video', html)[0];
        video.srcObject = stream;

        $('.nocam', html).toggleClass('active', (stream.getVideoTracks().length == 0));
        $('.nomic', html).toggleClass('active', (stream.getAudioTracks().length == 0));

        channel.setRTCRemoteMedia(video, event.clientKey)
    });
    channel.on('rtcRemoteStreamRemove', function(event) {
        let html = $(`div.camvideo-wrap[name=${event.clientKey}]`, listWrap);
        if (html.length) {
            html.remove();
        }
    });

    channel.on('rtcLocalAudioChanged', function(event) {
        console.log("Local audio", event)
        let is_mic = event.enable;
        let html = $('div[name=my_cam]', myWrap);
        $('.nomic', html).toggleClass('active', !is_mic);
        $('.cam-footer .cam-btn .mic').off('.rtc').on('click.rtc', function() {
            channel.toggleRTCAudioControl(!is_mic);
        })
        $('.cam-footer .cam-btn .mic').toggleClass('btn_on', is_mic).toggleClass('btn_off', !is_mic);
        $('.cam-footer .cam-btn .mic img').attr('src', is_mic ? 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_mic.png' : 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/off_mic.png');
    });

    channel.on('rtcLocalVideoChanged', function(event) {
        console.log("Local video", event)
        let is_cam = event.enable;
        let html = $('div[name=my_cam]', myWrap);
        $('.nocam', html).toggleClass('active', !is_cam);
        $('.camvideo video', html).css('display', is_cam ? '' : 'none');
        $('.cam-footer .cam-btn .cam').off('.rtc').on('click.rtc', function() {
            channel.toggleRTCVideoControl(!is_cam);
        })
        $('.cam-footer .cam-btn .cam').toggleClass('btn_on', is_cam).toggleClass('btn_off', !is_cam);
        $('.cam-footer .cam-btn .cam img').attr('src', is_cam ? 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/on_cam.png' : 'https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/off_cam.png');
    });

    channel.on('rtcRemoteAudioChanged', function(event) {
        console.log("Remote audio", event)
        let is_mic = event.enable;
        let html = $(`div.camvideo-wrap[name=${event.clientKey}]`, listWrap);
        $('.nomic', html).toggleClass('active', !is_mic);
    });

    channel.on('rtcRemoteVideoChanged', function(event) {
        console.log("Remote video", event)
        let is_cam = event.enable;
        let html = $(`div.camvideo-wrap[name=${event.clientKey}]`, listWrap);
        $('.nocam', html).toggleClass('active', !is_cam);
        $('.camvideo video', html).css({ 'display': is_cam ? '' : 'none' });
    });
}

// video 태그 리소스
class resources {
    constructor(target, in_fi, in_de, in_fo) {
        this.toastLayer = $(target);
        this.fi = in_fi;
        this.de = in_de;
        this.fo = in_fo;
    }
    get myVideo() {
        return '<!-- 내 비디오 --><div class="mycam" name="my_cam"><div class="camvideo"><video autoplay style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;"></video><img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/mycam-nocam.png" class="nocam" alt="영상없음"></div><img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/mycam-nosound.png" class="nomic" alt="소리없음"><div class="cam-name"><p>나</p></div></div>';
    }
    get remoteVideo() {
        return '<div class="camvideo-wrap"><div class="camvideo"><video autoplay style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;"></video><img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/user.png" class="nocam" alt="영상없음"></div><img src="https://www.vchatcloud.com/chat-demo/iframe/iframe_rtc_2/img/webRTC/nosound.png" class="nomic" alt="소리없음"><div class="cam-name"><p>사용자 이름 노출 영역입니다.</p></div></div>';
    }
    toastPopup(msg) {
        this.toastLayer.finish().fadeIn(this.fi).delay(this.de).fadeOut(this.fo).text(msg);
    }
}

Run Pen

This Pen is owned by e7works on CodePen.

See more by @e7works on CodePen

External CSS

External JavaScript