Skip to content

Instantly share code, notes, and snippets.

@jfhbrook

jfhbrook/client.html

Last active Feb 13, 2020
Embed
What would you like to do?
POC for peer to peer video streaming using an OBS browser source
<html>
<body>
<h1>rtc peer test client</h1>
<form id="connect-form">
<label for="server-id">SERVER ID:</label>
<input type="text" name="server-id" id="server-id" required />
<input type="submit" value="CONNECT" />
</form>
<div id="log"></div>
</body>
<script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script>
<script type="text/javascript">
const video = document.getElementById('video');
const logs = document.getElementById('log');
const form = document.getElementById('connect-form');
const idField = document.getElementById('server-id');
function log(line) {
const p = document.createElement('p');
p.innerHTML = String(line);
logs.append(p);
}
const peer = new Peer();
const serverId = "20sasq8qi6600000";
form.onsubmit = async e => {
e.preventDefault();
form.parentNode.removeChild(form);
const serverId = idField.value;
log('connecting to server ' + serverId);
const conn = await peer.connect(serverId);
log('connected to server');
// want to *call* the server with a media stream
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 1080, height: 720 } // TODO: Do I need these dims?
});
log('has a stream');
const call = peer.call(serverId, stream);
} catch (err) {
log('def an error');
}
};
</script>
</html>
<html>
<body>
<h1>rtc peer test server</h1>
<h2 id="copy-me"></h2>
<div id="log"></div>
<video id="video" width=1080 height=720>
</body>
<script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script>
<script type="text/javascript">
const video = document.getElementById('video');
const logs = document.getElementById('log');
const copyMe = document.getElementById('copy-me');
function log(line) {
const p = document.createElement('p');
p.innerHTML = String(line);
logs.append(p);
}
const peer = new Peer();
peer.on("open", id => {
log("got the id");
copyMe.innerHTML = id;
});
// server gets connection
peer.on("connection", (conn) => {
log("client connected...");
copyMe.parentNode.removeChild(copyMe);
const { id } = conn;
peer.on("call", call => {
log("client made a call...");
call.answer();
call.on("stream", stream => {
log("client supplied a stream...");
video.srcObject = stream;
video.onloadedmetadata = () => {
log("mashing play!");
video.play();
};
});
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.