-
Notifications
You must be signed in to change notification settings - Fork 10
/
theta_anzu_up.html
123 lines (108 loc) · 3.56 KB
/
theta_anzu_up.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Anzu THETA Viewer</title>
<!-- The MIT License (MIT) Copyright (c) 2015 mganeko -->
</head>
<body>
<div style="top:0px; left:4px; background-color: #fcfcfc; opacity: 0.9; padding: 2px;">
<label>channel <input id="channel_id" type="text" size="12" value=""></input></label>
<label>token <input id="upstream_token" type="text" size="20" value=""></input></label>
<button id='start_button' onclick="startUpstream();">start upstream</button>
<button id='stop_button' onclick="stopUpstream();">stop upsteam</button>
</div>
<video id="local_video" width="320px" height="180px" style="border: solid black 1px;"></video>
<script src="js/anzu.min.js"></script>
<script type="text/javascript">
var channelId = "";
var upstreamToken = "";
var anzuUpstream = null;
function getChannel() {
var channelElement = document.getElementById("channel_id");
var channel = channelElement.value;
return channel;
}
function getToken() {
var tokenElement = document.getElementById("upstream_token");
var token = tokenElement.value;
return token;
}
function setChannel(channel) {
var channelElement = document.getElementById("channel_id");
channelElement.value = channel;
}
function setToken(token) {
var tokenElement = document.getElementById("upstream_token");
tokenElement.value = token;
}
function startUpstream() {
channelId = getChannel();
upstreamToken = getToken();
// 視聴を開始する
anzuUpstream = new Anzu("upstream");
anzuUpstream.start(channelId, upstreamToken, {video: true, audio: true})
.then(function(params) {
var videoElement = document.getElementById("local_video");
videoElement.src = window.URL.createObjectURL(params.stream);
videoElement.volume = 0;
videoElement.play();
})
.catch(function(error) {
console.error(error);
});
}
function stopUpstream() {
var videoElement = document.getElementById("local_video");
videoElement.pause();
if (videoElement.src) {
window.URL.revokeObjectURL(videoElement.src);
videoElement.src = null;
}
if (anzuUpstream) {
anzuUpstream.disconnect();
anzuUpstream = null;
}
}
// ---- utility function -----
function parseURL() {
var queryParams = [];
var url = document.location.href;
console.log("url = " + url);
var args = url.split('?');
if (args.length <= 1) {
return queryParams;
}
// parse query string
var querystring = args[1];
params = querystring.split('&');
for (var i = 0; i < params.length; i++) {
var paramUnit = params[i];
var pair = paramUnit.split('=');
if (pair.length != 2) {
continue; // will not match
}
console.log('queryParam: ' + pair[0] + '=' + pair[1]);
queryParams[pair[0]] = pair[1];
}
return queryParams;
}
// --- initialize --
var params = parseURL();
if (params['channel']) {
setChannel(params['channel']);
}
if (params['c']) {
setChannel(params['c']);
}
if (params['token']) {
setToken(params['token']);
}
if (params['t']) {
setToken(params['t']);
}
</script>
</body>
</html>