These are chat archives for andyet/SimpleWebRTC

22nd
Jan 2017
Beth Qiang
@bethqiang
Jan 22 2017 18:31
the examples i've seen using simple webrtc are just for video--how do i implement it if i just want the audio?
LuckyCyborg
@LuckyCyborg
Jan 22 2017 18:32

I do not want even audio!

Just a damned presence channel and the ability to send TEXT message to a specific user.... ;)

Beth Qiang
@bethqiang
Jan 22 2017 18:33
...i wasn't trying to any answer your question, i was asking one of my own...
@LuckyCyborg i'm not sure what a presence channel is, but if you just want the ability to send messages with text, a simple websocket server would be sufficient; no need to use webrtc...
LuckyCyborg
@LuckyCyborg
Jan 22 2017 18:48

Yes, you are right. One can use a simple websocket server to pass text messages. BUT here is a huge problem: the messages pass via server.

I want a direct communication channel between the two users. That could be the shiny DataChannel from WebRTC, and supported by SimpleWebRTC (if you open the Video and/or Audio, at least).

A presence channel is just a channel where every user subscribe, to announce his presence on-line.

Imagine a Chat, where you have a list of friends, who are (or not) on-line. And with the option of talking with one of them privately, in a damned Text Chat like on Facebook.

Heck, looks like any geek looks for Video Chats, while that simple and stupid, but very useful, TEXT chat is forgotten. WTF?

Remember? The thing where you see your friends in a list and clicking a button you can write: "Hi, buddy!" to one of them.
Radwan Abu-Odeh
@Radwan-AbuOdeh
Jan 22 2017 19:12
@bethqiang
I think you just need to request Audio only from user
getUserMedia({
        video: false,
        audio: true
    }, // success callback
    function(stream) {
        var audioEl = attachMediaStream(stream, document.getElementById('myAudio'), {
            // To prevent echo.
            muted: true,
            // attach as an audio element instead of video
            audio: true
        });
        var webrtc = new SimpleWebRTC({
            // we don't do video
            localVideoEl: '',
            remoteVideosEl: '',
            // dont ask for camera access
            autoRequestMedia: false,
            // dont negotiate video
            receiveMedia: {
                offerToReceiveAudio: 1,
                offerToReceiveVideo: 0
            }
        });

        // called when a peer has joined the room
        webrtc.on('createdPeer', function(peer) {
            // logic to add audio into a grouping element.
        });

        webrtc.joinRoom('ROOM_NAME');
    },
    // error callback
    function(error) {
        // handle error...
    });
I didn’t test the code, but this is how I think it should work,
Use getUserMedia - https://www.npmjs.com/package/getusermedia
and attachMediaStream - https://www.npmjs.com/package/attachmediastream
LuckyCyborg
@LuckyCyborg
Jan 22 2017 19:17

Stupid question (as coming from a PHP background)

