<!DOCTYPE html>
<html lang="en">
    <head>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&display=swap"
            rel="stylesheet">

        <!-- for favicon -->
        <link rel="apple-touch-icon" sizes="180x180"
            href="favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32"
            href="favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16"
            href="favicon/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

        <!--  -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">



        <title>Chatters:Video-Chat</title>

        <!-- Stylesheets -->

        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <link rel="stylesheet" href="css/after.css">
        <link rel="stylesheet" href="css/hover.css">
        <link rel="stylesheet" href="css/textChat.css">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body style="background-color: #101010;">
      
    <header>
        <!-- nav section -->
        <nav class="navbar navbar-expand-lg ">
            <div class="container-fluid">
                <a class="navbar-brand" href="/"><img class="navChatterLogo"
                        src="https://chatters-lhfj.onrender.com/res/imgs/logo2.svg" alt="banner"></a>
                <button class="navbar-toggler " type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span
                        class=" material-symbols-outlined navbar-toggler-icon">
                        density_medium
                    </span>
                </button>
                <div class="routesDiv collapse navbar-collapse"
                    id="navbarNavAltMarkup">
                    <div class="routes navbar-nav">

                        <a
                            class="green green-hover-underline-animation nav-link "
                            aria-current="page" href="/">Home</a>
                        <a
                            class="neonBlue neonBlue-hover-underline-animation nav-link"
                            href="/text-chat">Text</a>
                        <!-- <a
                            class="orange orange-hover-underline-animation nav-link"
                            href="">Feedback</a> -->

                        <div class=" loginButtonDiv">
                            <form method="get" action="/login">

                                <button type="submit" class="login">Login</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main>
<div class="mainScreen">
    <video  class="you"></video>
    <video  class="stranger"></video>
</div>

    </main>
    
    
    <script src="/js/onClick.js"></script>
<script src="/socket.io/socket.io.js"></script>
    <script javascript>
const socket = io();
    //   socket.disconnect();

const options={
mime:"video/mp4"
};
        const yourVideo=document.querySelector(".you");
        const strangerVideo=document.querySelector(".stranger");
        yourVideo.muted=true;
        // yourVideo.controls=true;

        // function to add video To screen
function addVideoStream(video,stream){
    video.srcObject=stream;
    video.addEventListener("loadedmetadata",()=>{
        video.play();
    })
};
// checking or getting permissions
        navigator.mediaDevices.getUserMedia({
            video:true,
            audio:true
        }).then((stream)=>{
            // added our video to the screen
            addVideoStream(yourVideo,stream);
            // console.log(stream);
            // socket.emit("stream",stream);

            const media=new MediaRecorder(stream,options);
            
            
            //    console.log(media.ondataavailable);
            media.ondataavailable=function (e){
                socket.emit("stream",e.data);
                
                // console.log("data coming from seever",e);
            }
            
            media.start(1000);
        });



const bufferArray = [];
//  adding stranger's video to screen
socket.on("strangerStream", (stream) => {
  bufferArray.push(new Uint8Array(stream));
  const blob = new Blob(bufferArray, { type: "video/mp4" });
  const url = URL.createObjectURL(blob);
  strangerVideo.src = url;
  strangerVideo.play();
  console.log("blob:", blob);
  console.log("arrayBuffer", bufferArray);
  bufferArray.shift();
});
    </script>
</body>
</html>