mirror of
https://api.glitch.com/git/yaswvc
synced 2026-01-12 06:48:11 +00:00
🎥🐕 Checkpoint
./public/main.js:3115263/1701 ./views/index.html:3115263/36
This commit is contained in:
parent
572986ece0
commit
59847dc927
2 changed files with 22 additions and 1 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
let messagesEl = document.querySelector('.messages');
|
let messagesEl = document.querySelector('.messages');
|
||||||
let peerIdEl = document.querySelector('#connect-to-peer');
|
let peerIdEl = document.querySelector('#connect-to-peer');
|
||||||
|
let videoEl = document.querySelector('.remote-video');
|
||||||
|
|
||||||
let logMessage = (message) => {
|
let logMessage = (message) => {
|
||||||
let newMessage = document.createElement('div');
|
let newMessage = document.createElement('div');
|
||||||
|
|
@ -10,6 +11,11 @@ let logMessage = (message) => {
|
||||||
messagesEl.appendChild(newMessage);
|
messagesEl.appendChild(newMessage);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let renderVideo = (stream) => {
|
||||||
|
videoEl.srcObject = stream;
|
||||||
|
videoEl.onloadedmetadata = (e) => videoEl.play();
|
||||||
|
};
|
||||||
|
|
||||||
let peer = new Peer({
|
let peer = new Peer({
|
||||||
host: '/',
|
host: '/',
|
||||||
path: '/peerjs/myapp'
|
path: '/peerjs/myapp'
|
||||||
|
|
@ -29,6 +35,14 @@ peer.on('connection', (conn) => {
|
||||||
conn.send('hello!');
|
conn.send('hello!');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
peer.on('call', (call) => {
|
||||||
|
navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => {
|
||||||
|
call.answer(stream); // Answer the call with an A/V stream.
|
||||||
|
call.on('stream', renderVideo);
|
||||||
|
}, (err) => {
|
||||||
|
console.error('Failed to get local stream', err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
let connectToPeer = () => {
|
let connectToPeer = () => {
|
||||||
let peerId = peerIdEl.value;
|
let peerId = peerIdEl.value;
|
||||||
|
|
@ -41,6 +55,13 @@ let connectToPeer = () => {
|
||||||
conn.on('open', () => {
|
conn.on('open', () => {
|
||||||
conn.send('hi!');
|
conn.send('hi!');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
navigator.mediaDevices.getUserMedia({video: true, audio: true}, (stream) => {
|
||||||
|
let call = peer.call(peerId, stream);
|
||||||
|
call.on('stream', renderVideo);
|
||||||
|
}, (err) => {
|
||||||
|
logMessage('Failed to get local stream', err);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
window.connectToPeer = connectToPeer;
|
window.connectToPeer = connectToPeer;
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
<script src="/main.js" type="module"></script>
|
<script src="/main.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<video class="remote-video"></video>
|
||||||
<input type="text" id="connect-to-peer" />
|
<input type="text" id="connect-to-peer" />
|
||||||
<button onclick="connectToPeer()">
|
<button onclick="connectToPeer()">
|
||||||
Connect
|
Connect
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue