Adawarp.js를 사용하여 영상 채팅을 만들어 보았습니다. (로컬 서버 불필요 ver)
11787 단어 Adawarp.jsWebRTC
About Adawarp.js
WebRTC를 쉽고 유연하게 처리할 수 있는 플랫폼
WebRTC란?
WebRTC는 브라우저나 전용 앱끼리 실시간으로 영상, 음성, 데이터를 송수신할 수 있는 획기적인 신기술입니다. Adawarp를 사용하면 서버를 준비하지 않고 등록을 할 필요없이 화상 채팅을 만들 수 있습니다.
개발 환경
Mac OS
준비하는 것
Firefox의 최신 버전
텍스트 편집기
Setup
01: Firefox의 최신 버전을 여기에서 설치합니다.
htps //w w. 모잖아. 오 rg / 엔우 S / 후레 레후 x / 네 w /
Chrome에서 할 때 로컬 서버를 설정해야 합니다. 그것은 다음 번부터 소개합니다.
02: 텍스트 편집기를 엽니다.
03: 메뉴 바 -> 텍스트 편집기 -> 환경 설정을 엽니다.
04: New Document -> Format을 Plan text에 체크
05: Open and Save -> When Opening a File을 Display HTML file as HTML code에 체크
06: 이 코드를 복사합니다.
videchat.html<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://unpkg.com/adawarp@latest/dist/adawarp.js"></script>
</head>
<body>
<h1>ADAWARP video chat</h1>
<div>
<video id="my-video" style="width: 300px;" autoplay muted></video>
<video id="peer-video" style="width: 300px;" autoplay></video>
</div>
MyID: <span id="id1">-</span><br>PeerID: <span id="id2">-</span><br>
<input type="text" placeholder="PeerID" id="peer-id-input"><br>
<button onclick="callStart()">Start Call</button>
<button onclick="callEnd()">End Call</button>
<script>
const peer = new Adawarp(); let localStream, connectedCall;
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
localStream = stream;
document.getElementById("my-video").src = URL.createObjectURL(stream);
}, () => { alert("get user media Error!"); }) ;
peer.on('open',() => {document.getElementById("id1").innerHTML = peer.id});
peer.login();
peer.on('call', function(call){ call.answer(localStream); callOn(call); });
function callStart(){
var peer_id = document.getElementById("peer-id-input").value;
var call = peer.call(peer_id, localStream);
callOn(call);
}
function callOn(call) {
call.on('stream', stream => {
document.getElementById("id2").innerHTML = call.peer;
connectedCall = call;
var url = URL.createObjectURL(stream);
document.getElementById("peer-video").src = url;
});
}
function callEnd() { connectedCall.close(); }
</script>
</body>
</html>
07: videochat.html로 Desktop에 저장합니다.
08 : Desktop videoochat.html을 마우스 오른쪽 버튼으로 클릭 →이 응용 프로그램에서 열기 → Firefox 선택
09: 카메라와 마이크를 허용하십시오.
10: Face Camera에서 당신의 얼굴이 찍히면 성공입니다!
11: 다시 새 페이지를 열고 이전 페이지의 ID로 Start Call을 해 봅시다.
화면이 2개 찍혀, 소리가 하울링 하고 있으면 성공입니다!
이 ID는 글로벌이므로 다른 PC에서 시작한 videoochat.html에서도 액세스 할 수 있습니다!
Next Step
Chrome에서 작동하기 위해 간단한 로컬 서버를 설정하는 방법을 소개합니다.
Reference
이 문제에 관하여(Adawarp.js를 사용하여 영상 채팅을 만들어 보았습니다. (로컬 서버 불필요 ver)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/azamiya/items/2ded4e5826e57fd0d5b7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
WebRTC는 브라우저나 전용 앱끼리 실시간으로 영상, 음성, 데이터를 송수신할 수 있는 획기적인 신기술입니다. Adawarp를 사용하면 서버를 준비하지 않고 등록을 할 필요없이 화상 채팅을 만들 수 있습니다.
개발 환경
Mac OS
준비하는 것
Firefox의 최신 버전
텍스트 편집기
Setup
01: Firefox의 최신 버전을 여기에서 설치합니다.
htps //w w. 모잖아. 오 rg / 엔우 S / 후레 레후 x / 네 w /
Chrome에서 할 때 로컬 서버를 설정해야 합니다. 그것은 다음 번부터 소개합니다.
02: 텍스트 편집기를 엽니다.
03: 메뉴 바 -> 텍스트 편집기 -> 환경 설정을 엽니다.
04: New Document -> Format을 Plan text에 체크
05: Open and Save -> When Opening a File을 Display HTML file as HTML code에 체크
06: 이 코드를 복사합니다.
videchat.html<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://unpkg.com/adawarp@latest/dist/adawarp.js"></script>
</head>
<body>
<h1>ADAWARP video chat</h1>
<div>
<video id="my-video" style="width: 300px;" autoplay muted></video>
<video id="peer-video" style="width: 300px;" autoplay></video>
</div>
MyID: <span id="id1">-</span><br>PeerID: <span id="id2">-</span><br>
<input type="text" placeholder="PeerID" id="peer-id-input"><br>
<button onclick="callStart()">Start Call</button>
<button onclick="callEnd()">End Call</button>
<script>
const peer = new Adawarp(); let localStream, connectedCall;
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
localStream = stream;
document.getElementById("my-video").src = URL.createObjectURL(stream);
}, () => { alert("get user media Error!"); }) ;
peer.on('open',() => {document.getElementById("id1").innerHTML = peer.id});
peer.login();
peer.on('call', function(call){ call.answer(localStream); callOn(call); });
function callStart(){
var peer_id = document.getElementById("peer-id-input").value;
var call = peer.call(peer_id, localStream);
callOn(call);
}
function callOn(call) {
call.on('stream', stream => {
document.getElementById("id2").innerHTML = call.peer;
connectedCall = call;
var url = URL.createObjectURL(stream);
document.getElementById("peer-video").src = url;
});
}
function callEnd() { connectedCall.close(); }
</script>
</body>
</html>
07: videochat.html로 Desktop에 저장합니다.
08 : Desktop videoochat.html을 마우스 오른쪽 버튼으로 클릭 →이 응용 프로그램에서 열기 → Firefox 선택
09: 카메라와 마이크를 허용하십시오.
10: Face Camera에서 당신의 얼굴이 찍히면 성공입니다!
11: 다시 새 페이지를 열고 이전 페이지의 ID로 Start Call을 해 봅시다.
화면이 2개 찍혀, 소리가 하울링 하고 있으면 성공입니다!
이 ID는 글로벌이므로 다른 PC에서 시작한 videoochat.html에서도 액세스 할 수 있습니다!
Next Step
Chrome에서 작동하기 위해 간단한 로컬 서버를 설정하는 방법을 소개합니다.
Reference
이 문제에 관하여(Adawarp.js를 사용하여 영상 채팅을 만들어 보았습니다. (로컬 서버 불필요 ver)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/azamiya/items/2ded4e5826e57fd0d5b7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Firefox의 최신 버전
텍스트 편집기
Setup
01: Firefox의 최신 버전을 여기에서 설치합니다.
htps //w w. 모잖아. 오 rg / 엔우 S / 후레 레후 x / 네 w /
Chrome에서 할 때 로컬 서버를 설정해야 합니다. 그것은 다음 번부터 소개합니다.
02: 텍스트 편집기를 엽니다.
03: 메뉴 바 -> 텍스트 편집기 -> 환경 설정을 엽니다.
04: New Document -> Format을 Plan text에 체크
05: Open and Save -> When Opening a File을 Display HTML file as HTML code에 체크
06: 이 코드를 복사합니다.
videchat.html<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://unpkg.com/adawarp@latest/dist/adawarp.js"></script>
</head>
<body>
<h1>ADAWARP video chat</h1>
<div>
<video id="my-video" style="width: 300px;" autoplay muted></video>
<video id="peer-video" style="width: 300px;" autoplay></video>
</div>
MyID: <span id="id1">-</span><br>PeerID: <span id="id2">-</span><br>
<input type="text" placeholder="PeerID" id="peer-id-input"><br>
<button onclick="callStart()">Start Call</button>
<button onclick="callEnd()">End Call</button>
<script>
const peer = new Adawarp(); let localStream, connectedCall;
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
localStream = stream;
document.getElementById("my-video").src = URL.createObjectURL(stream);
}, () => { alert("get user media Error!"); }) ;
peer.on('open',() => {document.getElementById("id1").innerHTML = peer.id});
peer.login();
peer.on('call', function(call){ call.answer(localStream); callOn(call); });
function callStart(){
var peer_id = document.getElementById("peer-id-input").value;
var call = peer.call(peer_id, localStream);
callOn(call);
}
function callOn(call) {
call.on('stream', stream => {
document.getElementById("id2").innerHTML = call.peer;
connectedCall = call;
var url = URL.createObjectURL(stream);
document.getElementById("peer-video").src = url;
});
}
function callEnd() { connectedCall.close(); }
</script>
</body>
</html>
07: videochat.html로 Desktop에 저장합니다.
08 : Desktop videoochat.html을 마우스 오른쪽 버튼으로 클릭 →이 응용 프로그램에서 열기 → Firefox 선택
09: 카메라와 마이크를 허용하십시오.
10: Face Camera에서 당신의 얼굴이 찍히면 성공입니다!
11: 다시 새 페이지를 열고 이전 페이지의 ID로 Start Call을 해 봅시다.
화면이 2개 찍혀, 소리가 하울링 하고 있으면 성공입니다!
이 ID는 글로벌이므로 다른 PC에서 시작한 videoochat.html에서도 액세스 할 수 있습니다!
Next Step
Chrome에서 작동하기 위해 간단한 로컬 서버를 설정하는 방법을 소개합니다.
Reference
이 문제에 관하여(Adawarp.js를 사용하여 영상 채팅을 만들어 보았습니다. (로컬 서버 불필요 ver)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/azamiya/items/2ded4e5826e57fd0d5b7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://unpkg.com/adawarp@latest/dist/adawarp.js"></script>
</head>
<body>
<h1>ADAWARP video chat</h1>
<div>
<video id="my-video" style="width: 300px;" autoplay muted></video>
<video id="peer-video" style="width: 300px;" autoplay></video>
</div>
MyID: <span id="id1">-</span><br>PeerID: <span id="id2">-</span><br>
<input type="text" placeholder="PeerID" id="peer-id-input"><br>
<button onclick="callStart()">Start Call</button>
<button onclick="callEnd()">End Call</button>
<script>
const peer = new Adawarp(); let localStream, connectedCall;
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(stream => {
localStream = stream;
document.getElementById("my-video").src = URL.createObjectURL(stream);
}, () => { alert("get user media Error!"); }) ;
peer.on('open',() => {document.getElementById("id1").innerHTML = peer.id});
peer.login();
peer.on('call', function(call){ call.answer(localStream); callOn(call); });
function callStart(){
var peer_id = document.getElementById("peer-id-input").value;
var call = peer.call(peer_id, localStream);
callOn(call);
}
function callOn(call) {
call.on('stream', stream => {
document.getElementById("id2").innerHTML = call.peer;
connectedCall = call;
var url = URL.createObjectURL(stream);
document.getElementById("peer-video").src = url;
});
}
function callEnd() { connectedCall.close(); }
</script>
</body>
</html>
Chrome에서 작동하기 위해 간단한 로컬 서버를 설정하는 방법을 소개합니다.
Reference
이 문제에 관하여(Adawarp.js를 사용하여 영상 채팅을 만들어 보았습니다. (로컬 서버 불필요 ver)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/azamiya/items/2ded4e5826e57fd0d5b7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
