Skip to content

Instantly share code, notes, and snippets.

@danielrothfus

danielrothfus/streamview.html

Last active July 28, 2016 15:29
Show Gist options
  • Save danielrothfus/5069708 to your computer and use it in GitHub Desktop.
Save danielrothfus/5069708 to your computer and use it in GitHub Desktop.
Download ZIP
A basic HTML file for showing a web page with a full-screen view of a mjpg-streamer stream.
Raw
streamview.html
<html>
<head>
<title>Live Feed</title>
<script>
ASPECT_RATIO = 4.0 / 3.0;
IMAGE_SRC = "/?action=stream"
function initialize(){
var elem = document.getElementById("liveFeed")
var border = 0
// Create function to handle resize
function updateStreamSize(){
var containWidth = document.body.clientWidth
var containHeight = document.body.clientHeight
if(containWidth > 0 && containHeight > 0 &&
containWidth > border * 2 && containHeight > border * 2){
// Check for skewing of ratio
if((containWidth - border * 2) /
(containHeight - border * 2) < ASPECT_RATIO){
var width = containWidth - border * 2
var height = width / ASPECT_RATIO
}
else{
var height = containHeight - border * 2
var width = height * ASPECT_RATIO
}
}
else{
var width = 0
var height = 0
}
// Update image size
elem.style.width = width
elem.style.height = height
elem.style.top = (containHeight - height) / 2
elem.style.right = (containWidth - width) / 2
}
// Register for resize events and do initial layout
window.onresize = updateStreamSize
updateStreamSize()
// Now finally give the image its source
elem.src = IMAGE_SRC
}
</script>
</head>
<body onload="initialize()" style="background-color: black">
<img id="liveFeed" style="font-family: monospace; text-align: center;
color: white; position: absolute"
alt="There seems to be a problem with the live feed..."/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment