Skip to content

Instantly share code, notes, and snippets.

@rishimohan

rishimohan/.html

Created January 25, 2022 19:32
Show Gist options
  • Save rishimohan/202d728fda7bc08d7090eafbc49846e3 to your computer and use it in GitHub Desktop.
Save rishimohan/202d728fda7bc08d7090eafbc49846e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6d0cc1096c.js" crossorigin="anonymous"></script>
<title>Interview Question</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.topnav {
/* min-height: 60px; */
height: 6.5vh;
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: right;
}
.topnav-right a:hover {
text-decoration: underline;
}
.splits-screen {
height: 93.5vh;
width: 100vw;
display: flex;
flex-direction: row;
}
.split {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.left {
background-color: #facc6b;
}
.right {
background-color: #f5b82e;
}
#timer {
position: absolute;
right: 2em;
top: 2em;
font-size: larger;
}
video {
height: 250px;
width: 250px;
border: 1px solid #facc6b;
border-radius: 50%;
object-fit: cover;
}
button {
height: 50px;
width: 200px;
border: #000 solid 3px;
background-color: transparent;
border-radius: 15px;
}
.left button {
width: 50px;
border-radius: 50%;
border: #000 solid 0;
}
.audio-control-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
img {
height: 250px;
width: 250px;
border: 1px solid #facc6b;
border-radius: 50%;
object-fit: cover;
}
.navigation-control-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.hidden {
display: none;
}
#submit {
width: 0;
height: 0;
border: 0;
position: absolute;
left: -1500px;
}
.audio-btn {
margin-right: 20px;
border: #000 solid 3px;
height: 50px;
width: 200px;
background-color: transparent;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: black;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Nav Bar -->
<div class="topnav">
<a class="active" href="./index.html">Home</a>
<a href="./Contact.html">Help</a>
<div class="topnav-right">
<a href="./Logout.html"><i class="fas fa-sign-out-alt"></i>Logout</a>
</div>
</div>
<div class="splits-screen">
<!-- Split screen -->
<div class="split left">
<img src="./Boy_Avtar.jpg" alt="Avatar woman" />
<h2>Interview Bot</h2>
<p id="nextquestion"> Question here....</p>
<div class="navigation-control-box">
<button type="button" disabled>
<i class="fas fa-arrow-circle-left fa-lg"></i>
</button>
<button type="button" onclick="next()">
<i class="fas fa-arrow-circle-right fa-lg"></i>
</button>
</div>
</div>
<div class="split right">
<div id="timer">
<span id="min">02</span>&nbsp;:
<span id="sec">00</span>
</div>
<span id="spanForAudio" class="hidden"></span>
<video autoplay="true" id="videoElement"></video>
<h2>Candidate</h2>
<form id="record-form">
<div class="audio-control-box">
<div id="gUMbtn" class="audio-btn">Start Interview</div>
<input type="text" id="blobString" class="hidden">
<div id="stop" class="audio-btn">Finish Interview</div>
<button type="submit" id="submit"></button>
</div>
</form>
</div>
</div>
<script>
document.getElementById('blobString').value = '';
var formEl = document.getElementById("record-form");
formEl.addEventListener('submit', handleFormSubmit);
function handleFormSubmit(e) {
e.preventDefault();
// Do anything on form submit
}
// ===================================================Timer code ============================================================
function startTimer() {
let time = 60 * Number(document.querySelector('#min').innerHTML);
setInterval(() => {
if (time >= 0) {
document.querySelector('#min').innerHTML = `0${Math.trunc(time / 60)}`;
if ((time % 60) > 9) {
document.querySelector('#sec').innerHTML = time % 60;
}
else {
document.querySelector('#sec').innerHTML = `0${time % 60}`;
}
time--;
}
}, 1000);
}
//=============================================== video and audio code===================================================================
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
// onclick Event
function next() {
let obj = JSON.parse(localStorage.getItem('myStorage'));
document.getElementById("nextquestion").innerHTML = obj[0];
}
//======================================================AUDIO CONTROL ==============================================================
let log = console.log.bind(console),
id = (val) => document.getElementById(val),
// ul = id("ul"),
gUMbtn = id("gUMbtn"),
// start = id("start"),
stop = id("stop"),
stream,
recorder,
counter = 1,
chunks,
media
;
gUMbtn.onclick = (e) => {
startTimer();
let mv = id("mediaVideo"),
mediaOptions = {
video: {
tag: "video",
type: "video/webm",
ext: ".mp4",
gUM: { video: true, audio: true },
},
audio: {
tag: "audio",
type: "audio/wav",
ext: ".wav",
gUM: { audio: true },
},
};
media = mediaOptions.audio;
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((_stream) => {
stream = _stream;
recorder = new MediaRecorder(stream);
chunks = [];
recorder.start();
recorder.ondataavailable = (e) => {
chunks.push(e.data);
if (recorder.state == "inactive") {
createBlob();
clickSubmit();
}
};
log("got media successfully");
})
.catch(log);
};
stop.onclick = (e) => {
stop.disabled = true;
recorder.stop();
};
// function createBlob() {
// let blob = new Blob(chunks, { type: media.type });
// // // url = URL.createObjectURL(blob),
// // mt = document.createElement(media.tag),
// // mt.src = url;
// // span.appendChild(mt);
// // log(blob);
// id('blobString').value = URL.createObjectURL(blob);
// // li = document.createElement("li"),
// // mt = document.createElement(media.tag);
// // hf = document.createElement("a");
// log(blob);
// // mt.controls = true;
// // mt.src = url;
// // hf.href = url;
// // hf.download = `${counter++}${media.ext}`;
// // hf.innerHTML = `download ${hf.download}`;
// // document.querySelector('.audio-control-box').appendChild(mt);
// // li.appendChild(hf);
// // span.appendChild(li);
// }
function createBlob() {
let blob = new Blob(chunks, { type: media.type }), data;
log(blob);
const reader = new FileReader();
if (blob) {
reader.readAsDataURL(blob);
}
reader.addEventListener("load", function () {
console.log(reader.result)
data = reader.result;
id('blobString').value = reader.result;
}, false);
fetch('/api/hello', {
method: "POST",
body: { blobData: data }
}).then(data => console.log("Henlo", data))
.catch(err => console.log("Err", err));
}
function clickSubmit() {
const subBtn = document.querySelector('#submit');
// console.log(subBtn);
// subBtn.classList.remove('hidden');
subBtn.click();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment