-
Notifications
You must be signed in to change notification settings - Fork 5
/
streaming_idx.html
82 lines (81 loc) · 3.9 KB
/
streaming_idx.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Charm&family=Courgette&family=Noto+Nastaliq+Urdu:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./Imgs/favicon1.ico">
<title>Real-Time-Video-Processor</title>
</head>
<body>
<nav class="bg_nav">
<div class="navbs">
<button class="lefb">
<a href="index.html" class="anchor_tg">Home</a>
</button>
<button class="righb">
<a href="recorder.html" class="anchor_tg" target="_blank">Record</a>
</button>
<button class="righb">
<a href="bg_idx.html" class="anchor_tg">Backgrounds</a>
</button>
</div>
</nav>
<main class="strm_main">
<div class="stidx_txt">Live Stream</div>
<div class="strmcontainer">
<div class="btn1 hid">
<button class="ofbtn" id="ofbtn" onclick="toggle()"> Stop Streaming </button>
</div>
<div class="btn2">
<button class="oobtn" id="oobtn" onclick="toggle()"> Start Streaming </button>
</div>
<div class="ip_cntnr active" id="ip_video">
<video id="myVidPlayer" autoplay muted controls></video>
</div>
<div class="vd_cntnr">
<video id="bg_vd" src="" muted autoplay loop style="z-index: 1;"></video>
</div>
<canvas id="tempCanvas"></canvas>
<div class="op_cntnr" id="op_video">
<canvas id="outputCanvas"></canvas>
</div>
</div>
<div class="stidx_txt" style="padding-top: 5px;">Upload Background</div>
<div class="upiv">
<input type="file" accept="image/* video/*" name="iv" id="bg_iv" class="bg_iv">
<div id="uplivcontainer"><img class="uploaded_iv" alt="If uploaded your image will be displayed here and video if uploaded will be used directly :)"></div>
<script>
function toggle(){
document.getElementById('outputCanvas').classList.toggle(localStorage.getItem("image_id"));
console.log(localStorage.getItem("image_id"));
var ipvid = document.getElementById('ip_video');
ipvid.classList.toggle('active')
var opvid = document.getElementById('op_video');
opvid.classList.toggle('active');
var onb = document.querySelector('.btn1');
onb.classList.toggle('hid');
var ofb = document.querySelector('.btn2');
ofb.classList.toggle('hid');
}
const up_iv = document.querySelector('#bg_iv');
var imge = "";
up_iv.addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", ()=>{
imge = reader.result;
document.querySelector(".uploaded_iv").src =imge;
document.querySelector("#outputCanvas").style.backgroundImage = `url(${ reader.result })`;
document.querySelector("#bg_vd").src = imge;
// document.querySelector("#bg_vd").videoWidth = document.querySelector("#myVidPlayer").videoWidth;
})
reader.readAsDataURL(this.files[0]);
})
</script>
</div>
<script src="./scripts/strm.js"></script>
</main>
</body>
</html>