-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
74 lines (66 loc) · 2.58 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTMP-Demo</title>
<script type="text/javascript" src="dist/webrtmp.js"></script>
<style>
#output {
background-color: black;
}
body {
background-color: dimgray;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>WebRTMP-Demo</h1><br>
<table>
<tr>
<td>
<label for="host">Server:</label> <input type="text" id="host" value="bunkertv.org"> <label for="port">Port:</label> <input id="port" type="text" value="9001"><br>
<label for="appName">Application:</label> <input type="text" id="appName" value="demo"> <label for="streamName">Streamname:</label> <input type="text" id="streamName" value="livetest"><br>
</td>
<td>
<input id="StartButton" type="button" value="Play Video" onclick="playVideo()"><br>
<input type="button" value="pause" onclick="rtmp_player.pause(true)"><br>
<input type="button" value="unpause" onclick="rtmp_player.pause(false)"><br>
<input type="button" value="Destroy" onclick="rtmp_player.stop()"><br>
</td>
</tr>
<tr>
<td>
<video controls id="output" width="640" height="360"></video>
</td>
<td>
<iframe src="https://uhr.ptb.de/" style="width: 360px; height: 360px;border: none; background-color: black;"></iframe>
</td>
</tr>
</table>
Video is send by:
<div style="width: 640px; height: 110px; background-color: white">ffmpeg -stream_loop -1 -re -i input.mp4 -vf drawtext="fontfile=monofonto.ttf: fontsize=96: box=1: boxcolor=black@0.75: boxborderw=5: fontcolor=white: x=(w-text_w)/2: y=((h-text_h)/2)+((h-text_h)/4): text='%{gmtime\:%M\\\\\:%S}'" -vcodec libx264 -b:v 3M -s 1280x720 -x264-params keyint=120:min-keyint=30:scenecut=0 -preset medium -profile:v main -movflags +faststart -acodec copy -f flv rtmp://127.0.0.1/demo/livetest</div>
<script>
Log.LEVEL = Log.INFO;
const output = document.getElementById("output");
const rtmp_player = webrtmpjs.createWebRTMP();
rtmp_player.attachMediaElement(output);
function playVideo(){
rtmp_player.open(document.getElementById("host").value, document.getElementById("port").value).then(()=>{
rtmp_player.connect(document.getElementById("appName").value).then(()=>{
rtmp_player.play(document.getElementById("streamName").value).then(()=>{
console.log("playing");
}).catch((error)=>{
console.error(error);
})
}).catch((error)=>{
console.error(error);
})
}).catch((error)=>{
console.error(error);
})
}
playVideo();
</script>
</body>
</html>