I'm building a video chat application using Node, Express, Socket.io, and WebRTC by following this tutorial: Link blog
So on my edge browser, after i enabled the video stream on my application and my webcam is activated, i noticed that when i right click on the video area (video element) and click on show all controls, i found that video player navigation bar is inverted.
Do you have any explication on why the nav bar is inverted? (check theses screenshots for inversed nav bar screenshot 1 & screenshot 2)
Below are my codes:
room.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>videoChatApp</title>
<link rel="stylesheet" href="style.css" />
<script src="/socket.io/socket.io.js"></script>
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>";
</script>
</head>
<body>
<div >
<div >
<h3>Video Chat</h3>
</div>
</div>
<div >
<div >
<div >
<div id="video-grid"></div>
</div>
<div >
<div >
<div id="stopVideo" >
<i ></i>
</div>
<div id="muteButton" >
<i ></i>
</div>
</div>
<div >
<div id="inviteButton" >
<i ></i>
</div>
</div>
</div>
</div>
<div >
<div >
<div ></div>
</div>
<div >
<input
id="chat_message"
type="text"
autocomplete="off"
placeholder="Type message here..."
/>
<div id="send" >
<i aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
script.js:
let myVideoStream;
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
myVideo.muted = true;
navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
});
const addVideoStream = (video, stream) => {
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
videoGrid.append(video);
});
};
server.js:
const express = require('express')
const app = express()
const { v4: uuidv4 } = require("uuid");
app.set('view engine', 'ejs')
app.use(express.static('public'));
app.get('/', (req, res) => {
res.redirect(`/${uuidv4()}`);
});
app.get("/:room", (req, res) => {
res.render("room", { roomId: req.param.room });
});
app.listen(3030, () => {
console.log('Server is runing on port 3030');
})
style.css:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
:root {
--main-darklg: #1d2635;
--main-dark: #161d29;
--primary-color: #2f80ec;
--main-light: #eeeeee;
font-family: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
height: 8vh;
position: relative;
width: 100%;
background-color: var(--main-darklg);
}
.logo > h3 {
color: var(--main-light);
}
.main {
overflow: hidden;
height: 92vh;
display: flex;
}
.main__left {
flex: 0.7;
display: flex;
flex-direction: column;
}
.videos__group {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background-color: var(--main-dark);
}
video {
height: 500px;
border-radius: 1rem;
margin: 0.5rem;
width: 900px;
object-fit: cover;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.options {
padding: 1rem;
display: flex;
background-color: var(--main-darklg);
}
.options__left {
display: flex;
}
.options__right {
margin-left: auto;
}
.options__button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
height: 50px;
border-radius: 5px;
color: var(--main-light);
font-size: 1.2rem;
width: 50px;
margin: 0 0.5rem;
}
.background__red {
background-color: #f6484a;
}
.main__right {
display: flex;
flex-direction: column;
flex: 0.3;
background-color: #242f41;
}
.main__chat_window {
flex-grow: 1;
overflow-y: scroll;
}
.main__chat_window::-webkit-scrollbar {
display: none;
}
.main__message_container {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.main__message_container > input {
height: 50px;
flex: 1;
font-size: 1rem;
border-radius: 5px;
padding-left: 20px;
border: none;
}
.messages {
display: flex;
flex-direction: column;
margin: 1.5rem;
}
.message {
display: flex;
flex-direction: column;
}
.message > b {
color: #eeeeee;
display: flex;
align-items: center;
text-transform: capitalize;
}
.message > b > i {
margin-right: 0.7rem;
font-size: 1.5rem;
}
.message > span {
background-color: #eeeeee;
margin: 1rem 0;
padding: 1rem;
border-radius: 5px;
}
#video-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#showChat {
display: none;
}
.header__back {
display: none;
position: absolute;
font-size: 1.3rem;
top: 17px;
left: 28px;
color: #fff;
}
@media (max-width: 700px) {
.main__right {
display: none;
}
.main__left {
width: 100%;
flex: 1;
}
video {
height: auto;
width: 100%;
}
#showChat {
display: flex;
}
}
CodePudding user response:
You are applying a 180 degree rotation to the element (i.e. mirroring it)
by using transform: rotateY(180deg)
in your CSS file which also rotates the controls.
For WebRTC usage the common approach to solving this is not to use the build-in controls of the video element.