Show username to connect video

289 views
Skip to first unread message

Jordan Martins

unread,
Aug 31, 2015, 9:00:52 AM8/31/15
to EasyRTC
Show username to connect video

Example: The user (I) "Paul" Open User Video (My partner) "Maria".
In that case I would like to know how to capture the names (ID) of users and show the videos below.

At the moment I can show the name below the video that I open.
Type: Below the video "Maria", I can show the name Maria.
However in my interlocutor screen, not appear Paulo my name.

How can I do that?
What the script / command line or should I use?

Eric Davies

unread,
Aug 31, 2015, 10:38:11 AM8/31/15
to EasyRTC
I'm sorry but the phrasing of your question renders it difficult to understand what you are asking.

Anirban Dutta

unread,
Aug 31, 2015, 10:49:50 AM8/31/15
to EasyRTC
Please explain how you have showed the name "Maria" below video of maria. Your name should also appear to other, If you've used "easyrtc.setUsername()" method before calling  easyrtc.connet(..).

Jordan Martins

unread,
Aug 31, 2015, 11:04:02 AM8/31/15
to EasyRTC
Sorry, I am that I am using Google translator.

I will try to be simplified:
Would you like to learn how to add the user's name in the videos.
Type: User "A" connects the video with User "B".

I (User A) "jmartins_admin" open connected with "casal_martins".
Notice that the attached image appears to me, the video of "casal_martins" with the name of it just below the video.

In the screen (User B) "casal_martins" appears my video (I am the blonde), but my name "jmartins_admin" does not appear.
test-eeasertc.jpg

Jordan Martins

unread,
Aug 31, 2015, 11:06:38 AM8/31/15
to EasyRTC
I used this method to get the caller's name. I think I'm doing something wrong.
Can you tell me what to do and where should I do?

function performCall(otherEasyrtcid) {
  var acceptedCB = function(accepted, easyrtcid) {
    if( !accepted ) {
      alert("Sorry, your call to " + easyrtcid + " was rejected");
    }
  };
  
  var x = document.getElementsByClassName("ConectadoCom");
  x[0].innerHTML = easyrtc.idToName(otherEasyrtcid);
    
  var successCB = function() {};
  var failureCB = function() {};
  easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
}

Anirban Dutta

unread,
Aug 31, 2015, 11:34:47 AM8/31/15
to EasyRTC
You have used easyrtc.idToName() to get connected user's name attached to their easyrtcid. I would have used setUserName(myname) to let other people know my name, then idToName () to get other's name.

setUserName has to be performed before easyrtc.connect();

If it is still unclear, please draw a detalied diagram where you are stuck and attach images like second last reply.  That would be more easier than google translate. :)

Jordan Martins

unread,
Aug 31, 2015, 12:04:47 PM8/31/15
to EasyRTC
Yes, I'm using setUserName.
As you can see in the Annex to the previous message, missing just show my name along with my video on my caller's screen.

That's my problem. Understand?
What should you do to my name appears on screen who I call?
test-eeasertc-2.jpg

Jordan Martins

unread,
Aug 31, 2015, 12:05:46 PM8/31/15
to EasyRTC
test-eeasertc-2.jpg

Anirban Dutta

unread,
Aug 31, 2015, 1:24:09 PM8/31/15
to EasyRTC
I've understood that you've used setUsername(). But did you use that before you connect to other peer ? I mean before easyrtc.connect() ?

It seems your idToname() worked properly and you can see other party's name. You can put "console.log(easyrtcid)" right after setUsername() to see if setUsername is really functioning.

Jordan Martins

unread,
Aug 31, 2015, 1:57:44 PM8/31/15
to eas...@googlegroups.com
Yes, setUsername () is working perfectly.

The problem is not with setUsername ().

I just can not show the name (User A), below in the User B screen, where it appears the Video (User A)

follows new image attached. Note that in the right hand screen, the rectangle with red border actually should show the name (User A) "jmartin_admin"
test-eeasertc-3.jpg

Jordan Martins

unread,
Aug 31, 2015, 2:15:29 PM8/31/15
to eas...@googlegroups.com
correct image. Forget the image sent in the previous message.
test-eeasertc-3.jpg

Jordan Martins

unread,
Sep 1, 2015, 9:46:08 AM9/1/15
to EasyRTC
Hello Friend,
Help me please. I beg you for help.

Eric Davies

unread,
Sep 1, 2015, 11:12:04 AM9/1/15
to EasyRTC
I think I finally grasp what your problem is:

Person A calls person B.
Person B's name shows up on Person A's display, but person A's name doesn't show up on person B's display.

You've shown us some code where you display the name on the caller's side, but you haven't shown any code where you set the name on the receivers side. I'm guessing that you don't have any and that's the source of your problem.

I would suggest setting the textual label when a stream is received, rather than when a call is initiated.

If you are not using easyApp

    easyrtc.setStreamAcceptor( function(easyrtcid,stream,streamName) {
             ...  whatever you were doing before, if anything
             var x = document.getElementsByClassName("ConectadoCom");
             x[0].innerHtml = easyrtc.idToName(otherEasyrtcid);
        });

If you are using easyApp, then after you start up easyApp, do the below

    easyrtc.setOnCall( function(easyrtcid, slot) {
             ... whatever y ou were doing before, if anything
             var x = document.getElementsByClassName("ConectadoCom");
             x[0].innerHtml = easyrtc.idToName(otherEasyrtcid);
        });

Incidentally, setting using x[0].innerHtml from content supplied by another user is inherently risky. The other caller may have embedded javascript in their easyrtcid. The server, as it's currently coded, will prevent that from happening, but it's not something you should do in general. A better approach 
    x[0].appendChild( document.createTextNode( easyrtc.idToName(otherEasyrtcid)));
