examples/public-chat/with-channel-api/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Multiparty chat room</title>

<script src="/_ah/channel/jsapi"></script>
<script type="text/javascript" src="static/webtalk.js"></script>
<script type="text/javascript" src="static/AC_OETags.js" language="javascript"></script>

<script type="text/javascript">
<!--

function getParameter(name)
{
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec(window.location.href);
	if( results == null )
		return "";
	else
		return results[1];
}

var auto = getParameter("auto") == "true";

function initialize() {
	//The Adobe Stratus URL with the developer key for media connection.
	webtalk.mediaURL = 'rtmfp://stratus.rtmfp.net/d1e1e5b3f17e90eb35d244fd-c711881365d9/';

	//Update the initial name.
	webtalk.myname = getParameter("name") || ("User " + webtalk.clientId);

	//The name of the VideoIO object with local publish video, if any
	webtalk.myvideo = null;

	// mapping from userId to VideoIO object name for play streams
	webtalk.user2Video = {};
	
	// display item
	setTimeout(function() {	document.getElementById("nameText").value = webtalk.myname; }, 500);

	// update the location to "public"
	webtalk.setLocation("public");
}

function escapeHTML(value) {
	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, '&quot;');
}

function joinRoom(name) {
	if (name == null || name == "") {
		alert("You must have a valid room name");
		return;
	}

	name = escapeHTML(name);
	if (name != webtalk.location) {
		if (webtalk.myvideo) {
			var obj = getFlashMovie(webtalk.myvideo);
			obj.setProperty("src", null);
			webtalk.myvideo = null;
			webtalk.extra = null;
			document.getElementById("publishCheck").checked = false;
		}
		
		for (var s in webtalk.user2Video) {
			var video = webtalk.user2Video[s];
			var obj = getFlashMovie(video);
			obj.setProperty("src", null);
			delete webtalk.user2Video[s];
		}
		
		webtalk.setLocation(name, true);
	}
}

function changeName(name) {
	if (name == null || name == "") {
		alert("You must have a valid name");
		return;
	}

	name = escapeHTML(name);
	webtalk.myname = name;
	webtalk.joinRoom(); // re-join the chat room
}

function replaceLinks(text) {
	var exp = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	return text.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 
}

function send(msg) {
	// post to the chat history
	msg = escapeHTML(msg);
	msg = replaceLinks(msg);
	webtalk.postChatHistory(msg);
	// webtalk.loadChatHistory();
}

//Get the Flash SWF object by name.
function getFlashMovie(movieName) {
	var isIE = navigator.appName.indexOf("Microsoft") != -1;
	return (isIE) ? window[movieName] : document[movieName];
}

function publish(enable) {
	var result = false;
	if (enable) {
		var src = webtalk.mediaURL + "?publish=" + webtalk.clientId;
		for (var i=1; i<=6; ++i) {
			var obj = getFlashMovie("video" + i);
			if (obj.getProperty("src") == null) {
				webtalk.myvideo = "video" + i;
				result = true;
				obj.setProperty("src", src);
				break;
			}
		}
	}
	else {
		for (var i=1; i<=6; ++i) {
			var obj = getFlashMovie("video" + i);
			var src = obj.getProperty("src");
			if (src != null && src.indexOf("publish=") > 0) {
				webtalk.myvideo = null;
				webtalk.extra = null;
				result = true;
				obj.setProperty("src", null);
				break;
			}
		}
	}

	if (result) {
		if (!enable) {
			webtalk.postUserList();
			// webtalk.loadUserList();
		}
	}

	return result;
}

function play(inputName) {
	var userId = inputName.substr(4);
	
	var result = false;
	var input = document.getElementById(inputName);
	if (input && input.checked) {
		if (userId == webtalk.clientId) {
			if (!window.confirm("Enabling your own video will cause loopback. Proceed?")) {
				return false;
			}
		}
		var src = webtalk.userlist[userId].extra;
		var name = webtalk.user2Video[userId];
		if (name == null) {
			for (var i=1; i<=6; ++i) {
				var obj = getFlashMovie("video" + i);
				if (obj.getProperty("src") == null) {
					result = true;
					name = "video" + i;
					break;
				}
			}
		}
		if (name != null) {
			webtalk.user2Video[userId] = name;
			getFlashMovie(name).setProperty("src", src);
		}
	}
	else {
		result = true;
		if (webtalk.user2Video[userId] != undefined) {
			var name = webtalk.user2Video[userId];
			delete webtalk.user2Video[userId];
			var obj = getFlashMovie(name);
			obj.setProperty("src", null);
		}
	}

	return result;
}

