My functionality is that I should be able to do a video call with remote user and also share screen while video calling whenever user wants. I have successfully implemented the video calling and screen sharing using webrtc. By default video camera stream came as a mirror so that's why I have rotated the video while displaying it at the remote side using css3. But due to that the screen sharing is also rotated. That's why screen share is coming as mirror screen.
My goal is to display both stream properly without mirror effect.I can do that if anyhow webrtc gives any identification for screen sharing stream or video stream or else in webrtc if they have any default settings to rotate the stream. Please let me know if anything like that webrtc provides. Below is my code for reference.
video-chat.component.html
<div class="video-chat-wrapper">
<video class="localVideo" playsinline autoplay muted></video>
<div class="remoteVideos"></div>
<div class="btn-sec">
<span><button (click)="onHangUp()" class="hangup"><span class="img-icon"><img src="../../../assets/image/hang-up.svg" alt="hangup icon"></span>Hang up</button>
</span>
<span><button (click)="startScreenShare()" class="hangup"><span class="img-icon"><img src="../../../assets/image/share-screen.svg" alt="screen share icon"></span>screen share</button>
</span>
<span><button (click)="AddMember('New Member','chat')" class="hangup"><span class="img-icon"><img src="../../../assets/image/add-icon.png" alt="add member icon"></span></button>
</span>
<span><button *ngIf="!muteAudioToggle" class="hangup" (click)="muteAudio()"><span class="img-icon"><img src="../../../assets/image/microphone.svg" alt="mute icon"></span>Mute</button>
</span>
<span><button *ngIf="muteAudioToggle" class="hangup" (click)="unMuteAudio()"><span class="img-icon"><img src="../../../assets/image/mute.svg" alt="Unmute icon"></span>Unmute</button>
</span>
</div>
</div>
video-chat.component.scss
video {
width: 100vw;
height: auto;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-moz-transform: rotateY(180deg);
}
//here I have reversed the video but the screen sharing will also render in the same video element and it will also be reversed which I do not want.
video-chat.component.ts -> handleremotestreamadded
handleRemoteStreamAdded(stream, id) {
console.log("stream", stream);
console.log("id", id);
/*
stream
MediaStream {
id: "FlwObFovZfg4vTKAYBfR8ORB24RbGh2ygkGV",
active: true,
onaddtrack: null,
onremovetrack: null,
onactive: null,
…
}
id: "FlwObFovZfg4vTKAYBfR8ORB24RbGh2ygkGV"
active: trueonaddtrack: nullonremovetrack: nullonactive: nulloninactive: null__proto__: MediaStream
main.js: 31332 id tZopoowBHfwWaG4zAAAP
*/
const currentId=id;
document .querySelector("#" + currentId.replace(/[^a-zA-Z]+/g, "").toLowerCase()) .remove();
const remoteVideo=document.createElement("video");
remoteVideo.srcObject=stream;
remoteVideo.setAttribute( "id", id.replace(/[^a-zA-Z]+/g, "").toLowerCase());
remoteVideo.setAttribute("playsinline", "true");
remoteVideo.setAttribute("autoplay", "true");
remoteVideo.volume=0.6;
this.remoteVideos.appendChild(remoteVideo);
if (this.remoteVideos.querySelectorAll("video").length===1) {
this.remoteVideos.setAttribute("class", "one remoteVideos");
}
else {
this.remoteVideos.setAttribute("class", "remoteVideos");
}
const tracks=this.localStream.getTracks();
tracks.forEach(track=> {
console.log("track ", track);
}
);
/*
track
MediaStreamTrack {kind: "audio", id: "62ee15c5-7186-4a39-b945-d855f8ad712e", label: "Default - Microphone (Realtek High Definition Audio)", enabled: true, muted: false, …}
kind: "audio"
id: "62ee15c5-7186-4a39-b945-d855f8ad712e"
label: "Default - Microphone (Realtek High Definition Audio)"
enabled: false
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
__proto__:
MediaStreamTrack
main.js:31376
track
MediaStreamTrack {kind: "video", id: "25937d7c-466c-4b21-a1e9-f6fc1ed12ebb", label: "USB2.0 HD UVC WebCam (13d3:5666)", enabled: true, muted: false, …}
kind: "video"
id: "25937d7c-466c-4b21-a1e9-f6fc1ed12ebb"
label: "USB2.0 HD UVC WebCam (13d3:5666)"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
__proto__: MediaStreamTrack
*/
}
video-chat.component.ts -> startScreenSharing()
startScreenShare() {
navigator.mediaDevices["getDisplayMedia"](this.screenContraints)
.then(stream => {
this.isScreenShare = true;
console.log("media device steam", stream);
this.screenShareStream = stream;
/* onGettingSteam(stream); */
if (stream) {
this.getUserMediaSuccess(stream); //this function simply displays stream to a video element.
stream.oninactive = () => {
// console.log("SCREEN SHARE HAS BEEN STOPPED NOW!!!!!!!!!!!!!")
this.isScreenShare = false;
if (!this.hangedUpWhileSSActive) {
// checks if the user wants to hang up or wants to continue with the video streaming
navigator.mediaDevices
.getUserMedia(this.constraints)
.then(
this.getUserMediaSuccess.bind(this),
this.getUserMediaError.bind(this)
);
}
};
}
}, this.getUserMediaError.bind(this))
.catch(this.getUserMediaError.bind(this));
}
I am again stating my goal in brief : I want to let users screen share at any time they want while having a video call, so when users clicks the screen share button instead of camera capture stream, I am sending the screen sharing stream by Screen Sharing API. but as video needs to be rotated 180deg(text appears reverse) at remote side, screen sharing is also rotated as it is also a video stream(and they are displayed in the same video element) and I am unable to differentiate at remote side.
Logical answers are also welcomed. Any help is appreciated.
Thank you in advance!!