You'd need to make sure that x[0] had no children first.

Jordan Martins

unread,
Sep 1, 2015, 12:21:28 PM9/1/15
to eas...@googlegroups.com
Thank you very much for answering my friend.
Yes, I understood my problem.

Actually, I do not have the function to display the name (User A) along with the video on screen (User B).

It is exactly there that live my problem.
I do not know where to put the lines you suggested.

Follow my script attached, so you can analyze and gently I ask: help me.
assistente.js

Jordan Martins

unread,
Sep 2, 2015, 10:12:37 AM9/2/15
to eas...@googlegroups.com
Hello my friends,

You have any news about my question?
Already, thank you very much for your time.

Following your suggestion, I added, as it is below, but still did not work.

function connect() {
    easyrtc.setSocketUrl(":8080");
    easyrtc.setUsername(usuario); //setting username
    easyrtc.setRoomApiField('SectorZero',  'genero_user', genero);
    easyrtc.setRoomApiField('SectorZero',  'avatar_user', avatar);
    easyrtc.setPeerListener(addToConversation);
    easyrtc.setRoomOccupantListener(convertListToButtons);
    easyrtc.setRoomEntryListener(roomEntryListener);
    easyrtc.easyApp("easyrtc.instantMessagin", "selfVideo", ["callerVideo0", "callerVideo1", "callerVideo2"], loginSuccess, loginFailure); 
 }
 
  easyrtc.setOnCall( function(easyrtcid, slot) {
             var x = document.getElementsByClassName("ConectadoCom");
     x[0].appendChild( document.createTextNode( easyrtc.idToName(otherEasyrtcid)));
        });

Jordan Martins

unread,
Sep 2, 2015, 2:40:46 PM9/2/15
to EasyRTC
Hello,

Problem solved ... I'll just make some adjustments and put the solution here in case others need.

Jordan Martins

unread,
Sep 2, 2015, 8:49:34 PM9/2/15
to EasyRTC
As promised, here the ultimate solution to the problem I ask for help here.


easyrtc.setOnCall( function(easyrtcid, slot) {
        console.log("Conectado com: "  + easyrtc.idToName(easyrtcid) + " no Slot de Video: " + slot);
document.getElementById('slotVideo' + slot).innerHTML="";  //Clean the div before any action.
document.getElementById('slotVideo' + slot).style.display = 'block'; //Makes the div visible, if it was hidden before.
document.getElementById('slotVideo' + slot).innerHTML += easyrtc.idToName(easyrtcid); //Prints the User name in the div, connected to the video.
  });
easyrtc.setOnHangup( function(easyrtcid, slot){
        console.log("Conexão com " + easyrtc.idToName(easyrtcid) + " finalizada");
document.getElementById('slotVideo' + slot).style.display = 'none'; //Hides the div when the video connection is terminated.
    });

I warmly thank Eric and Anirban, by time and waived patience to help me.
Thank you very much from the heart!

Jordan Martins

unread,
Sep 17, 2015, 7:43:09 PM9/17/15
to EasyRTC
Hello gentlemen!

I found another difficulty:
I would add also the Avatar User before the username of it, as it was settled above.

Already have the avatar of the field, working, but can not enter the system above.

Inserting this:
imgAvatar = data [easyrtcid] .apiField.avatar_user.fieldValue;

here ?:
easyrtc.setOnCall (function (easyrtcid, slot) {
console.log ("Connected to" + easyrtc.idToName (easyrtcid) + "at the Video Slot:" + slot);
document.getElementById ('slotVideo' + slot) .innerHTML = ""; // Clean the div before any action.
document.getElementById ('slotVideo' + slot) .style.display = 'block'; // Makes the div visible, if it was hidden before.
document.getElementById ('slotVideo' + slot) .innerHTML + = easyrtc.idToName (easyrtcid); // Prints the User name in the div, connected to the video.
});

Eric Davies

unread,
Sep 17, 2015, 9:22:29 PM9/17/15
to EasyRTC
if you are trying to attach an image to an api field, the way you do it is 
    draw your image in a canvas, and then convert the canvas to a data url (which is a base64 encoded jpg or png, your choice, see http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/) and store the data url as a room api field.
   on the receiving client, you use the data url as the source for an image object.


Jordan Martins

unread,
Sep 17, 2015, 9:32:04 PM9/17/15
to EasyRTC
Hi Eric,

It's actually much simpler. What I am in pasando
imgAvatar = data [easyrtcid] .apiField.avatar_user.fieldValue;
It is a URL. With the URL I use html to read it.

That is, all I want is to make the data "imgAvatar" is entered here:
easyrtc.setOnCall (function (easyrtcid, slot) {
------------
});

Understand?
That's what I'm not getting. You know how I do it?

Jordan Martins

unread,
Sep 18, 2015, 8:16:43 AM9/18/15
to EasyRTC
I would like to spend the parameters of a field, for example:
imgAvatar = data [easyrtcid] .apiField.avatar_user.fieldValue;

Into:
easyrtc.setOnCall (function (easyrtcid, slot) {
document.getElementById ('slotVideo' + slot) .innerHTML = imgAvatar;
});

In the example above, should be printed: url_image

But "easyrtc.setOnCall" is not reading the information "imgAvatar"
Understand?

What should I do to get through (insert) information from a field within "easyrtc.setOnCall"?

Currently I can only put inside "easyrtc.setOnCall" information, such as: "easyrtc.idToName (easyrtcid)" and "easyrtcid".

But I need to add more information fields that I created. Understand?

Jordan Martins

unread,
Sep 18, 2015, 9:36:06 AM9/18/15
to EasyRTC
Eric, thank you!
I managed to solve.
Reply all
Reply to author
Forward
Message has been deleted
0 new messages