const iframe = document.querySelector("iframe");
if (iframe) {
iframe.src = `http://i will take here to live streming show on pages`;
// resizeCanvas();
// await showPreviousROIs();
}
.middle
{
height: 83vh;
background-color: black;
padding-left: 15%;
padding-right: 2vw;
gap: 1vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
border-bottom: 0.1vh solid black;
overflow: hidden;
}
.middle_container
{
height: 95%;
max_height: 83vh;
background-color: black;
width: 60vw;
max-width: 60vw;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1em;
overflow: hidden;
flex-shrink: 0;
flex-grow: 0;
}
.stream-frame {
position: relative;
width: 100%;
max-width: 100vw;
aspect-ratio: 4 / 3;
background-color: transparent;
overflow: hidden;
}
/*
.stream-frame {
position: relative;
width: 100%;
height: 100%;
max-width: 100vw;
background-color: red;
overflow: hidden;
}
*/
/* Stream + canvas always fill frame */
streamIframe, #roiCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* maintain correct scaling */
background: transparent;
}
Top comments (0)