Skip to content

Instantly share code, notes, and snippets.

@doyle-flutter

doyle-flutter/webRtcView.html

Created February 20, 2021 15:48
Show Gist options
  • Save doyle-flutter/ee63bd0cbd94bdf26346dbc6ecc1bfac to your computer and use it in GitHub Desktop.
Save doyle-flutter/ee63bd0cbd94bdf26346dbc6ecc1bfac to your computer and use it in GitHub Desktop.
Download ZIP
01 WebRTC
Raw
webRtcView.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Live</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
body{
font-size: 0;
}
div.contentWrapper{
margin: 0 auto;
background-color: #eee;
letter-spacing: 0;
font-size: 0;
white-space: 0;
}
div.contentWrapper > div.contentVideos{
width: 70%;
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 0;
white-space: 0;
}
div.contentWrapper > div.contentVideos > video{
height: auto;
vertical-align: top;
}
div.contentWrapper > div.contentChat{
width: 30%;
letter-spacing: 0;
vertical-align: top;
display: inline-block;
background-color: #ddd;
position: relative;
font-size: 0;
}
div.contentWrapper > div.contentChat > ul{
border: 1px solid #808080;
width: 100%;
height: 100%;
font-size: 1rem;
letter-spacing: 0;
white-space: 0;
overflow: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
div.contentWrapper > div.contentChat > ul > li{
padding: 10px;
background-color: red;
color: white;
margin: 5px 0;
}
div.contentWrapper > div.contentChat > ul > li:nth-child(1){
margin: 0;
}
div.contentTitle{
height: 19vh;
margin-top: 1vh;
width: 70%;
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
div.contentTitle > div.contentDes{
padding-left: 40px;
}
div.contentTitle > div.contentUser{}
div.contentTitle > div.contentUser > ul{
font-size: 0;
padding-left: 40px;
overflow: hidden;
}
div.contentTitle > div.contentUser > ul > li{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
margin: 10px;
font-size: 1rem;
line-height: 50px;
text-align: center;
letter-spacing: 0;
color: white;
font-weight: bold;
}
div.userChat{
display: inline-block;
width: 30%;
position: relative;
}
div.userChat > input{
width: 100%;
height: 40px;
outline: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid grey;
border-radius: 0;
}
div.userChat > input:focus{
outline: none;
}
div.userChat > div.userChatIcon{
position: absolute;
right: 10px;
top: 0;
bottom: 0;
z-index: 10;
color: red;
line-height: 40px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="contentWrapper">
<div class="contentVideos">
<video width="100%" autoplay="autoplay" id="myVideo" translate="yes"></video>
</div>
<div class="contentChat" id="contentChat">
<ul id="chatListWrapper">
<li>클린채팅 플리즈</li>
</ul>
</div>
</div>
<div class="contentTitle">
<div class="contentDes">
<h2>제임쓰 DEV</h2>
참여인원 : <span>999999999명</span>
</div>
<div class="contentUser">
<ul>
<li>A</li>
<li>B</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</div>
</div>
<div class="userChat">
<div class="userChatIcon" id="chatSendBtn">></div>
<input type="text" placeholder="chat" id="chatSendInput">
</div>
<script>
new Promise(async () => {
var myVideo = document.getElementById('myVideo');
var displayStream = await navigator.mediaDevices.getDisplayMedia({ audio: false, video: true })
.then((stream) => {
// stream을 서버로 전달하여 사용 가능
// **
// 화면캡쳐가 진행되고 있는지 테스트를 위한 Video Play
// 이후 구현 할 경우 자신의 화면에 표시하지 않음
// if ("srcObject" in myVideo) myVideo.srcObject = stream;
// else myVideo.src = window.URL.createObjectURL(stream);
// myVideo.onloadedmetadata = (e) => myVideo.play();
document.body.style.border = "2px solid red";
return stream;
})
.catch((err) => console.log(err.name + ": " + err.message));
var [track] = displayStream.getVideoTracks();
track.addEventListener('ended', (_) => document.body.style.border = "none");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment