Building Video Calling With PubNub and WebRTC

1.js

<script src=”http://cdn.pubnub.com/pubnub.min.js”></script>
<script src=”http://pubnub.github.io/webrtc/webrtc-beta-pubnub.js”></script>

2.js

pubnub.subscribe({
		channel: ‘phonebook’,
		callback: function (message) {
			// Do nothing in our callback
		},
		presence: function (data) {
			if (data.action === “join” && data.uuid != myUuid) {
				var parts = data.uuid.split(‘-’);
				var newUser = newUserTemplate({
					name: parts[1]
					id: parts[0]
				});
				userList.append(newUser);
			} else if (data.action === “leave” and data.uuid != myUuid) {
				var parts = data.uuid.split(‘-’);
				var item = userList.find(“li[data-user=\”” + parts[0] + “\”]”);
				item.remove();
			}
		}
	});

3.js

function gotStream(stream) {
		document.querySelector(‘#self-call-video’).src = URL.createObjectURL(stream);
		myStream = stream; // Save the stream for later use
	};
	navigator.webkitGetUserMedia({ audio: true, video: true}, gotStream);

4.js

	function publishStream(uuid) {
		pubnub.publish({
			user: uuid,
			stream: myStream
		});

		pubnub.subscribe({
			user: uuid,
			stream: function (data, event) {
				document.querySelector(‘#call-video’).src = URL.createObjectUrl(event.stream);
			},
			disconnect: function (uuid, pc) {
				document.querySelector(“#call-video”).src = “”;
$(document).trigger(“call:end”);
}
});
};			

	pubnub.onNewConnection(function (uuid) {
		if (myStream != null) {
			publishStream(uuid);
		}
	});

	pubnub.subscribe({
		channel: ‘answer’,
		callback: function (data) {
			if (data.caller == myUuid) {
				publishStream(data.callee);
			}
		}
	});

5.js

function hangUp() {
		pubnub.closeConnection(currentCall, function () {
			$(document).trigger(“call:end”);
		}
	};

	pubnub.subscribe({
		// ... Other subscribe code here
		disconnect: function (uuid, peerConnection) {
			hangUp();
			// React to the disconnect
		}
	});