OpenTok-JS-LayoutContainer/Sample.html at master · xxbinxx/OpenTok-JS-LayoutContainer · 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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>OpenTok OT_LayoutContainer.js Example</title>
	<script src="http://staging.tokbox.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="OT_LayoutContainer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		var apiKey = 1127; // OpenTok sample API key. Replace with your own API key.
		var sessionId = '287a9e4ad0aa8e501309df11fe53831452fa1167'; // Replace with your session ID.
		var token = 'devtoken'; // Should not be hard-coded.
								// Add to the page using the OpenTok server-side libraries.
		var session;

		var accessEntered = false;

		// Un-comment either of the following to set automatic logging and exception handling.
		// See the exceptionHandler() method below.
		// TB.setLogLevel(TB.DEBUG);
		TB.addEventListener("exception", exceptionHandler);

		if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
			alert("You don't have the minimum requirements to run this application."
				  + "Please upgrade to the latest version of Flash.");
		} else {
			// Initialize the session
			session = TB.initSession(sessionId);

			// Add event listeners to the session
			session.addEventListener('sessionConnected', sessionConnectedHandler);
			session.addEventListener('streamCreated', streamCreatedHandler);
			session.addEventListener('streamDestroyed', streamDestroyedHandler);

			// Initialize the layout container
			OT_LayoutContainer.init("streamContainer", 500, 340);
		}

		//--------------------------------------
		//  LINK CLICK HANDLERS
		//--------------------------------------

		/*
		If testing the app from the desktop, be sure to check the Flash Player Global Security setting
		to allow the page from communicating with SWF content loaded from the web. For more information,
		see http://www.tokbox.com/opentok/build/tutorials/helloworld.html#localTest
		*/
		function connect() {
			session.connect(apiKey, token);
		}

		function disconnect() {
			session.disconnect();
		}

		//--------------------------------------
		//  OPENTOK EVENT HANDLERS
		//--------------------------------------

		function sessionConnectedHandler(event) {
		    // Publish my stream to the session
			publishStream();

			// Subscribe to all streams currently in the Session
			subscribeToStreams(event.streams);
		}

		function streamCreatedHandler(event) {
			// Subscribe to the newly created streams
			subscribeToStreams(event.streams);

			// Re-layout the container with the new streams
			if (accessEntered) {
				OT_LayoutContainer.layout();
			}
		}

		function streamDestroyedHandler(event) {
			// Get all destroyed streams
			for (var i = 0; i < event.streams.length; i++) {
				// For each stream get the subscriber to that stream
				var subscribers = session.getSubscribersForStream(event.streams[i]);
				for (var j = 0; j < subscribers.length; j++) {
					// Then remove each stream
					OT_LayoutContainer.removeStream(subscribers[j].id);
				}
			}

			// Re-layout the container without the removed streams
			if (accessEntered) {
				OT_LayoutContainer.layout();
			}

		}

		/*
		If you un-comment the call to TB.addEventListener("exception", exceptionHandler) above, OpenTok calls the
		exceptionHandler() method when exception events occur. You can modify this method to further process exception events.
		If you un-comment the call to TB.setLogLevel(), above, OpenTok automatically displays exception event messages.
		*/
		function exceptionHandler(event) {
			alert("Exception: " + event.code + "::" + event.message);
		}

		//--------------------------------------
		//  HELPER METHODS
		//--------------------------------------

		function publishStream() {
			// Make up an id for our publisher
			var divId = 'opentok_publisher';

			// Pass in TRUE since this is a publisher
			OT_LayoutContainer.addStream(divId, true);

			var publisher = session.publish(divId);
			publisher.addEventListener("accessAllowed", accessAllowedHandler);
			publisher.addEventListener("accessDenied", accessDeniedHandler);
		}

		function accessAllowedHandler() {
			accessEntered = true;

			OT_LayoutContainer.layout();
		}

		function accessDeniedHandler() {
			accessEntered = true;

			OT_LayoutContainer.removeStream('opentok_publisher');

			OT_LayoutContainer.layout();
		}

		function subscribeToStreams(streams) {
			// For each stream
			for (var i = 0; i < streams.length; i++) {
				// Check if this is the stream that I am publishing, and if so do not subscribe.
				if (streams[i].connection.connectionId != session.connection.connectionId) {
					// Make a unique div id for this stream
					var divId = 'stream_' + streams[i].streamId;

					// Pass in FALSE since this is a subscriber
					OT_LayoutContainer.addStream(divId, false);

					session.subscribe(streams[i], divId);
				}
			}
		}

	</script>
</head>
<body>
	<h1>OpenTok OT_LayoutContainer.js Example</h1>
	<div>
    	<p>The LayoutContainer class optimizes the layout of streams to fit within a specified area.  To see this in action, press Connect and then copy and paste this url into a new browser tab and Connect again to see the streams dynamically resize as more are added and removed.</p>
    </div>
	<div id="links">
       	<input type="button" value="Connect" id ="connectLink" onClick="javascript:connect()" />
	</div>
	<div id="streamContainer" style="background: black;"></div>
    <div>
    	<a href="https://github.com/jonmumm/OpenTok-JS-LayoutContainer">Github Repo</a> <br />
        <a href="http://www.tokbox.com/developersblog/?p=477">Blog Post</a>
    </div>
</body>
</html>