Merge branch 'main' of https://git.hibas.dev/hibas123/ScreenSharingThing
This commit is contained in:
Fabian Stamm
commit
7ffb691922
@ -26,14 +26,14 @@
|
|||||||
<h2>Your ID: <span id="streamId"></span></h2>
|
<h2>Your ID: <span id="streamId"></span></h2>
|
||||||
<div id="streamURLCont">
|
<div id="streamURLCont">
|
||||||
<h2>Connect URL: <a id="streamURL"></a></h2>
|
<h2>Connect URL: <a id="streamURL"></a></h2>
|
||||||
|
<button id="startStramBTN">Start Stream</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="connectToCont">
|
<div id="connectToCont">
|
||||||
<h2>Connecting to: <span id="connectToID"></span></h2>
|
<h2>Connecting to: <span id="connectToID"></span></h2>
|
||||||
<button id="startStramBTN">Start Stream</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<video id="localVideo" style="width: 100%" controls></video>
|
<video id="localVideo" style="width: 100%" controls muted></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -42,4 +42,4 @@
|
|||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,172 +1,171 @@
|
|||||||
function simpleFramwork() {
|
function simpleFramwork() {
|
||||||
let obj = {};
|
let obj = {};
|
||||||
|
|
||||||
return new Proxy(obj, {
|
return new Proxy(obj, {
|
||||||
get(_, prop) {
|
get(_, prop) {
|
||||||
const [id, param] = prop.split("_");
|
const [id, param] = prop.split("_");
|
||||||
let elm = document.getElementById(id);
|
let elm = document.getElementById(id);
|
||||||
if (!elm) {
|
if (!elm) {
|
||||||
console.log(`Element with id ${id} not found`);
|
console.log(`Element with id ${id} not found`);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
switch (param) {
|
switch (param) {
|
||||||
case "value":
|
case "value":
|
||||||
return elm.value;
|
return elm.value;
|
||||||
case "href":
|
case "href":
|
||||||
return elm.href;
|
return elm.href;
|
||||||
case "style":
|
case "style":
|
||||||
return elm.getAttribute("style");
|
return elm.getAttribute("style");
|
||||||
case "text":
|
case "text":
|
||||||
return elm.innerText;
|
return elm.innerText;
|
||||||
case undefined:
|
case undefined:
|
||||||
return elm;
|
return elm;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
set(_, prop, value) {
|
set(_, prop, value) {
|
||||||
const [id, param] = prop.split("_");
|
const [id, param] = prop.split("_");
|
||||||
let elm = document.getElementById(id);
|
let elm = document.getElementById(id);
|
||||||
if (!elm) {
|
if (!elm) {
|
||||||
console.log(`Element with id ${id} not found`);
|
console.log(`Element with id ${id} not found`);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
switch (param) {
|
switch (param) {
|
||||||
case "value":
|
case "value":
|
||||||
elm.value = value;
|
elm.value = value;
|
||||||
break;
|
break;
|
||||||
case "href":
|
case "href":
|
||||||
elm.href = value;
|
elm.href = value;
|
||||||
break;
|
break;
|
||||||
case "click":
|
case "click":
|
||||||
elm.addEventListener("click", value);
|
elm.addEventListener("click", value);
|
||||||
break;
|
break;
|
||||||
case "style":
|
case "style":
|
||||||
elm.setAttribute("style", value);
|
elm.setAttribute("style", value);
|
||||||
break;
|
break;
|
||||||
case "text":
|
case "text":
|
||||||
elm.innerText = value;
|
elm.innerText = value;
|
||||||
break;
|
break;
|
||||||
case undefined:
|
case undefined:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let sf = simpleFramwork();
|
let sf = simpleFramwork();
|
||||||
|
|
||||||
sf.streamId_text = "Loading...";
|
sf.streamId_text = "Loading...";
|
||||||
sf.streamURL_text = "Loading...";
|
sf.streamURL_text = "Loading...";
|
||||||
|
|
||||||
let connectToId = new URL(window.location.href).searchParams.get("id");
|
let connectToId = new URL(window.location.href).searchParams.get("id");
|
||||||
|
|
||||||
let bitrate = new URL(window.location.href).searchParams.get("br") || 50000;
|
let bitrate = new URL(window.location.href).searchParams.get("br") || 50000;
|
||||||
|
|
||||||
if (connectToId) {
|
if (connectToId) {
|
||||||
sf.streamURLCont_style = "display:none";
|
sf.streamURLCont_style = "display:none";
|
||||||
sf.connectToCont_style = "display:block";
|
sf.connectToCont_style = "display:block";
|
||||||
sf.connectToID_text = connectToId;
|
sf.connectToID_text = connectToId;
|
||||||
} else {
|
} else {
|
||||||
sf.streamURLCont_style = "display:block";
|
sf.streamURLCont_style = "display:block";
|
||||||
sf.connectToCont_style = "display:none";
|
sf.connectToCont_style = "display:none";
|
||||||
}
|
}
|
||||||
|
|
||||||
var peer = new Peer({
|
var peer = new Peer({
|
||||||
host: window.location.hostname,
|
host: window.location.hostname,
|
||||||
port: window.location.port,
|
port: window.location.port,
|
||||||
path: "/peerjs",
|
path: "/peerjs",
|
||||||
});
|
});
|
||||||
|
|
||||||
function bitrateTransform(sdp) {
|
function bitrateTransform(sdp) {
|
||||||
var arr = sdp.split("\r\n");
|
var arr = sdp.split("\r\n");
|
||||||
arr.forEach((str, i) => {
|
arr.forEach((str, i) => {
|
||||||
if (/^a=fmtp:\d*/.test(str)) {
|
if (/^a=fmtp:\d*/.test(str)) {
|
||||||
console.log("found fmtp");
|
console.log("found fmtp");
|
||||||
arr[i] =
|
arr[i] =
|
||||||
str +
|
str +
|
||||||
`;x-google-max-bitrate=${bitrate};x-google-min-bitrate=0;x-google-start-bitrate=12000`;
|
`;x-google-max-bitrate=${bitrate};x-google-min-bitrate=0;x-google-start-bitrate=12000`;
|
||||||
} else if (/^a=mid:(1|video)/.test(str)) {
|
} else if (/^a=mid:(1|video)/.test(str)) {
|
||||||
console.log("found mid");
|
console.log("found mid");
|
||||||
arr[i] += "\r\nb=AS:" + bitrate;
|
arr[i] += "\r\nb=AS:" + bitrate;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let res = arr.join("\r\n");
|
let res = arr.join("\r\n");
|
||||||
console.log(sdp, res);
|
console.log(sdp, res);
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let currentStream = undefined;
|
||||||
let currentStream = undefined;
|
peer.on("open", (id) => {
|
||||||
peer.on("open", (id) => {
|
console.log("ID", id);
|
||||||
console.log("ID", id);
|
sf.streamId_text = id;
|
||||||
sf.streamId_text = id;
|
let url = new URL(window.location.href);
|
||||||
let url = new URL(window.location.href);
|
url.searchParams.set("id", id);
|
||||||
url.searchParams.set("id", id);
|
sf.streamURL_text = url.href;
|
||||||
sf.streamURL_text = url.href;
|
sf.streamURL_href = url.href;
|
||||||
sf.streamURL_href = url.href;
|
|
||||||
|
let con = peer.connect(connectToId);
|
||||||
let con = peer.connect(connectToId);
|
con.on("data", console.log);
|
||||||
con.on("data", console.log);
|
con.on("open", () => con.send("Hello"));
|
||||||
con.on("open", () => con.send("Hello"));
|
|
||||||
|
if (connectToId) {
|
||||||
if (connectToId) {
|
sf.startStramBTN_click = () => {
|
||||||
sf.startStramBTN_click = () => {
|
navigator.mediaDevices
|
||||||
navigator.mediaDevices
|
.getDisplayMedia({
|
||||||
.getDisplayMedia({
|
video: true,
|
||||||
video: true,
|
})
|
||||||
})
|
.then((stream) => {
|
||||||
.then((stream) => {
|
if (currentStream) {
|
||||||
if(currentStream) {
|
currentStream.getTracks().forEach((track) => track.stop());
|
||||||
currentStream.getTracks().forEach(track => track.stop())
|
}
|
||||||
}
|
currentStream = stream;
|
||||||
currentStream = stream;
|
let v = sf.localVideo;
|
||||||
let v = sf.localVideo;
|
v.srcObject = stream;
|
||||||
v.srcObject = stream;
|
v.play();
|
||||||
v.play();
|
const conn = peer.call(connectToId, stream, {
|
||||||
const conn = peer.call(connectToId, stream, {
|
sdpTransform: bitrateTransform,
|
||||||
sdpTransform: bitrateTransform,
|
});
|
||||||
});
|
conn.on("stream", console.log);
|
||||||
conn.on("stream", console.log);
|
conn.on("close", console.log);
|
||||||
conn.on("close", console.log);
|
conn.on("error", console.log);
|
||||||
conn.on("error", console.log);
|
});
|
||||||
});
|
};
|
||||||
};
|
}
|
||||||
}
|
});
|
||||||
});
|
peer.on("connection", (conn) => {
|
||||||
peer.on("connection", (conn) => {
|
console.log("connection", conn);
|
||||||
console.log("connection", conn);
|
conn.on("data", console.log);
|
||||||
conn.on("data", console.log);
|
});
|
||||||
});
|
|
||||||
|
peer.on("error", console.error);
|
||||||
peer.on("error", console.error);
|
peer.on("close", console.log);
|
||||||
peer.on("close", console.log);
|
peer.on("disconnected", console.log);
|
||||||
peer.on("disconnected", console.log);
|
peer.on("error", console.log);
|
||||||
peer.on("error", console.log);
|
|
||||||
|
peer.on("call", (call) => {
|
||||||
peer.on("call", (call) => {
|
console.log("Call", call);
|
||||||
console.log("Call", call);
|
call.answer(undefined);
|
||||||
call.answer(undefined);
|
call.on("stream", console.log);
|
||||||
call.on("stream", console.log);
|
call.on("close", console.log);
|
||||||
call.on("close", console.log);
|
call.on("error", console.log);
|
||||||
call.on("error", console.log);
|
call.on("stream", (remoteStream) => {
|
||||||
call.on("stream", (remoteStream) => {
|
console.log("stream", remoteStream);
|
||||||
console.log("stream", remoteStream);
|
let v = sf.localVideo;
|
||||||
let v = sf.localVideo;
|
v.srcObject = remoteStream;
|
||||||
v.srcObject = remoteStream;
|
v.play();
|
||||||
v.play();
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
function createEmptyVideoTrack({ width, height }) {
|
||||||
function createEmptyVideoTrack({ width, height }) {
|
const canvas = Object.assign(document.createElement("canvas"), {
|
||||||
const canvas = Object.assign(document.createElement("canvas"), {
|
width,
|
||||||
width,
|
height,
|
||||||
height,
|
});
|
||||||
});
|
canvas.getContext("2d").fillRect(0, 0, width, height);
|
||||||
canvas.getContext("2d").fillRect(0, 0, width, height);
|
|
||||||
|
const stream = canvas.captureStream();
|
||||||
const stream = canvas.captureStream();
|
const track = stream.getVideoTracks()[0];
|
||||||
const track = stream.getVideoTracks()[0];
|
|
||||||
|
return Object.assign(track, { enabled: false });
|
||||||
return Object.assign(track, { enabled: false });
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
{
|
{
|
||||||
|
"name": "ScreenSharingThing",
|
||||||
|
"packageManager": "yarn@3.1.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:api": "jrpc compile API/main.jrpc -o=ts-node:_API/src && yarn workspace @hibas123/screen-api build",
|
"build:api": "jrpc compile API/main.jrpc -o=ts-node:_API/src && yarn workspace @hibas123/screen-api build",
|
||||||
"build:client": "yarn workspace @hibas123/screen-client build",
|
"build:client": "yarn workspace @hibas123/screen-client build",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user