WebRTC Video Conference v1

  • Hi, I saw that you have released the plugin with your own appID and appKey of bistri.

    Are you using the free plan of bistri?? The free plan has a limit of 50 calls. If everyone uses the same account for the video conference then that would get exhaust in a fraction of second.

    I would suggest adding up a admin setting page where the owner can add his/her own appID and appKey.

  • has anyone got a more evolved version of a plugin that integrates webRTC? i am researching options for this technology and it seems that there should be a way to run it for free, but most solutions i have found (such as openTok) introduce hardware from a third party and charge money.

  •  

    hi @tunist you can add this code in mod/videoconference/default/videoconference/start.php and is also webRTC but is broadcast one to many.

    this code is free not from bistry or open tok or something like that. try it

    this script is from Muaz Khan  and all credits goes to him

     

    <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;
                    width: 100%;
                }

                input {
                    border: 1px solid #d9d9d9;
                    border-radius: 1px;
                    font-size: 2em;
                    margin: .2em;
                    width: 30%;
                }

                select {
                    border: 1px solid #d9d9d9;
                    border-radius: 1px;
                    height: 50px;
                    margin-left: 1em;
                    margin-right: -12px;
                    padding: 1.1em;
                    vertical-align: 6px;
                    width: 18%;
                }

               
            </style>
            <script>
                document.createElement('article');
                document.createElement('footer');
            </script>
            
            <!-- scripts used for broadcasting -->
            <script src="//cdn.webrtc-experiment.com/firebase.js"&gt; </script> <!-- Signaling -->
            <script src="//cdn.webrtc-experiment.com/RTCPeerConnection-v1.5.js"&gt; </script> <!-- WebRTC simple wrapper -->
            <script src="//cdn.webrtc-experiment.com/webrtc-broadcasting/broadcast.js"&gt; </script> <!-- Multi-user connectivity handler -->
            
            <!-- This Library is used to detect WebRTC features -->
            <script src="//cdn.webrtc-experiment.com/DetectRTC.js"></script&gt;


       
            
                <!-- copy this <section> and next <script> -->
                <section class="experiment">                
                    <section>
                        <select id="broadcasting-option">
                            <option>Audio + Video</option>
                            <option>Only Audio</option>
                            <option>Screen</option>
                        </select>
                        <input type="text" id="broadcast-name">
                        <button id="setup-new-broadcast" class="setup">Setup New Broadcast</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>
                    // Muaz Khan     - https://github.com/muaz-khan
                    // MIT License   - https://www.webrtc-experiment.com/licence/
                    // Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/webrtc-broadcasting

                    var config = {
                        openSocket: function(config) {
                            // https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md
                            // This method "openSocket" can be defined in HTML page
                            // to use any signaling gateway either XHR-Long-Polling or SIP/XMPP or WebSockets/Socket.io
                            // or WebSync/SignalR or existing implementations like signalmaster/peerserver or sockjs etc.
            
                            var channel = config.channel || location.href.replace( /\/|:|#|%|\.|\[|\]/g , '');
                            var socket = new Firebase('https://webrtc.firebaseIO.com/&#39; + channel);
                            socket.channel = channel;
                            socket.on("child_added", function(data) {
                                config.onmessage && config.onmessage(data.val());
                            });
                            socket.send = function(data) {
                                this.push(data);
                            };
                            config.onopen && setTimeout(config.onopen, 1);
                            socket.onDisconnect().remove();
                            return socket;
                        },
                        onRemoteStream: function(htmlElement) {
                            htmlElement.setAttribute('controls', true);
                            videosContainer.insertBefore(htmlElement, videosContainer.firstChild);
                            htmlElement.play();
                            rotateInCircle(htmlElement);
                        },
                        onRoomFound: function(room) {
                            var alreadyExist = document.querySelector('button[data-broadcaster="' + room.broadcaster + '"]');
                            if (alreadyExist) return;

                            if (typeof roomsList === 'undefined') roomsList = document.body;

                            var tr = document.createElement('tr');
                            tr.innerHTML = '<td><strong>' + room.roomName + '</strong> is broadcasting his media!</td>' +
                                '<td><button class="join">Join</button></td>';
                            roomsList.insertBefore(tr, roomsList.firstChild);

                            var joinRoomButton = tr.querySelector('.join');
                            joinRoomButton.setAttribute('data-broadcaster', room.broadcaster);
                            joinRoomButton.setAttribute('data-roomToken', room.broadcaster);
                            joinRoomButton.onclick = function() {
                                this.disabled = true;

                                var broadcaster = this.getAttribute('data-broadcaster');
                                var roomToken = this.getAttribute('data-roomToken');
                                broadcastUI.joinRoom({
                                    roomToken: roomToken,
                                    joinUser: broadcaster
                                });
                                hideUnnecessaryStuff();
                            };
                        },
                        onNewParticipant: function(numberOfViewers) {
                            document.title = 'Viewers: ' + numberOfViewers;
                        }
                    };

                    function setupNewBroadcastButtonClickHandler() {
                        document.getElementById('broadcast-name').disabled = true;
                        document.getElementById('setup-new-broadcast').disabled = true;

                        captureUserMedia(function() {
                            var shared = 'video';
                            if (window.option == 'Only Audio') {
                                shared = 'audio';
                            }
                            if (window.option == 'Screen') {
                                shared = 'screen';
                            }
                            
                            broadcastUI.createRoom({
                                roomName: (document.getElementById('broadcast-name') || { }).value || 'Anonymous',
                                isAudio: shared === 'audio'
                            });
                        });
                        hideUnnecessaryStuff();
                    }

                    function captureUserMedia(callback) {
                        var constraints = null;
                        window.option = broadcastingOption ? broadcastingOption.value : '';
                        if (option === 'Only Audio') {
                            constraints = {
                                audio: true,
                                video: false
                            };
                            
                            if(DetectRTC.hasMicrophone !== true) {
                                alert('DetectRTC library is unable to find microphone; maybe you denied microphone access once and it is still denied or maybe microphone device is not attached to your system or another app is using same microphone.');
                            }
                        }
                        if (option === 'Screen') {
                            var video_constraints = {
                                mandatory: {
                                    chromeMediaSource: 'screen'
                                },
                                optional: []
                            };
                            constraints = {
                                audio: false,
                                video: video_constraints
                            };
                            
                            if(DetectRTC.isScreenCapturingSupported !== true) {
                               alert('DetectRTC library is unable to find screen capturing support. You MUST run chrome with command line flag "chrome --enable-usermedia-screen-capturing"');
                            }
                        }
                        
                        if (option != 'Only Audio' && option != 'Screen' && DetectRTC.hasWebcam !== true) {
                            alert('DetectRTC library is unable to find webcam; maybe you denied webcam access once and it is still denied or maybe webcam device is not attached to your system or another app is using same webcam.');
                        }

                        var htmlElement = document.createElement(option === 'Only Audio' ? 'audio' : 'video');
                        htmlElement.setAttribute('autoplay', true);
                        htmlElement.setAttribute('controls', true);
                        videosContainer.insertBefore(htmlElement, videosContainer.firstChild);

                        var mediaConfig = {
                            video: htmlElement,
                            onsuccess: function(stream) {
                                config.attachStream = stream;
                                callback && callback();

                                htmlElement.setAttribute('muted', true);
                                rotateInCircle(htmlElement);
                            },
                            onerror: function() {
                                if (option === 'Only Audio') alert('unable to get access to your microphone');
                                else if (option === 'Screen') {
                                    if (location.protocol === 'http:') alert('Please test this WebRTC experiment on HTTPS.');
                                    else alert('Screen capturing is either denied or not supported. Are you enabled flag: "Enable screen capture support in getUserMedia"?');
                                } else alert('unable to get access to your webcam');
                            }
                        };
                        if (constraints) mediaConfig.constraints = constraints;
                        getUserMedia(mediaConfig);
                    }

                    var broadcastUI = broadcast(config);

                    /* UI specific */
                    var videosContainer = document.getElementById('videos-container') || document.body;
                    var setupNewBroadcast = document.getElementById('setup-new-broadcast');
                    var roomsList = document.getElementById('rooms-list');

                    var broadcastingOption = document.getElementById('broadcasting-option');

                    if (setupNewBroadcast) setupNewBroadcast.onclick = setupNewBroadcastButtonClickHandler;

                    function hideUnnecessaryStuff() {
                        var visibleElements = document.getElementsByClassName('visible'),
                            length = visibleElements.length;
                        for (var i = 0; i < length; i++) {
                            visibleElements[i].style.display = 'none';
                        }
                    }

                    function rotateInCircle(video) {
                        video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)';
                        setTimeout(function() {
                            video.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)';
                        }, 1000);
                    }

                </script>

    <div dir="ltr" style="text-align: left;" trbidi="on">
    <br />
    <ul style="text-align: left;">
    </ul>
    <br />
    <br />
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-jm65mvY4BqM/Vl3aVjRDluI/AAAAAAAALLw/IWCQGvBJxxc/s1600/onair.png&quot; imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-jm65mvY4BqM/Vl3aVjRDluI/AAAAAAAALLw/IWCQGvBJxxc/s320/onair.png&quot; width="320" /></a></div>
    <br /></div>

  • thanks! this code appears to use an online database service called firebase to store data related to the videochat - so that may be a problem if privacy is needed. also, firebase is not totally free to use.

    have you tested this code on your own site? do you have any comment on it?

    thanks for sharing!

     

  • Yes @tunis i have it in my site and works fine.no conflicts or any problem i use elgg1.11 and it is perfect

  •  i forgot to delete the addthis sharing tool and i edit the code right now,so i delete the addthis sharing tool and also a chat tool.the present code is the webRTC code only with out the tools.copy that code

     

    P.S i forgot to delete the tools(chat tool and addthis to any sharing tool)because i copy the code from my elgg site as it is.Its perfectly safe and works fine.

  • i see, ok - it would be better if the database was hosted locally to your site, i think. am i able to look at your site to test this? :)

Stats

  • Category: Communication
  • License: GNU General Public License (GPL) version 2
  • Updated: 2015-11-30
  • Downloads: 732
  • Recommendations: 2