112 lines
2.6 KiB
JavaScript
112 lines
2.6 KiB
JavaScript
$(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();
|
|
}
|
|
});
|
|
|
|
});
|