How to divide WebRTC by muaz-khan chat out-put into two columns? - webrtc

Question

I'm newbie in using WebRTC and I am using this git project by Muaz-khan. I have problem when divided chat output into two columns (User name 1 and User name 2), this is default of chat output
id of this div is #chat-output

Answer 1

Can you show code for example? I think you just create two html containers (left and rigth for example) and push messages first to the left, and messages from the second to the right.

Answer 2

I am using this demo of him , [ https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/TextChat%2BFileSharing.html].
Here is function that Text Message Out Put will put here in . I want to change it in two columns, such as for User name 1 : <div id="usename1"></div>, for user name 2 : <div id="username2"></div>
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return;
connection.send(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
}

Answer 3

Modify function appendDIV().
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.style.width = '100%';
if (event.data)
div.style.textAlign = 'left';
else
div.style.textAlign = 'right';
div.focus();
document.getElementById('input-text-chat').focus();
}
P.S. I apologize for the late reply :)