hyperion.ng/assets/webconfig/js/streamer.js

112 lines
2.6 KiB
JavaScript
Raw Normal View History

$(document).ready( function() {
// check if browser supports streaming
if(window.navigator.mediaDevices && window.navigator.mediaDevices.getDisplayMedia){
$("#btn_streamer").toggle()
}
// variables
var streamActive = false;
var screenshotTimer = "";
var screenshotIntervalTimeMs = 100;
var streamImageHeight = 0;
var streamImageWidth = 0;
const videoElem = document.getElementById("streamvideo");
const canvasElem = document.getElementById("streamcanvas");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "never",
width: 170,
height: 100,
frameRate: 15
},
audio: false
};
async function startCapture() {
streamActive = true;
try {
var stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
videoElem.srcObject = stream;
// get the active track of the stream
const track = stream.getVideoTracks()[0];
// listen for track ending, fires when user aborts through browser
track.onended = function(event) {
stopCapture();
};
// wait for video ready
videoElem.addEventListener('loadedmetadata', (e) => {
window.setTimeout(() => (
onCapabilitiesReady(track.getSettings())
), 500);
});
} catch(err) {
stopCapture();
console.error("Error: " + err);
}
}
function onCapabilitiesReady(settings) {
// extract real width/height
streamImageWidth = settings.width;
streamImageHeight = settings.height;
// start screenshotTimer
updateScrTimer(false);
// we are sending
$("#btn_streamer_icon").addClass("text-danger");
}
function stopCapture(evt) {
streamActive = false;
$("#btn_streamer_icon").removeClass("text-danger");
updateScrTimer(true);
// sometimes it's null on abort
if(videoElem.srcObject){
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
}
function takePicture(){
var context = canvasElem.getContext('2d');
canvasElem.width = streamImageWidth;
canvasElem.height = streamImageHeight;
context.drawImage(videoElem, 0, 0, streamImageWidth, streamImageHeight);
var data = canvasElem.toDataURL('image/png').split(",")[1];
requestSetImage(data, 2, "Streaming");
}
// start or update screenshot timer
function updateScrTimer(stop){
clearInterval(screenshotTimer)
if(stop === false){
screenshotTimer = setInterval(() => (
takePicture()
), screenshotIntervalTimeMs);
}
}
$("#btn_streamer").off().on("click",function(e){
if(!$("#btn_streamer_icon").hasClass("text-danger") && !streamActive){
startCapture();
} else {
stopCapture();
}
});
});