mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
UI and Web updates (#1421)
* Stop Web-Capture when priority changes * Remote control UI: Treat duration=0 as endless * Stop Web-Capture on non-Image events changes * LED Matrix Layout - Support vertical cabling direction * Additional Yeelight models * Treat http headers case insensitive * Update change log * Treat http headers case insensitive (consider Qt version) * API - Consider provided format when setImage * UI - Support Boblight configuration per LED instance * Support multiple Boblight clients with different priorities * Update changelog * Simplify isGUI rules allowing for QT only builds * Sysinfo: Fix indents * LED-Devices: Show warning, if get properties failed * Qt-Grabber: Fixed position handling of multiple monitors * LED layout: Remove indention limitations * Yeelight: Test YLTD003 * hyperion-remote: Provide image filename to muxer/UI * Refactor PriorityMuxer and related * Temp: Build under Windows 2019 * Yeelight: Remove YLTD003 as it is not working without additional changes * Test Windows-latest with out removing redistributables/new MSVC * correct workflows * correct CI script * Build Windows with Qt 5.15.2 * Priority Muxer: Updates after testing * Fix Typo * Update BGHandler * QTGrabber - Reactivate windows code to avoid cursor issues * Emit prioritiesChanged when autoselect was changed by user Co-authored-by: Paulchen Panther <Paulchen-Panter@protonmail.com>
This commit is contained in:
LordGrey
GitHub
@@ -1,111 +1,117 @@
|
||||
$(document).ready( function() {
|
||||
$(document).ready(function () {
|
||||
|
||||
// check if browser supports streaming
|
||||
if(window.navigator.mediaDevices && window.navigator.mediaDevices.getDisplayMedia){
|
||||
$("#btn_streamer").toggle();
|
||||
}
|
||||
// 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");
|
||||
// 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
|
||||
};
|
||||
// Options for getDisplayMedia()
|
||||
var displayMediaOptions = {
|
||||
video: {
|
||||
cursor: "never",
|
||||
width: 170,
|
||||
height: 100,
|
||||
frameRate: 15
|
||||
},
|
||||
audio: false
|
||||
};
|
||||
|
||||
async function startCapture() {
|
||||
streamActive = true;
|
||||
|
||||
async function startCapture() {
|
||||
streamActive = true;
|
||||
try {
|
||||
var stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
|
||||
videoElem.srcObject = stream;
|
||||
|
||||
try {
|
||||
var stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
|
||||
videoElem.srcObject = stream;
|
||||
// get the active track of the stream
|
||||
const track = stream.getVideoTracks()[0];
|
||||
|
||||
// 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();
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
function onCapabilitiesReady(settings) {
|
||||
// extract real width/height
|
||||
streamImageWidth = settings.width;
|
||||
streamImageHeight = settings.height;
|
||||
// start screenshotTimer
|
||||
updateScrTimer(false);
|
||||
|
||||
// start screenshotTimer
|
||||
updateScrTimer(false);
|
||||
// we are sending
|
||||
$("#btn_streamer_icon").addClass("text-danger");
|
||||
}
|
||||
|
||||
// we are sending
|
||||
$("#btn_streamer_icon").addClass("text-danger");
|
||||
}
|
||||
function stopCapture(evt) {
|
||||
streamActive = false;
|
||||
$("#btn_streamer_icon").removeClass("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();
|
||||
|
||||
updateScrTimer(true);
|
||||
// sometimes it's null on abort
|
||||
if(videoElem.srcObject){
|
||||
let tracks = videoElem.srcObject.getTracks();
|
||||
tracks.forEach(track => track.stop());
|
||||
videoElem.srcObject = null;
|
||||
}
|
||||
requestPriorityClear(1);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
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, -1, "Streaming");
|
||||
}
|
||||
|
||||
var data = canvasElem.toDataURL('image/png').split(",")[1];
|
||||
requestSetImage(data, 2, "Streaming");
|
||||
}
|
||||
// start or update screenshot timer
|
||||
function updateScrTimer(stop) {
|
||||
clearInterval(screenshotTimer)
|
||||
|
||||
// start or update screenshot timer
|
||||
function updateScrTimer(stop){
|
||||
clearInterval(screenshotTimer)
|
||||
if (stop === false) {
|
||||
screenshotTimer = setInterval(() => (
|
||||
takePicture()
|
||||
), screenshotIntervalTimeMs);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
$("#btn_streamer").off().on("click",function(e){
|
||||
if(!$("#btn_streamer_icon").hasClass("text-danger") && !streamActive){
|
||||
startCapture();
|
||||
} else {
|
||||
stopCapture();
|
||||
}
|
||||
});
|
||||
$(window.hyperion).on("stopBrowerScreenCapture", function (event) {
|
||||
if (streamActive) {
|
||||
stopCapture();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user