diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 049c3d1d..4bcb70bc 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -1,3 +1,7 @@ +video{ + -webkit-transform: scaleX(-1); + transform: scaleX(-1); +} .webrtc{ display: none; position: absolute; @@ -11,15 +15,18 @@ .webrtc, .activeCam{} .activeCam video{ position: absolute; - width: 300px; - height: 20%; + height: 25%; top: 10px; - right: 10px; margin: 5px; + right: -100px; + transition: all 0.2s ease; +} +.activeCam:hover video{ + right: 10px; } .activeCam video#myCamVideo{ width: 200px; - height: 100px; + height: 113px; } /*CSS size for 2 - 3 elements*/ diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 4a875af2..a0b6c0b8 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -1,3 +1,8 @@ +const videoConstraint: {width : any, height: any, facingMode : string} = { + width: { ideal: 1280 }, + height: { ideal: 720 }, + facingMode: "user" +}; export class MediaManager { localStream: MediaStream; remoteVideo: Array = new Array(); @@ -6,7 +11,10 @@ export class MediaManager { cinema: any = null; microphoneClose: any = null; microphone: any = null; - constraintsMedia = {audio: true, video: true}; + constraintsMedia : {audio : any, video : any} = { + audio: true, + video: videoConstraint + }; getCameraPromise : Promise = null; constructor() { @@ -47,7 +55,7 @@ export class MediaManager { enabledCamera() { this.cinemaClose.style.display = "none"; this.cinema.style.display = "block"; - this.constraintsMedia.video = true; + this.constraintsMedia.video = videoConstraint; this.localStream = null; this.myCamVideo.srcObject = null; } @@ -106,6 +114,13 @@ export class MediaManager { .then((stream: MediaStream) => { this.localStream = stream; this.myCamVideo.srcObject = this.localStream; + + //TODO resize remote cam + /*console.log(this.localStream.getTracks()); + let videoMediaStreamTrack = this.localStream.getTracks().find((media : MediaStreamTrack) => media.kind === "video"); + let {width, height} = videoMediaStreamTrack.getSettings(); + console.info(`${width}x${height}`); // 6*/ + return stream; }).catch((err) => { console.error(err);