Inteygrate

Video Conferencing in Salesforce using WebRTC integration

Introduction

Muralidhar

Muralidhar

At inteygrate.com, I am trying out ways to integrate Salesforce to various other technologies.


webrtc salesforce webrtc integration video conferencing video chat

Video Conferencing in Salesforce using WebRTC integration

Posted by Muralidhar on .
Featured

webrtc salesforce webrtc integration video conferencing video chat

Video Conferencing in Salesforce using WebRTC integration

Posted by Muralidhar on .

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

Salesforce WebRTC GoInstant

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.

Customer support with Video Conferencing

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.
Customer support with Video Conferencing 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="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    </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="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
    <!-- commits.js is useless for you! -->
    <script src="//cdn.webrtc-experiment.com/commits.js" async="">
    </script>
</body>

</html>  
</apex:page>  


Demo

  1. Setup a conference

    Setup conference

  2. Open the same demo page/tab in another machine and Join the listed conference

    Join conference

  3. Video Conferencing

    WebRTC video conferencing demo

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.



Muralidhar

Muralidhar

https://inteygrate.com

At inteygrate.com, I am trying out ways to integrate Salesforce to various other technologies.

View Comments...