Unable to seperate video and screen container.

[shahulinfo6]

Hi Muaz bro. I'm installed all-in-one demo for audio+video+screen (https://www.webrtc-experiment.com/RTCMultiConnection/all-in-one.html) it works properly but i dont know how to change the width of screensharing container and video container seperately? i want to display screen share as seperate container and video as seperate container.Please help me how to seperate video and screenshare different part of the page with various width and height? and also i added screen share as a buton click to start share screen using document.getElementById('share-screen').onclick = function() { connection.addStream({ screen: true, oneway: true });}; And stop stream using document.getElementById('stop-screen').onclick = function() { connection.removeStream({ screen: true,
stop: true
});}; After that i'm unable to start share screen again.

[pbssubhash]

+1

[muaz-khan]

v3 has this method: connection.resetScreen().

onstream event supports event.stream.isScreen boolean. This boolean can be used to differentiate between screen and other formats. (Supported booleans: isAudio, isVideo or isScreen)

Use window.screenStream.stop() instead of removeStream. The "stop" method should automatically remove stream from remote users' sides.

Please check this wiki for reference:

• https://github.com/muaz-khan/RTCMultiConnection/wiki/How-to-remove-video-on-user-left

[shahulinfo6]

Thank you for your response,Can you please let me know . i want to display screen share as seperate container and video as seperate container.Please help me how to seperate video and screenshare different part of the page with various width and height? and also how to seperate local video and remote video container size one-to-one video call

[muaz-khan]

connection.autoCreateMediaElement = false;
connection.onstream = function(event) {
    if(event.stream.isScreen === true) {
         handleScreen(event);
    }

    if(event.stream.isVideo === true) {
         handleCamera(event);
    }
};

function handleScreen(event) {
    let screenViewer = document.querySelector('#screen-viewer');
    screenViewer.srcObject = event.stream;
}

function handleCamera(event) {
    let videosContainer = document.querySelector('#videos-container');
    let video = document.createElement('video');
    video.autoplay = true;
    video.muted = false;
    video.controls = true;
    video.srcObject = event.stream;
    videosContainer.appendChild(video);
}

event object

event => {
    userid: 'string',
    extra: {},
    stream: {
        isScreen: boolean,
        isVideo: boolean,
        isAudio: boolean
    },
     type: 'string', // local or remote
}

[shahulinfo6]

Thank you again for your quickest and valuable response, I'm using RTCMultiConnection-master/demos/One-to-One.html demo its works fine on my local system but it contains single div for both local and remote videos but i want to separate this videos-container div and need to give different width for local and remote video container. please help me, how to do this? where i need to change this? Sorry i don't know where i need to change the above source given by you for (Audio-Video-Screen.html ) and alsoi would like to know RTCmulticonnection demos will work on cross browsers?.