// auto-mode defines whether to automatically join all videos of all participants as applicable?

function onAutoInit() {
	document.getElementById("publishCheck").checked = true;
	publish(true);
	
	for (var clientId in webtalk.userlist) {
		if (clientId != webtalk.clientId)
			onAutoAdd(webtalk.userlist[clientId]);
	}
}

function onAutoAdd(user) {
	if (user.clientId != webtalk.clientId && user.extra) {
		var input = document.getElementById("play" + user.clientId);
		input.checked = true;
		input.checked = play("play" + user.clientId);
	}
}

webtalk.onUserListAdded = function(user) {
	if (created_videos == 6 && auto == true) {
		onAutoAdd(user);
	}
};


// when all 6 videos are created in auto-mode, join the conference,
// and join the other users whose videos are enabled.

var created_videos = 0;
var userlist_count = 0;

function onCreationComplete(event) {
	created_videos += 1;
	if (auto == true && created_videos == 6 && userlist_count > 0) {
		onAutoInit();
	}
}

function onPropertyChange(event) {
	if (event.property == "nearID" && event.objectID == webtalk.myvideo) {
		webtalk.extra = webtalk.mediaURL + "?play=" + webtalk.clientId + "&farID=" + event.newValue;
		webtalk.postUserList();
		webtalk.loadUserList();
	}
}

var hasVersion10 = DetectFlashVer(10, 0, 0);
var hasVersion10_3 = DetectFlashVer(10, 3, 0);
var VideoIO = (hasVersion10_3 ? "VideoIO45.swf" : (hasVersion10 ? "VideoIO.swf" : null));

if (VideoIO == null) {
	alert("please install the latest Flash Player to use this site.", "missinge Flash Player 10+");
}

function getVideoTag(index, x, y, width, height) {
	return '<div style="position: absolute; left: ' + x + 'px; top: ' + y + 'px; width: ' + width + 'px; height: ' + height + 'px;">\n\
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\n\
		id="video' + index + '" width="100%" height="100%"\n\
		codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">\n\
		<param name="movie" value="/static/' + VideoIO + '" />\n\
		<param name="quality" value="high" />\n\
		<param name="bgcolor" value="#000000" />\n\
		<param name="flashVars" value="cameraQuality=80" />\n\
		<param name="allowScriptAccess" value="always" />\n\
		<param name="allowFullScreen" value="true" />\n\
		<embed src="/static/' + VideoIO + '" quality="high" bgcolor="#000000"\n\
			width="100%" height="100%" name="video' + index + '" align="middle"\n\
			play="true" loop="false" quality="high"\n\
			flashVars="cameraQuality=80"\n\
			allowScriptAccess="always"\n\
			allowFullScreen="true"\n\
			type="application/x-shockwave-flash"\n\
			pluginspage="http://www.adobe.com/go/getflashplayer">\n\
		</embed>\n\
	</object>\n\
</div>';	
}

webtalk.onChatHistory = function(msgs) {
	var text = "";
	if (msgs && msgs.map) {
			text = msgs.map(function(obj) { return obj.text; }).join("");
	} else { // IE doesn't have Array.map
		for (var i in msgs) {
			text += msgs[i].text;
		}
	}
	var chathistory = document.getElementById("chathistoryDiv");
	var html = text.replace(/\n/g,"<br/>").replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;");
	chathistory.innerHTML = html || "&lt;empty&gt;";
};

