Video Conferencing in Salesforce using WebRTC integration
Wouldn’t it be great if you could start an audio and video chat with any co-worker from inside Salesforce? Well, that’s now possible through a cool integration between GoInstant, WebRTC and Visualforce
This is how David Caroll started his exciting blog article way back in February 27, 2014. He also shared a sample code and few demo snapshots showing the video conferencing within Salesforce. Unfortunately, GoInstant - the company which got acquired by Salesforce in 2012 is no longer in existence and the reasons unknown. But the very idea of having Video conferencing/Chat within Salesforce is real cool as it opens up a plethora of opportunities for applications where you need multiple users communicating, or you need data being displayed to people as fast as possible.
Use Case
Suppose there is a printer service company that uses Salesforce service cloud for its Customer Support and Service operations. Whenever a customer calls with an issue in their printer the customer support executive logs a case, does a preliminary investigation by following a pre-defined set of instructions and torturing the customer with same old questions (sometimes completely irrelevant), finally taking an appointment for a technician visit, when the technician finds that the issue was simply with one of the empty cartridge that the customer was not aware of.
Now imagine how much faster the customer service agents could resolve the issue if they could see the problem without even leaving their desks. This is where video conferencing could come handy. Consumers today are using their mobile devices more and more frequently which has led to a more connected world where images and other data can be easily transferred within seconds.
Image Courtesy: www.sightcall.com
In the above use case the customer could have shared his/her mobile camera to provide a complete view of the situation or problem. Our customer Service Agent would have then paused live feeds, highlighted issues, pointed out key items, and even directly opened up the supporting documentation on the customer’s device to come to a resolution more efficiently than before.
Image Courtesy: www.sightcall.com
Visualforce code
Below is a simple VF page code to get you started that demonstrates the video conferencing. Following are the few snapshots and video of the demo that I tried on two different machines.
<apex:page >
<html lang="en">
<head>
<title>WebRTC VideoConferencing using RTCMultiConnection ® Muaz Khan</title>
<style>
audio,
video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<!-- scripts used for broadcasting -->
<script src="">
</script>
<script src="">
</script>
</head>
<body>
<article>
<section class="experiment">
<section>
<input type="text" id="conference-name"></input>
<button id="setup-new-conference" class="setup">Setup New Conference</button>
</section>
<!-- list of all available broadcasting rooms -->
<table style="width: 100%;" id="rooms-list"></table>
<!-- local/remote videos container -->
<div id="videos-container"></div>
</section>
<script>
var connection = new RTCMultiConnection();
connection.session = {
audio: true,
video: true
};
connection.onstream = function(e) {
e.mediaElement.width = 600;
videosContainer.insertBefore(e.mediaElement, videosContainer.firstChild);
rotateVideo(e.mediaElement);
scaleVideos();
};
function rotateVideo(mediaElement) {
mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)';
setTimeout(function() {
mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)';
}, 1000);
}
connection.onstreamended = function(e) {
e.mediaElement.style.opacity = 0;
rotateVideo(e.mediaElement);
setTimeout(function() {
if (e.mediaElement.parentNode) {
e.mediaElement.parentNode.removeChild(e.mediaElement);
}
scaleVideos();
}, 1000);
};
var sessions = {};
connection.onNewSession = function(session) {
if (sessions[session.sessionid]) return;
sessions[session.sessionid] = session;
var tr = document.createElement('tr');
tr.innerHTML = '<td><strong>' + session.sessionid + '</strong> is running a conference!</td>' +
'<td><button class="join">Join</button></td>';
roomsList.insertBefore(tr, roomsList.firstChild);
var joinRoomButton = tr.querySelector('.join');
joinRoomButton.setAttribute('data-sessionid', session.sessionid);
joinRoomButton.onclick = function() {
this.disabled = true;
var sessionid = this.getAttribute('data-sessionid');
session = sessions[sessionid];
if (!session) throw 'No such session exists.';
connection.join(session);
};
};
var videosContainer = document.getElementById('videos-container') || document.body;
var roomsList = document.getElementById('rooms-list');
document.getElementById('setup-new-conference').onclick = function() {
this.disabled = true;
connection.open(document.getElementById('conference-name').value || 'Anonymous');
};
// setup signaling to search existing sessions
connection.connect();
(function() {
var uniqueToken = document.getElementById('unique-token');
if (uniqueToken)
if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '<h2 style="text-align:center;"><a href="' + location.href + '>Share this link</a></h2>';
else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-');
})();
function scaleVideos() {
var videos = document.querySelectorAll('video'),
length = videos.length,
video;
var minus = 130;
var windowHeight = 700;
var windowWidth = 600;
var windowAspectRatio = windowWidth / windowHeight;
var videoAspectRatio = 4 / 3;
var blockAspectRatio;
var tempVideoWidth = 0;
var maxVideoWidth = 0;
for (var i = length; i > 0; i--) {
blockAspectRatio = i * videoAspectRatio / Math.ceil(length / i);
if (blockAspectRatio <= windowAspectRatio) {
tempVideoWidth = videoAspectRatio * windowHeight / Math.ceil(length / i);
} else {
tempVideoWidth = windowWidth / i;
}
if (tempVideoWidth > maxVideoWidth)
maxVideoWidth = tempVideoWidth;
}
for (var i = 0; i < length; i++) {
video = videos[i];
if (video)
video.width = maxVideoWidth - minus;
}
}
window.onresize = scaleVideos;
</script>
</article>
<a href="" class="fork-left"></a>
<!-- commits.js is useless for you! -->
<script src="" async="">
</script>
</body>
</html>
</apex:page>
Demo
- Setup a conference
- Open the same demo page/tab in another machine and Join the listed conference
- Video Conferencing
Demo Video
Because I could not be on two different machines at the same time I used (Nivea and Macbook case :)) what you are seeing in the snapshot.