안녕하세요 이번에는Webrtc 1:1 영상통화를 위한 html/css 를 통해 화면을 세팅 해보겠습니다.
webrtc 1:1 영상통화를 위해 이전 글도 참고해주세요
https://stickode.tistory.com/715
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" />
<title>Video calling</title>
</head>
<body>
<div>
<div id="userId"></div>
<div class="local-video">
<div style=" font: italic bold 1.5em/1em Georgia, serif ;">나:</div>
<video id="localVideo" playsinline autoplay></video>
</div>
<div>
Users List :
</div>
<div id="usersList">
No users connected
</div>
<div>
<div id="call">Call</button>
</div>
</div>
<div class="remote-video"> 상대방 : </div>
<video id="remoteVideo" playsinline autoplay></video>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script src="indexR.js"></script>
</body>
</html>
index.css
#call {
display: inline-flex;
background: linear-gradient(214.84deg, rgb(15, 9, 68) 20.52%, rgb(9, 4, 50) 89.43%);
transition: background 1s;
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
margin-top: 5px;
color: white;
}
#call:hover {
background: linear-gradient(90deg, rgb(110, 42, 255) 0%, rgb(148, 98, 255) 100%);
}
/* .local-video {
position: fixed;
right: 550px;
bottom: 550px;
} */
#localVideo {
width: 100px;
height: 100px;
}
/* .remote-video {} */
#remoteVideo {
width: 250px;
height: 250px;
}
#userId {
display: none;
}
.user-item {
display: inline-flex;
cursor: pointer;
background: transparent;
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 2px;
transition: background 1s;
border: 1px solid rgb(110, 42, 255);
}
.user-item:hover {
background: rgb(110, 42, 255);
}
.user-item--touched {
background: linear-gradient(90deg, rgb(110, 42, 255) 0%, rgb(148, 98, 255) 100%);
}다음과 같이 화면이 구현되는 것을 확인 할 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] CSS만으로 마우스 hover시 효과 내기 (0) | 2023.05.14 |
|---|---|
| [HTML/CSS] Webrtc N:M 실시간으로 영상 전송하기 (0) | 2023.03.21 |
| [ HTML/CSS ] 회원가입 화면 만들기 (0) | 2022.12.26 |
| [HTML/CSS] 웹 사이트에서 모바일 화면 레이아웃 보여주기 (0) | 2022.12.24 |
| [HTML/CSS] 웹 로딩 화면 만들어보기 (0) | 2022.12.09 |
