Peer-to-Peer WebRTC Videochat for two front end users

[dsgrafiniert]

I want to enable users of my web-app to video-chat with each other (one-to-one chat) via your plugin.

I thought about using a unique room-name for each face-to-face chat. However, it would be great to enable WebRTC Chat automatically after connecting to the room.

Is this possible currently?

[vahidhedayati]

The problem with such a thing would be defining who the primary / secondary person would be.

None the less it is possible and you would then have to provide two links:

There are probably a variety of different ways of achieving this

(from defining wschat.js file that then calls the webrtc functionality upon what ever starting trigger you wish to call it from )

or more clearly by using the <chat:connect taglib call like above but to override the template file:

So if you have two controller actions

def TestController { 
 def master() { 
   render view: 'master'
 }
 def slave() { 
   render view: 'slave'
 }
}

Then you have a copy of _chat.gsp saved locally as these files

master.gsp <chat:connect template="/path/to/your/masterTemplate" chatuser="masterUser"> Line 392 Is how the button loads in webcam for master user L392 of usermenu.js sb.push('<a onclick="javascript:enableCam('+wrapIt(entry)+','+wrapIt('send')+','+wrapIt('webrtc')+');">'+enableRTC+'</a>\n'); The above javascript converts to, so add this in the master file after that last websocket.send block when successfully connected: enableCam('masterUser','send','webrtc');

slave.gsp <chat:connect template="/path/to/your/slaveTemplate" chatuser="slaveUser"> Line 347 Is how the button loads in webcam for master user L347 of usermenu.js sb.push('<a onclick="javascript:enableCam('+wrapIt(friend)+','+wrapIt('view')+','+wrapIt('webrtc')+');">'+webrtc+'</a>\n');

The above java script converts to, so add this in the slave file : enableCam('masterUser','view','webrtc');

Then add each enableCam block for each slave / master to each override template. So when user Opens connection _chat.gsp you then call the java script that the user would trigger when they click it manually.

In short copy that _chat template from plugin into two files then in the segment that below happens enable 1 or the other comment depending on the file

function processOpen(message) {
        if (debug == "on") {
            console.log('${g.message(code:'wschat.connecting.user', default:'Opening  connection for to')} ${bean.chatuser}');
        }
        <g:if test="${!bean.chatuser}">
            $('#chatMessages').append("${g.message(code:'wschat.no.username.error', default:'Chat denied no username')} \n");
            webSocket.send("DISCO:-"+user);
            webSocket.close();
        </g:if>
        <g:else>
            webSocket.send("CONN:-"+user+",chat");
            scrollToBottom();
            webSocket.send("/listRooms");
               //enableCam('masterUser','view','webrtc');   // SLAVE TEMPLATE
               //enableCam('masterUser','send','webrtc');`  // MASTER TEMPLATE
       </g:else>
    }

Hope it makes sense, if you get stuck write back

[vahidhedayati]

To do proper peer to peer webrtc is actually a lot of work.

https://www.webrtc-experiment.com/docs/WebRTC-PeerConnection.html

In the end the above method would hog the users machine per connection, I probably would do it differently: Receive the rtc traffic using the chatClient store that in the websocket session of a child connection created for the user a little bit like how the chat rooms are currently auto generated. That child chat client would then store the relevant rtc traffic this is all the information that is initially passed around when a connection is made.

To relay it a tweak has to be made in the actual traffic to be able to relay it, its working all of that out (which has really been what has put me off) Then to use it for relaying back to end users who wish to view it.

In the end the WebRTC connection is between PC-A & PC-B + any other iterations.

The actual traffic of RTC is magically done. Websockets aka the part that this plugin provides is the relyaing mechanism to get PC-A and PC-B to know about 1 another before they relay their RTC traffic between each other.

In short I have no time to start digging into this, if you have interest and want to contribute I am more than happy to add you as part of the project.

For now I will close this issue. I think what you had left as a heading was slightly different to what you wanted to achieve. Which for what you wanted to achieve this plugin (the latest version now working) should let you achieve.