webtalk.onUserList = function(users) {
	userlist_count += 1;
	
	try {
		for (var userId in webtalk.user2Video) {
			if (webtalk.userlist[userId] == undefined || !webtalk.userlist[userId].extra) {
				var name = webtalk.user2Video[userId];
				delete webtalk.user2Video[userId];
				var obj = getFlashMovie(name);
				obj.setProperty("src", null);
			}
		}
	} catch (e) { }
	
	var colors = ['#cfcfcf', '#ffffff'];
	
	if (navigator.appName == "Microsoft Internet Explorer") {
		var userlist = document.getElementById("userlistTable");
		var firstTime = !(userlist.firstChild);
		while (userlist.firstChild) {
			userlist.removeChild(userlist.firstChild);
		}
		for (var i=0; i<users.length; ++i) {
			var user = users[i];
			var color = colors[i % colors.length];
			var tr = document.createElement("tr");
			tr.setAttribute("bgcolor", color);
			tr.setAttribute("height", "20px");
			var td1 = document.createElement("td");
			td1.setAttribute("width", "20px");
			if (user.extra) {
				var input = document.createElement("input");
				input.id = "play" + user.clientId;
				input.setAttribute("type", "checkbox");
				input.setAttribute("autocomplete", "off");
				input.setAttribute("value", user.clientId);
				input.setAttribute("title", "Play this video");
				input.checked = (webtalk.user2Video[user.clientId] != undefined);
				input.onclick = function() {
					return play(event.srcElement.id);
				};
				td1.appendChild(input);
			}
			tr.appendChild(td1);
			var td2 = document.createElement("td");
			td2.appendChild(document.createTextNode(user.name + (user.clientId == webtalk.clientId ? " (You)" : "")));
			tr.appendChild(td2);
			userlist.appendChild(tr);
		}
		if (users.length == 0) {
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			td.appendChild(document.createTextNode("<empty>"));
			tr.appendChild(td);
			userlist.appendChild(tr);
		}
		if (firstTime && created_videos == 6 && auto == true) {
			onAutoInit();
		}
	} else {
		var html = "";
		for (var i=0; i<users.length; ++i) {
			var user = users[i];
			var color = colors[i % colors.length];
			html += '<tr bgcolor="' + color + '" height="20px"><td width="20px">';
			if (user.extra) {
				html += '<input id="play' + user.clientId + '" type="checkbox" autocomplete="off" value="' + user.clientId + '" ' +
					' title="Play this video" ' + 
					' onclick="return play(\'play' + user.clientId + '\');" ' + 
					(webtalk.user2Video[user.clientId] != undefined ? 'checked' : '') + ' />'
	 		}
			html +=  '</td><td>' + user.name + (user.clientId == webtalk.clientId ? " (You)" : "") 
					+ '</td></tr>';
		}
		var userlist = document.getElementById("userlistTable");
		userlist.innerHTML = html || "<tr><td>&lt;empty&gt;</td></tr>";
	}
};

webtalk.onError = function(msg, level) {
	if (!level) level = "error";
	var input = document.getElementById("inputText");
	setTimeout(function() { input.value = level + ": " + msg; input.setSelectionRange(0, input.value.length); }, 100);
};

function showHelp() {
	document.getElementById("help").style.visibility = "visible";
	document.getElementById("hiddenHelp").style.visibility = "hidden";
	document.getElementById("room").style.top = "366px";
	document.getElementById("mine").style.top = "392px";
	document.getElementById("userlist").style.top = "416px";
	return false;
}

function hideHelp() {
	document.getElementById("help").style.visibility = "hidden";
	document.getElementById("hiddenHelp").style.visibility = "visible";
	document.getElementById("room").style.top = "26px";
	document.getElementById("mine").style.top = "52px";
	document.getElementById("userlist").style.top = "76px";
	return false;
}
//-->
</script>
</head>

<body onload="webtalk.load(); initialize();" onunload="webtalk.unload()">

<script type="text/javascript">
// render the VideoIO boxes with name/id as video1 to video6.
var rows = 2;
var cols = 3;
var gap = 2;
var width = 240;
var height = 180;
var index = 0;
for (y=gap; y<(gap+height)*rows; y+=(height+gap)) {
	for (x=gap; x<(gap+width)*cols; x+=(width+gap)) {
		index += 1;
		document.write(getVideoTag(index, 242 + x, y, width, height));
	}
}
</script>

