doyle-flutter · February 21, 2021 12:55
diff --git a/webRtcServerView.html b/webRtcServerView.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>JAMES_DEV_TEST only PeerJS</title>
    <style>
        *{  
            padding: 0;
            margin: 0;
        }
        .vWrapper{
            text-align: center;
        }
        .title{
            text-align: center;
            font-size: 0;
            padding: 10px 0;
            height: 10vh;
        }
        .title > div{
            width: 50%;
            display: inline-block;
            font-size: 2rem;
            vertical-align: middle;
        }
        .title > div > img{
            border-radius: 100%;
        }
        .title > div > p{
            text-align: left;
            line-height: 60px;
        }
        video {
            width: 80%;
            height: 60vh;
            display: inline-block;
            object-fit: contain;
            border: 4px solid black;
        }
        @media(max-width: 800px){
            .title{
                display: inline-block;
                width: 80%;
            }
            .title > div{
                display: block;
                width: 100%;
                font-size: 1rem;
                text-align: left;
            }
            .title > div > p{
                line-height: initial;
            }
            video{
                object-fit: cover;
            }

        }
    </style>
  </head>
  <body>
    
    <div class="vWrapper">
        <div class="title">
            <div><img width="60px" src="https://raw.githubusercontent.com/doyle-flutter/Recipe/master/2019-11-21.webp" alt="JAMESS"></div>
            <div><p>Flutter(And,IOS) & WebRTC</p></div>
        </div>
        <video id="uu"></video>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>

    <script>
        var pa = window.location.search || "";
        var myKey;
        var uKey;
        
        // qs 에 따라 역할을 나눔
        if(pa === ""){
            myKey = 'recevier'
            uKey = 'sender';
        }
        else{
            myKey = 'sender';
            uKey = 'recevier';
        }

        var myPeer = new Peer(myKey);

        var uu = document.getElementById('uu');
        uu.autoplay = true;
        uu.setAttribute('playsinline', true);
      
        myPeer.on('open', (id) => {
            alert(`open myKey : ${id} conn u Key : ${uKey}`);
            navigator.mediaDevices.getUserMedia({video: true, audio: false})
                .then(stream => {
                    alert("발송 준비");
                    var call = myPeer.call(uKey, stream);
                    alert("발송 ~ ~");
                    myPeer.on('call', call => {
                        alert('연결 받음 ~');
                        call.answer(stream); 
                        alert('화면 발송 ~');
                        call.on('stream', st => {
                            alert('영상 받음 ~');
                            uu.srcObject = st;
                        });
                    }); 
                });
        });
    </script>
  </body>
 </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>JAMES_DEV_TEST only PeerJS</title>
	<style>
	*{
	padding: 0;
	margin: 0;
	}
	.vWrapper{
	text-align: center;
	}
	.title{
	text-align: center;
	font-size: 0;
	padding: 10px 0;
	height: 10vh;
	}
	.title > div{
	width: 50%;
	display: inline-block;
	font-size: 2rem;
	vertical-align: middle;
	}
	.title > div > img{
	border-radius: 100%;
	}
	.title > div > p{
	text-align: left;
	line-height: 60px;
	}
	video {
	width: 80%;
	height: 60vh;
	display: inline-block;
	object-fit: contain;
	border: 4px solid black;
	}
	@media(max-width: 800px){
	.title{
	display: inline-block;
	width: 80%;
	}
	.title > div{
	display: block;
	width: 100%;
	font-size: 1rem;
	text-align: left;
	}
	.title > div > p{
	line-height: initial;
	}
	video{
	object-fit: cover;
	}

	}
	</style>
	</head>
	<body>

	<div class="vWrapper">
	<div class="title">
	<div><img width="60px" src="https://raw.githubusercontent.com/doyle-flutter/Recipe/master/2019-11-21.webp" alt="JAMESS"></div>
	<div><p>Flutter(And,IOS) & WebRTC</p></div>
	</div>
	<video id="uu"></video>
	</div>

	<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>

	<script>
	var pa = window.location.search \|\| "";
	var myKey;
	var uKey;

	// qs 에 따라 역할을 나눔
	if(pa === ""){
	myKey = 'recevier'
	uKey = 'sender';
	}
	else{
	myKey = 'sender';
	uKey = 'recevier';
	}

	var myPeer = new Peer(myKey);

	var uu = document.getElementById('uu');
	uu.autoplay = true;
	uu.setAttribute('playsinline', true);

	myPeer.on('open', (id) => {
	alert(`open myKey : ${id} conn u Key : ${uKey}`);
	navigator.mediaDevices.getUserMedia({video: true, audio: false})
	.then(stream => {
	alert("발송 준비");
	var call = myPeer.call(uKey, stream);
	alert("발송 ~ ~");
	myPeer.on('call', call => {
	alert('연결 받음 ~');
	call.answer(stream);
	alert('화면 발송 ~');
	call.on('stream', st => {
	alert('영상 받음 ~');
	uu.srcObject = st;
	});
	});
	});
	});
	</script>
	</body>
	</html>