hello-world/embed.html at master · charles0007/hello-world · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
		#vid-box{
	width: 100%;
	height: 100%;
	text-align: center;
}

#vid-box video{
	width: 100%;
	height: 100%;
}

#stream-info{
	position: absolute;
	bottom: 3vh;
	right: 5vw;
}
	</style>


</head>
<body>
<div id="vid-box"></div>
<div id="stream-info"><span id="here-now">0</span></div>

<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="http://kevingleason.me/SimpleRTC/js/webrtc.js"></script>
<script src="http://kevingleason.me/SimpleRTC/js/rtc-controller.js"></script>

<script type="text/javascript">
	(function(){

var urlargs     = urlparams();
var video_out   = document.getElementById("vid-box");
var stream_info = document.getElementById("stream-info");
var here_now    = document.getElementById("here-now");

// Handle error if stream is not in urlargs.
if (!('stream' in urlargs)) {
	handleNoStream();
    return;
}

// Get URL params
function urlparams() {
    var params = {};
    if (location.href.indexOf('?') < 0) return params;
    PUBNUB.each(
        location.href.split('?')[1].split('&'),
        function(data) { var d = data.split('='); params[d[0]] = d[1]; }
    );
    return params;
}

function handleNoStream(){
	video_out.innerHTML="<h2>That stream no longer exists!</h2>";
	stream_info.hidden=true;
}
var phone = window.phone = PHONE({
    number        : "EmbedViewer" + Math.floor(Math.random()*100), // random viewer name
    publish_key   : 'pub-c-dc5c400b-3ac2-406f-9447-ccad4cd71954', // Your Pub Key
	    subscribe_key : 'sub-c-0177f128-39c2-11e8-816a-cac76fd9870d', // Your Sub Key
    oneway        : true,
});
var ctrl = window.ctrl = CONTROLLER(phone);
ctrl.ready(function(){
	ctrl.isStreaming(stream, function(isOn){
		if (isOn) ctrl.joinStream(stream);
		else handleNoStream();
	});
});
ctrl.receive(function(session){
    session.connected(function(session){ stream_info.hidden=false; video_out.appendChild(session.video); });
    session.ended(function(session){ handleNoStream(); });
});
ctrl.streamPresence(function(m){
	here_now.innerHTML = m.occupancy;
});
ctrl.unable(function(){ handleNoStream(); });

}())
</script>
</body>
</html>