<div id="room" style="position: absolute; left: 2px; top: 26px; width: 238px; height: 20px; border: 1px solid grey; font-size: 11px; padding-top: 2px;">
	&nbsp;Room: 
	<input id="roomText" type="text" style="width: 150px; border: 1px dotted grey; font-size: 10px;" 
		maxlength="30" autocomplete="off" value="public"
		title="Enter a different chat room name"
		onkeypress="javascript: if ((event.keyCode || event.which) == 13) {
				joinRoom(document.getElementById('roomText').value);
				return false;
			}"/>
	<input type="button" value="set" style="width: 40px; height: 18px; border: 1px outset black; background-color: lightGrey;"
		onclick="javascript: joinRoom(document.getElementById('roomText').value); return false;"/>
</div>

<div id="mine" style="position: absolute; left: 2px; width: 238px; top: 52px; height: 20px; border: 1px solid grey; font-size: 11px;">
	<input id="publishCheck" type="checkbox" autocomplete="off"
		title="Check to publish your audio and video"
		onclick="return publish(document.getElementById('publishCheck').checked);" />
	<input id="nameText" type="text" style="width: 161px; border: 1px dotted grey; font-size: 10px;" 
		maxlength="30" autocomplete="off" value="Edit Your Name"
		title="Edit your chat nick name"
		onkeypress="javascript: if ((event.keyCode || event.which) == 13) {
				changeName(document.getElementById('nameText').value);
				return false;
			}"/>
	<input type="button" value="set" style="width: 40px; height: 18px; border: 1px outset black; background-color: lightGrey;"
		onclick="javascript: changeName(document.getElementById('nameText').value); return false;"/>
</div> 

<div id="userlist" style="position: absolute; left: 2px; top: 76px; width: 238px; bottom: 2px; border: 1px solid grey">
	<table id="userlistTable" style="width: 100%; top: 0px; bottom: 26px; font-size: 11px;"
		cellspacing="0">
	</table>
</div>

<div style="position: absolute; left: 244px; top: 366px; bottom: 26px; width: 722px; border: 1px solid grey;">
	<div id="chathistoryDiv" style="width: 100%; height: 100%; overflow: auto; font-size: 11px;"></div>
</div>

<div id="input" style="position: absolute; left: 244px; bottom: 2px; height: 20px; width: 722px; border: 1px solid grey;">
	<input id="inputText" type="text" style="border: none; width: 720px" autocomplete="off"
		title="Enter a message here in this chat room"
		value="Enter a chat message here" 
		onclick="if (document.getElementById('inputText').value == 'Enter a chat message here') {
				document.getElementById('inputText').value = '';
			}"
		onkeypress="javascript: if ((event.keyCode || event.which) == 13) {
			send(document.getElementById('inputText').value);
			document.getElementById('inputText').value = ''; 
			return false; 
		}"/>
</div>

<div id="hiddenHelp" style="position: absolute; left: 2px; width: 238px; top: 2px; height: 20px; border: 1px solid grey; overflow: hidden;">
	<span style="font-size: 12pt;"><a href="#" onclick="return showHelp();" style="cursor: pointer;">Click here on how to get started</a></span>
</div>

<div id="help" style="visibility: hidden; position: absolute; left: 2px; width: 238px; top: 2px; height: 360px; border: 1px solid grey; overflow: hidden;">
	<span style="font-size: 12pt;">How to get started?</span>
	<a href="#" onclick="return hideHelp();">hide</a>
	<ol style="font-size: 9pt; padding-left: 20px; padding-top: 0px; padding-bottom: 0px;">
		<li>To learn who is using the site: See the list of users in the panel on the left below.</li>
		<li>To display your name: Change the name that appears in the second edit box below.</li>
		<li>To select a public or private room:  By default you are in a public room.  To create a private room, give it a name using the first edit box below.</li>
		<li>To enable your camera: Select the checkbox before your name.</li>
		<li>To view video from others: Select the checkbox before their names in the list of attendees.</li>
		<li>To send a chat message to everyone on the conference: Enter a message in the bottom right hand panel.</li>
		<li>To send a chat message to an individual on the conference: Enter @&lt;intended recipientÕs name&rt;: &lt;Your chat message&rt;</li>
		<li>To end your conference, close your browser.</li>
	</ol>
	<p style="font-size: 9pt; color: #aaaaaa;">Copyright &copy; 2010-2011, 
		<a href="https://github.com/theintencity/flash-videoio" style="text-decoration: none; color: #aaaaaa;"> Kundan Singh</a></p>
</div>

</body>
</html>