hibas123/ScreenSharingThing
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

html pfusch

Browse Source
This commit is contained in:
Leonard Anton Gläser 2022-03-29 13:26:29 +02:00
parent 5c47882b19
commit 498929d7b8
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/css/mystyle.css Normal file
View File

@ -0,0 +1,24 @@
/* * {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
} */
/* #main {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
*/
body {
margin: 0;
height: 100vh;
width: 100%;
/* overflow: hidden; */
}
video {
width: 100% !important;
height: auto !important;
background-color: black;
}

17
public/index.html
View File

@ -1,15 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, height= initial-scale=1.0">
<link rel="stylesheet" href="./css/mystyle.css">
<title>SimpleStream</title> <title>SimpleStream</title>
<!-- //asset self hosting for non internet environments <!-- //asset self hosting for non internet environments
//TODO: improve this later with correct tools like bundeling //TODO: improve this later with correct tools like bundeling
--> -->
<link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./lib/jquery.min.js"></script> <script src="./lib/jquery.min.js"></script>
<script src="./lib/bootstrap.bundle.min.js"></script> <script src="./lib/bootstrap.bundle.min.js"></script>
@ -17,11 +16,10 @@
</head> </head>
<body> <body>
<div class="container-fluid vh-100">
<div class="container-fluid"> <div class="row-fluid">
<div class="row ">
<div class="col-md-auto"> <div class="col-md-auto">
<h1>SimpleStream</h1> <h1>SimpleStream (Alpha)</h1>
<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>
@ -31,11 +29,12 @@
<button id="startStramBTN">Start Stream</button> <button id="startStramBTN">Start Stream</button>
</div> </div>
</div> </div>
<video id="localVideo" autoplay muted></video>
</div> </div>
<video id="localVideo" style="width: 100%; height: 100%;" controls></video>
</div> </div>
<!-- style="min-width: 100%; min-height: 100%;width: auto; height: auto; z-index: -100; background-color: black;" -->
<script src="main.mjs" type="module"> <script src="main.mjs" type="module">
</script> </script>

16
public/main.mjs
View File

@ -57,9 +57,11 @@ let sf = simpleFramwork();
sf.streamId_text = "Loading..."; sf.streamId_text = "Loading...";
sf.streamURL_text = "Loading..."; sf.streamURL_text = "Loading...";
sf.localVideo.enableAutosize = true;
let connectToId = new URL(window.location.href).searchParams.get("id"); let connectToId = new URL(window.location.href).searchParams.get("id");
let ownId = new URL(window.location.href).searchParams.get("own_id") let ownId = new URL(window.location.href).searchParams.get("own_id");
let autoFullscreen = new URL(window.location.href).searchParams.get("auto_fullscreen");
let bitrate = new URL(window.location.href).searchParams.get("br") || 50000; let bitrate = new URL(window.location.href).searchParams.get("br") || 50000;
@ -91,6 +93,13 @@ if (ownId) {
} }
function fullscreenHandler(element, fullscreensetting) {
//main.mjs: 98 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
//if (fullscreensetting) {
let res = element.requestFullscreen();
console.log(res);
//}
}
function bitrateTransform(sdp) { function bitrateTransform(sdp) {
var arr = sdp.split("\r\n"); var arr = sdp.split("\r\n");
@ -170,6 +179,11 @@ peer.on("call", (call) => {
console.log("stream", remoteStream); console.log("stream", remoteStream);
let v = sf.localVideo; let v = sf.localVideo;
v.srcObject = remoteStream; v.srcObject = remoteStream;
//fullscreenHandler(v, autoFullscreen);
v.muted = true;
v.autoplay = true;
//because of https://developer.mozilla.org/de/docs/Web/HTML/Element/video
//because of https://developer.chrome.com/blog/autoplay/ (autoplay / play not possible with sound enabled)
v.play(); v.play();
}); });
}); });