stream and resolution issues in screenshare..

[santhoshreddyk]

Hi,

I got couple of issues in screen share. Please be kind to address them.

issue 1: I have mixed up screenshare and quickconnect module. once Conneciton is established between two peers only chat will be available. i am giving chance to user to pic screenshare or video chat, once he pics his choice respected stream gets added instantly. I am using Quickconnect in reactive() mode. but issue here is before adding any stream by default it is showing black closed stream in one end with label as 'default'.

Logs:
current active stream count = 1 index.js:83
attempting render, stream: MediaStream {onremovetrack: null, onaddtrack: null, onended: null, ended: false, id: "default"…}
ended: false
id: "default"
label: "default"
onaddtrack: null
onended: null
onremovetrack: null__proto__: MediaStream index.js:332
dc open for peer: ci1en0ps800003o5719ygwten

image:

Because of this issue even i add another stream at other end it is not working.

Issue 2:

Shared screen resolution is not good. Even i change resolution to 1080/720 in constraints object, the letters in shared screen are not readable from other end.

Image:

--> Code i am using for the abobe two issues is. /site/index.js

var quickconnect = require('rtc-quickconnect');
var captureConfig = require('rtc-captureconfig');
var screenshare = require('rtc-screenshare');
var media = require('rtc-media');
var crel = require('crel');
var qsa = require('fdom/qsa');
var tweak = require('fdom/classtweak');
var reRoomName = /^/room/(.*?)/?$/;
var room = location.pathname.replace(reRoomName, '$1').replace('/', '');

// local & remote video areas
var local = qsa('.local')[0];
var remotes = qsa('.remote');

// get the message list DOM element
var messages = qsa('#messageList')[0];
var chat = qsa('#commandInput')[0];

// data channel & peers
var channel;
var peerMedia = {};

// use google's ice servers
var iceServers = [
{ url: 'stun:stun.l.google.com:19302' }
];

// capture local media
localMedia = null;

streamObj = null;

screenSharee = function(){
stopSharing();
screenshare.window(function(err, constraints) {
if (err) {
return console.error('Could not capture window: ', err);
}
console.log('attempting capture with constraints: ', constraints);
localMedia = media({ constraints: constraints })
.on('error', function(err) {
console.error('Could not capture: ', err);
});
localMedia.once('capture', function(stream) {
streamObj = stream;
qConnect.addStream(stream);
});
localMedia.render(local);
});
}

videoConf = function(){
stopSharing();
localMedia = media({
constraints: captureConfig('camera min:1280x720').toConstraints()
});
localMedia.once('capture', function(stream) {
streamObj = stream;
qConnect.addStream(stream);
})
}

stopSharing = function() {
if(streamObj) {
qConnect.removeStream(streamObj);
streamObj.stop();
localMedia.stop();
}
}

// render a remote video
function renderRemote(id, stream) {
var activeStreams;

// create the peer videos list
peerMedia[id] = peerMedia[id] || [];

activeStreams = Object.keys(peerMedia).filter(function(id) {
return peerMedia[id];
}).length;

console.log('current active stream count = ' + activeStreams);
peerMedia[id] = peerMedia[id].concat(media(stream).render(remotes[activeStreams % 2]));
}

function removeRemote(id) {
var elements = peerMedia[id] || [];

// remove old streams
console.log('peer ' + id + ' left, removing ' + elements.length + ' elements');
elements.forEach(function(el) {
el.parentNode.removeChild(el);
});
peerMedia[id] = undefined;
}

qConnect = quickconnect(location.href + '../../', {room: room, iceServers: iceServers}).reactive().createDataChannel('chat')
.on('stream:added', renderRemote)
.on('stream:removed', removeRemote)
.on('channel:opened:chat', function(id, dc) {
qsa('.chat').forEach(tweak('+open'));
dc.onmessage = function(evt) {
if (messages) {
messages.appendChild(crel('li', evt.data));
}
};
channel = dc;
console.log('dc open for peer: ' + id);
});

// handle chat messages being added
if (chat) {
chat.addEventListener('keydown', function(evt) {
if (evt.keyCode === 13) {
messages.appendChild(crel('li', { class: 'local-chat' }, chat.value));
chat.select();
if (channel) {
channel.send(chat.value);
}
}
});
}

[silviapfeiffer]

You probably need to use a video resolution that matches your screen size to get better quality video. You're not limited to HD, so just pick your actual screen resolution.

[DamonOehlman]

@santhoshreddyk I'll put together a couple of examples for you next week in the faq repository which attempts to address each of the issues you've encountered.

[santhoshreddyk]

Thanks @DamonOehlman . :)

[DamonOehlman]

@santhoshreddyk The first of the code samples that shows how to handle the initial empty stream you are seeing is available here:

https://github.com/rtc-io/faq/blob/gh-pages/examples/dynamic-screenshare.js

Essentially, that initial video stream you are seeing is a default stream that is added to the connection by Chrome when a Peer connection is created with no "real" media streams or data channels. At the moment, I built some logic into an experimental package called "rtc-ui" that will not render a video element created from that stream because it is never playable (which is why is black).

I'm also considering making a change to rtc-quickconnect (see rtc-io/rtc-quickconnect#31) which will not trigger the stream:added event for this default stream which will also deal with the problem...

[DamonOehlman]

@santhoshreddyk I'm not going to be able to make that change in quickconnect as it effects Chrome <-> Firefox connectivity (see comments against the quickconnect issue for more details).

Also, I'll provide you an update when I've worked out how to capture at a resolution best for a window as it's not going to be as simple as matching resolution to desktop size.

[santhoshreddyk]

I could restrict the fake stream from rendering by having a condition in renderRemote function (if(stream.id != 'default') some thing like this.) . If i add any other stream from other client (qc.addStream(stream) or broadcast(stream)), it is getting rendered but when i remove it ((qc.removeStream(stream)) stream:removed event is getting triggered.

I managed to stop the fake stream from rendering, but i dont understand why remove:stream event is not getting triggered.

[DamonOehlman]

Good question - my thought is that the fake stream is never actually removed by chrome and the connection just maintains two streams for it's lifetime. I will investigate though...

[santhoshreddyk]

Hi Damon,

Thanks for fixing resolution issue. Shared screen is looking superb now.
Did you get a chance to look at the fake stream issue?

[DamonOehlman]

@santhoshreddyk Awesome - nothing further on the fake stream. I'll create a separate issue on rtc-quickconnect to investigate it further. Hopeful that I should get some time on this today.