I can use webrtc.on('createdPeer', function(peer) { to setup a DataChannel? For example the default "simplewebrtc" ?

In other hand, how I can update a local list of the peers which joined the channel, having the further ability to open a second DataChannel to one of them?
As in, what contains that "peer" parameter?
Beth Qiang
@bethqiang
Jan 22 2017 19:22
@Radwan-AbuOdeh thanks! i'll look into that :)
Radwan Abu-Odeh
@Radwan-AbuOdeh
Jan 22 2017 19:29

@LuckyCyborg

I don’t know exactly how it works, but I think createdPeer is just an event that is emmitted whenever a peer has joined the channel whether it is a video audio or data,

You can use the webrtc.on(‘createdPeer’, function(peer){….}) , to update a list you’ve created previously with the joined peers.

and the peer object, I didn’t find any documentation about it, but you can read its code on github
https://github.com/andyet/SimpleWebRTC/blob/master/peer.js

I am still learning how to use SimpleWebRTC, good luck everyone :smile:
LuckyCyborg
@LuckyCyborg
Jan 22 2017 19:53

@Radwan-AbuOdeh Thanks for your kind response. Still I hope you can help me, being stronger on the noble art of SimpleWebRTC, for my first "Help!"...

Look at this code:

                var startVideoChat = function () {
                    var webRTC = new SimpleWebRTC({
                        // The Signaling Server used by SimpleWebRTC.
                        url: "<?= $url; ?>",

                        // The local and remote Media configuration.
                        localVideoEl: 'chat-local-video',
                        remoteVideosEl: '',
                        autoRequestMedia: true
                    });

                    webRTC.on('readyToCall', function () {
                        webRTC.joinRoom('<?= $roomName; ?>');
                    });

                    webRTC.on('videoAdded', function (video, peer) {
                        $(video).addClass('skip');

                        $('#chat-remote-video').html(video);

                        // Enable the Direct Chat input.
                        $('#direct-chat-message').removeAttr('disabled');
                        $('#direct-chat-button').removeAttr('disabled');

                        if (peer && peer.pc) {
                            peer.pc.on('iceConnectionStateChange', function () {
                                var alertDiv = $('<div>')
                                        .addClass('alert');

                                switch (peer.pc.iceConnectionState) {
                                    case 'checking':
                                        alertDiv
                                            .addClass('alert-info')
                                            .html('<em class="fa fa-spinner fa-spin"></em> ' + "<?= __d('video_chat', 'Connecting to peer'); ?>");
                                        break;
                                    case 'connected':
                                        //no break
                                    case 'completed':
                                        alertDiv
                                            .addClass('alert-success')
                                            .html('<em class="fa fa-commenting"></em> ' + "<?= __d('video_chat', 'Connection established'); ?>");
                                        break;
                                    case 'disconnected':
                                        alertDiv
                                            .addClass('alert-info')
                                            .html('<em class="fa fa-frown-o"></em> ' + "<?= __d('video_chat', 'Disconnected'); ?>");
                                        break;
                                    case 'failed':
                                        alertDiv
                                            .addClass('alert-danger')
                                            .html('<em class="fa fa-times"></em> ' + "<?= __d('video_chat', 'Connection failed'); ?>");
                                        break;
                                    case 'closed':
                                        alertDiv
                                            .addClass('alert-danger')
                                            .html('<em class="fa fa-close"></em> ' + "<?= __d('video_chat', 'Connection closed'); ?>");
                                        break;
                                }

                                $('#connection-status').html(alertDiv);
                            });
                        }
                    });

                    webRTC.on('videoRemoved', function (video, peer) {
                        video.src = '';

                        // Disable the Direct Chat input.
                        $('#direct-chat-message').attr('disabled', 'disabled');
                        $('#direct-chat-button').attr('disabled', 'disabled');
                    });
                    webRTC.on('iceFailed', function (peer) {
                        var alertDiv = $('<div>')
                            .addClass('alert-danger')
                            .html('<em class="fa fa-close"></em> ' + "<?= __d('video_chat', 'Local connection failed'); ?>");

                        $('#connection-status').html(alertDiv);
                    });

                    webRTC.on('connectivityError', function (peer) {
                        var alertDiv = $('<div>')
                            .addClass('alert-danger')
                            .html('<em class="fa fa-close"></em> ' + "<?= __d('video_chat', 'Remote connection failed'); ?>");

                        $('#connection-status').html(alertDiv);
                    });

                    webRTC.on('channelMessage', function (peer, label, data) {
                        // Only handle messages from your dataChannel
                        if (label !== 'simplewebrtc') return;
                        else if (data.type === 'chatMessage') {
                            displayChatMessage(data.payload, 'online');
                        }
                    });

                    // The Direct Chat.
                    $('#direct-chat-button').on('click', function () {
                        var input = $('#direct-chat-message') .val();

                        if (input === '') return;

                        $('#direct-chat-message').val('');

                        // Prepare the message object.
                        var message = {
                            picture: '<?= $authUser->present()->picture(); ?>',
                            userName: '<?= $authUser->present()->name(); ?>',
                            message: emojione.toShort(input)
                        };

                        // Send the message directly via default Data Channel.
                        webRTC.sendDirectlyToAll('simplewebrtc', 'chatMessage', message);

                        // Show the message locally.
                        displayChatMessage(message, 'offline');
                    });
                };
Basically, this code give me also a TEXT chat, WHEN the Audio/Video is activated on both sides. It works, BUT I do not want Video, also I do not want Audio. Just the TEXT CHAT, nothing more.
Where you will change that, to activate only the DataChannel called "simplewebrtc", and the Audio/Video support on SimpleWebRTC to be ignored gracious?
I know, I should setup the options appropriately, BUT if I disable both the Audio and Video, the text chat stops working.
LuckyCyborg
@LuckyCyborg
Jan 22 2017 20:06
PS. The PHP elements which you see, they are there because that thing is part of a site written on PHP.
Beth Qiang
@bethqiang
Jan 22 2017 20:48
so the docs say that simplewebrtc operates over a socket.io connection--if i already have a socket.io connection going, would i be able to slip it into that one somehow and not have to create a new one?
LuckyCyborg
@LuckyCyborg
Jan 22 2017 22:21

Facts are that using the configuration's "nick" parameter, one could send even a specific Object to other peers, for example:

                    var webRTC = new SimpleWebRTC({
                        // The Signaling Server used by SimpleWebRTC.
                        url: "<?= $url; ?>",

                        // The local and remote Media configuration.
                        localVideoEl: 'chat-local-video',
                        remoteVideosEl: '',
                        autoRequestMedia: true,
                        nick: {
                            userid: '<?= $authUser->id; ?>',
                            username: '<?= $authUser->username; ?>',
                            realname: '<?= $authUser->present()->name(); ?>',
                            picture: '<?= $authUser->present()->picture(); ?>',
                            role: '<?= $authUser->role->name; ?>',
                        }
                    });

Would be very nice to be changed its name on something more meaningful, i.e. "data" or "metadata"

Come on! Is strange when your data field is called "nick"... ;)