-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (127 loc) · 5.71 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Twitch Chat Forwarder</title>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap452.min.css">
<link rel="stylesheet" href="assets/css/dark.min.css">
<script type="text/javascript" src="assets/js/tmi.min.js"></script>
</head>
<body onload="onInit()">
<div class="container">
<div class="row pt-md-4">
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Twitch Tools</a>
<div class="dropdown-menu" id="main-nav">
</div>
</li>
</ul>
</div>
<div class="row">
<div class="col-10">
<h1 class="h3 pt-4 pl-lg-4 text-center">Twitch Chat Forwarder</h1>
</div>
<div class="col-2 text-center">
<img src="assets/images/robot.gif" style="width: 60px;" alt="">
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<p>This is strange right? Why would anyone need this?
<br><br>
PSVR (Playstation VR)
<br><br>
You can of course stream PSVR right from the Playstation but you will not have custom overlays, face
cam, transitions, custom alerts. The stream quality is not great and the video output that is streamed
to Twitch looks weird and fish-eyed.
<br><br>
You can also capture your PSVR on a PC and stream it that way. But how do you see chat while in your VR
headset?
<br><br>
One solution is to capture PSVR on a PC and stream it, while at the same time stream to Twitch from the
Playstation that is using an alternate Twitch account. This way you will be able to see chat while in
PSVR and still use OBS for transitions, overlays, alerts... The idea is to send chat messages from your
main Twitch account to the alternate Twitch account that your PSVR is using.
</p>
</div>
</div>
<br>
<div class="form-label-group mb-2 hide" id="access_token">
<small class="text-warning">* Requires Twitch Access Token</small>
<div class="mb-2">
<a href="https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=d62x6u7crlv5s4sgdd4icwkur6e9kd&redirect_uri=https://twitch-chat-forwarder.pages.dev/&scope=chat:read+chat:edit&force_verify=true"
target="_self"><img src="assets/images/connect.png"></a>
</div>
<input type="password" id="accessToken" class="form-control">
<label for="accessToken">
<small>Access token</small>
</label>
<span id="show_token"
style="cursor:pointer;text-align:right;display:inline-block;width:100px;margin-top: 3px;font-size:smaller;vertical-align:top;"
title="Show/Hide">show
</span>
</div>
<div class="form-label-group mb-2">
<input type="text" id="mainAccount" class="form-control" required>
<label for="mainAccount">
<small>Source Twitch Account</small>
</label>
</div>
<div class="form-label-group mb-2">
<input type="text" id="botAcccount" class="form-control" required>
<label for="botAcccount">
<small>Forward Messages To</small>
</label>
</div>
<div class="form-label-group mb-2">
<select class="form-control" id="spChars">
<option value="" selected>none</option>
<option value="1"><username> psvr is so cool!</option>
<option value="2">-username- this is great</option>
<option value="3">::username:: heya</option>
<option value="4">@username: Heck Yea</option>
<option value="5">[username] What game is this?</option>
</select>
<label for="botAcccount">
<small>Add special characters to user names</small>
</label>
</div>
<button class="btn btn-lg btn-success btn-block" id="start_button" type="button">Start</button>
<button class="btn btn-lg btn-danger btn-block" id="stop_button" type="button" disabled>Stop</button>
<button class="btn btn-lg btn-dark btn-block" id="removestorage_button" type="button">Reset Settings</button>
</div>
<div class="container mt-4">
<div style="overflow-y:auto;overflow-x:hidden;max-height:300px;">
<ul class="list-group-flush" id="status" style="padding-left:0;"></ul>
</div>
</div>
<script type="text/javascript" src="assets/js/chat.js"></script>
<div class="text-right m-4"><a class="btn btn-link" href="https://github.com/teklynk/twitch_chat_forwarder" target="_blank">Github</a></div>
<script>
// Json data - Ajax call
let nav_json = JSON.parse($.getJSON({
'url': "https://twitchapi.teklynk.com/getnav.php",
'async': false
}).responseText);
$.each(nav_json, function (i, val) {
$('<a class="dropdown-item" href="' + val.url + '">' + val.name + '</a>').appendTo('#main-nav');
});
</script>
<script>
// Json data - Ajax call
let nav_json = JSON.parse($.getJSON({
'url': "https://twitchapi.teklynk.com/getnav.php",
'async': false
}).responseText);
$.each(nav_json, function (i, val) {
$('<a class="dropdown-item" href="' + val.url + '">' + val.name + '</a>').appendTo('#main-nav');
});
</script>
</body>
</html>