tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved autodetection a little (detecting aspect ratio is possible even if the letterbox is interrupted by dark shapes)

Browse Source
This commit is contained in:
Tamius Han 2017-09-27 02:26:47 +02:00
parent ed1ac6da36
commit 9b4b6c2ceb
4 changed files with 240 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/conf/Settings.js
View File

@ -7,6 +7,7 @@ if(Debug.debug)
Settings = {
arDetect: {
enabled: "global",
allowedMisaligned: 0.01, // top and bottom letterbox thickness can differ by this much. Any more and we don't adjust ar.
allowedArVariance: 0.025, // % by which old ar can differ from the new
blacklist: [], // banned on enabled: "global"
whitelist: [] // enabled on enabled: "whitelist-only", disabled on "disabled"

153
js/experimental/autoar_canvas.js
View File

@ -1,153 +0,0 @@
var vid = document.getElementsByTagName("video")[0];
var canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.top = "1080px";
canvas.style.width = "1280";
canvas.style.height = "720";
canvas.style.zIndex = 10000;
canvas.width = 1280;
canvas.height = 720;
test = document.getElementsByClassName("content style-scope ytd-video-secondary-info-renderer")[0]
test.appendChild(canvas);
var context = canvas.getContext("2d");
function vdraw(vid, context, w, h){
var blackbar_tresh = 10; // how non-black can the bar be
var how_far_treshold = 8; // how much can the edge pixel vary (*4)
var msec_pause = 333; // how long is the pause between two executions — 33ms ~ 30fps
console.log("1");
if(vid === undefined || vid.paused || vid.ended){
// we slow down if paused
setTimeout(vdraw, 300, vid, context, w, h);
return false;
}
console.log("2");
context.drawImage(vid, 0,0, canvas.width, canvas.height);
console.log("3");
// "random" columns — todo: randomly pick about 10 of those
var rc = [ 4, 9, 42, 69 ];
var cimg = [];
var cols = [];
for(var i = 0; i < rc.length; i++){
//where-x, where-y, how wide, how tall
//random col, first y, 1 pix wide, all pixels tall
cols[i] = context.getImageData(rc[i], 0, 1, canvas.height).data;
}
console.log("4");
// fast test to see if video is full screen
isLetter=true;
for(var i in cols){
// if any of those points fails this check, we aren't letterboxed
isLetter &= (cols[i][4] <= blackbar_tresh && cols[i][5] <= blackbar_tresh && cols[i][6] <= blackbar_tresh);
// should also check bottom
}
console.log("letterbox " + (isLetter?"potentially detected, making further tests":"not detected (there's pixels on upper edge!)"));
console.log("5");
if(!isLetter){
setTimeout(vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
return;
}
// let's do a quick test to see if we're on a black frame
// let's also pick all points in advance (assuming canvas will always be 1280x720)
var blackPoints = 0;
var blackPointsMax = cols.length * 8; // 8 we sample each col at 8 different places
for(var i in cols){ // 360
if( cols[i][0] < blackbar_tresh && cols[i][2] < blackbar_tresh && cols[i][1] < blackbar_tresh )
blackPoints++;
if( cols[i][360] < blackbar_tresh && cols[i][361] < blackbar_tresh && cols[i][362] < blackbar_tresh )
blackPoints++;
if( cols[i][720] < blackbar_tresh && cols[i][721] < blackbar_tresh && cols[i][722] < blackbar_tresh )
blackPoints++;
if( cols[i][1080] < blackbar_tresh && cols[i][1081] < blackbar_tresh && cols[i][1082] < blackbar_tresh )
blackPoints++;
if( cols[i][1440] < blackbar_tresh && cols[i][1441] < blackbar_tresh && cols[i][1442] < blackbar_tresh )
blackPoints++;
if( cols[i][1800] < blackbar_tresh && cols[i][1801] < blackbar_tresh && cols[i][1802] < blackbar_tresh )
blackPoints++;
if( cols[i][2160] < blackbar_tresh && cols[i][2162] < blackbar_tresh && cols[i][2163] < blackbar_tresh )
blackPoints++;
if( cols[i][2876] < blackbar_tresh && cols[i][2877] < blackbar_tresh && cols[i][2878] < blackbar_tresh )
blackPoints++;
}
if(blackPoints > (blackPointsMax >> 2) ){
// if more than half of those points are black, we consider the entire frame black (or too dark to get anything useful
// out of it, anyway)
console.log("black frame detected, doing nothing");
setTimeout(vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
return;
}
// let's see where black bars end
var endPixelTop = []; // where the black bar ends.
var endPixelBottom = [];
var bottomLimit = 0;
for(var i in cols){
bottomLimit = cols[i].length - 1;
// define default value for both
endPixelTop[i] = -1;
endPixelBottom[i] = -1;
// check the top pixel
var cls = cols[i].length - 4;
var cls_quarter = cls >> 2;
for(var j = 0; j < cls_quarter - 4; j += 4){
if(cols[i][j] > blackbar_tresh && cols[i][j+1] > blackbar_tresh && cols[i][j+2] > blackbar_tresh){
endPixelTop[i] = j >> 2; // equal to division by 4
break;
}
}
if(endPixelTop[i] == -1) // this means we must have a really exotic apect ratio, or the entire column is black
continue; // we'll go with a black column.
// check for bottom pixel
// cls_quarter = bottomLimit - cls_quarter;
// NOTE: this sometimes causes browser to crash, keep commented. We'll assume some basic competence by the video
// makers and assume letterbox is always vertically centered.
// for(bottomLimit -= 5; bottomLimit => cls_quarter; bottomLimit -= 4){
// if(cols[i][bottomLimit] > blackbar_tresh && cols[i][bottomLimit+1] > blackbar_tresh && cols[i][bottomLimit+2] > blackbar_tresh ){
// endPixelBottom[i] = j >> 2;
// break;
// }
// }
}
console.log("7");
// check if black borders match; if the line isn't horizontal we could be looking at an object in
// the actual video that shouldn't be cropped out.
// TODO: disregard values with -1 in case of pillarbox
isLetter = true;
sampleLength = endPixelTop.length - 1;
for(var i = 0; i < sampleLength; i++){
isLetter &= endPixelTop[i] == endPixelTop[i+1];
// isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
}
console.log("9");
console.log("letterbox " + (isLetter?("detected — upper bar width: " + endPixelTop[0] + "px"):"cannot be confirmed — uneven edge (do nothing)"));
setTimeout(vdraw, msec_pause, vid, context, w, h);
}
vdraw(vid, context, 1280, 720, false);

308
js/modules/ArDetect.js
View File

@ -3,6 +3,18 @@ if(Debug.debug)
// global-ish variables
var _ard_oldAr;
var _ard_currentAr;
// kjer vzemamo vzorce za blackbox/stuff. 9 vzorcev. Če spremenimo velikost vzorca, moramo spremeniti tudi vrednosti v tej tabeli
// vrednosti v tabeli so na osminskih intervalih od [0, <sample height * 4> - 4].
// we sample these lines in blackbox/stuff. 9 samples. If we change the canvas sample size, we have to correct these values as well
// samples are every eighth between [0, <sample height * 4> - 4].
var _ard_sampleLines = [ 0, 360, 720, 1080, 1440, 1800, 2160, 2520, 2876]
// **** FUNCTIONS **** //
var _arSetup = function(){
var vid = document.getElementsByTagName("video")[0];
@ -44,23 +56,24 @@ var _arSetup = function(){
// init oldAr to physical <video> aspect ratio
_ard_oldAr = vid.videoWidth / vid.videoHeight;
_ard_currentAr = _ard_oldAr;
_ard_vdraw(vid, context, canvasWidth, canvasHeight, false);
};
var _ard_processAr = function(video, width, height, edge_h, edge_w){
// width, height —> canvas/sample
//edge_w -—> null/undefined, because we don't autocorrect pillarbox yet
var actualAr = video.videoWidth / video.videoHeight;
var sampleAr = width / height;
// normalize width/height
// if we don't specify these things, they'll have some default values.
if(edge_h === undefined){
edge_h = 0;
edge_w = 0;
}
var letterbox = 2 * edge_h;
var trueHeight = height - letterbox;
@ -70,10 +83,6 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
var trueAr = width / trueHeight;
if(Debug.debug){
console.log("ArDetect::_ard_last_ar() -> physical ar of video is", actualAr, "but true aspect ratio is", trueAr);
}
// poglejmo, če se je razmerje stranic spremenilo
// check if aspect ratio is changed:
@ -90,9 +99,9 @@ var _ard_processAr = function(video, width, height, edge_h, edge_w){
// if change is greater than allowed, change the aspect ratio. Whether we do that depends on whether we're in fullscreen.
if( FullScreenDetect.isFullScreen() ){
if(Debug.debug)
console.log("[ArDetect::_ard_processAr] attempting to fix aspect ratio.");
console.log("[ArDetect::_ard_processAr] attempting to fix aspect ratio. New aspect ratio: ", trueAr);
// _ard_oldAr = trueAr;
_ard_oldAr = trueAr;
Resizer.setAr_fs(trueAr);
}
@ -112,8 +121,8 @@ var _ard_vdraw = function (vid, context, w, h, conf){
context.drawImage(vid, 0,0, w, h);
// "random" columns — todo: randomly pick about 10 of those
var rc = [ 4, 9, 42, 69 ];
// "random" columns — todo: randomly pick some more
var rc = [ 128, 256, 384, 512, 640, 768, 896, 1024, 1125 ];
var cimg = [];
@ -125,7 +134,7 @@ var _ard_vdraw = function (vid, context, w, h, conf){
cols[i] = context.getImageData(rc[i], 0, 1, h).data;
}
// fast test to see if video is full screen
// fast test to see if aspect ratio is correct
isLetter=true;
for(var i in cols){
// if any of those points fails this check, we aren't letterboxed
@ -133,8 +142,15 @@ var _ard_vdraw = function (vid, context, w, h, conf){
// should also check bottom
}
console.log("letterbox " + (isLetter?"potentially detected, making further tests":"not detected (there's pixels on upper edge!)"));
console.log("11");
if(!isLetter){
// tudi če ne zaznamo letterboxa, še vedno poženemo processAr. Lahko, da smo v preteklosti popravili letterbox, to pa moramo
// sedaj razveljaviti
// even if we don't deect letterbox, we still issue processAr in case we adjusted for letterbox earlier and need to exit
// corrected mode.
_ard_processAr(vid, w, h);
setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
return;
}
@ -142,100 +158,234 @@ var _ard_vdraw = function (vid, context, w, h, conf){
// let's do a quick test to see if we're on a black frame
// let's also pick all points in advance (assuming canvas will always be 1280x720)
var blackPoints = 0;
var blackPointsMax = cols.length * 8; // 8 we sample each col at 8 different places
var blackPointsMax = cols.length * 9; // 9 we sample each col at 9 different places
for(var i in cols){ // 360
if( cols[i][0] < blackbar_tresh && cols[i][2] < blackbar_tresh && cols[i][1] < blackbar_tresh )
// indexes in _ard_sampleLines
var color_uppermost = 10;
var color_lowermost = 0;
// stolpca, v katerih smo našli zgornji številki
// columns, in which the values above were found
var cl_col = [];
var cu_col = [];
console.log("22");
// if (pixel is black)
for(var i in cols){
// --- piksli na zgornji polovici -----------------//
// --- pixels from the top ------------------------//
if( cols[i][_ard_sampleLines[0]] < blackbar_tresh &&
cols[i][_ard_sampleLines[0] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[0] + 2] < blackbar_tresh )
blackPoints++;
if( cols[i][360] < blackbar_tresh && cols[i][361] < blackbar_tresh && cols[i][362] < blackbar_tresh )
else if(color_uppermost > 0){
color_uppermost = 0;
cu_col = [i];
}
if( cols[i][_ard_sampleLines[1]] < blackbar_tresh &&
cols[i][_ard_sampleLines[1] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[1] + 2] < blackbar_tresh )
blackPoints++;
if( cols[i][720] < blackbar_tresh && cols[i][721] < blackbar_tresh && cols[i][722] < blackbar_tresh )
else if(color_uppermost > 1){
color_uppermost = 1;
cu_col = [i];
}
else if(color_uppermost == 1){
cu_col.push(i);
}
if( cols[i][_ard_sampleLines[2]] < blackbar_tresh &&
cols[i][_ard_sampleLines[2] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[1] + 2] < blackbar_tresh )
blackPoints++;
if( cols[i][1080] < blackbar_tresh && cols[i][1081] < blackbar_tresh && cols[i][1082] < blackbar_tresh )
else if(color_uppermost > 2){
color_uppermost = 2;
cu_col = [i];
}
else if(color_uppermost == 2){
cu_col.push(i);
}
if( cols[i][_ard_sampleLines[3]] < blackbar_tresh &&
cols[i][_ard_sampleLines[3] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[3] + 2] < blackbar_tresh )
blackPoints++;
else if(color_uppermost > 3){
color_uppermost = 3;
cu_col = [i];
}
else if(color_uppermost == 3){
cu_col.push(i);
}
// --- piksli na spodnji polovici ---------------//
// tukaj gremo v obratni smeri, drugače bo v tabeli lahko napačen piksel
// --- pixels on the bottom ---------------------//
// searching in the other direction, otherwise we could get incorrect results
if( cols[i][_ard_sampleLines[8]] < blackbar_tresh &&
cols[i][_ard_sampleLines[8] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[8] + 2] < blackbar_tresh )
blackPoints++;
else if(color_lowermost < 8){
color_lowermost = 8;
cl_col = [i];
}
if( cols[i][_ard_sampleLines[7]] < blackbar_tresh &&
cols[i][_ard_sampleLines[7] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[7] + 2] < blackbar_tresh )
blackPoints++;
else if(color_lowermost < 7){
color_lowermost = 7;
cl_col = [i];
}
else if(color_lowermost == 7){
cl_col.push(i);
}
if( cols[i][_ard_sampleLines[6]] < blackbar_tresh &&
cols[i][_ard_sampleLines[6] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[6] + 2] < blackbar_tresh )
blackPoints++;
else if(color_lowermost < 6){
color_lowermost = 6;
cl_col = [i];
}
else if(color_lowermost == 6){
cl_col.push(i);
}
if( cols[i][_ard_sampleLines[5]] < blackbar_tresh &&
cols[i][_ard_sampleLines[5] + 1] < blackbar_tresh &&
cols[i][_ard_sampleLines[5] + 2] < blackbar_tresh )
blackPoints++;
else if(color_lowermost < 5){
color_lowermost = 5;
cl_col = [i];
}
else if(color_lowermost == 5){
cl_col.push(i);
}
// --- piksli na sredini ------------------------//
// na sredini ne preverjamo za color_lowermost in color_uppermost. Če bo color_lowermost in color_uppermost relevanten na tem
// nivoju, potem bo a) dovolj črnih točk za blackframe oz b) barvasta točka na višjem nivoju
// --- pixels in the center ---------------------//
// we don't check for color_lowermost and color_uppermost here, because it's pointless.
if( cols[i][1440] < blackbar_tresh && cols[i][1441] < blackbar_tresh && cols[i][1442] < blackbar_tresh )
blackPoints++;
if( cols[i][1800] < blackbar_tresh && cols[i][1801] < blackbar_tresh && cols[i][1802] < blackbar_tresh )
blackPoints++;
if( cols[i][2160] < blackbar_tresh && cols[i][2162] < blackbar_tresh && cols[i][2163] < blackbar_tresh )
blackPoints++;
if( cols[i][2876] < blackbar_tresh && cols[i][2877] < blackbar_tresh && cols[i][2878] < blackbar_tresh )
blackPoints++;
blackPoints++;
}
if(blackPoints > (blackPointsMax >> 1) ){
console.log("33");
if(blackPoints > (blackPointsMax >> 1)){
// if more than half of those points are black, we consider the entire frame black (or too dark to get anything useful
// out of it, anyway)
console.log("ArDetect::_vdraw() -> black frame detected", blackPoints, "/", blackPointsMax, "black points (", (blackPointsMax>>1), "allowed)" );
setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
return;
}
console.log("color_uppermost:",color_uppermost,"color_lowermost:",color_lowermost);
if( color_lowermost == 8 || color_uppermost == 0){
// zakaj smo potem sploh tukaj?
// why exactly are we here again?
_ard_processAr(vid, w, h);
setTimeout(_ard_vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
return;
}
console.log("44");
// pa poglejmo, kje se končajo črne letvice na vrhu in na dnu videa.
// let's see where black bars end. We only need to check in the columns where we detected uppermost and lowermost color.
// let's see where black bars end
var endPixelTop = []; // where the black bar ends.
var endPixelTop = [];
var endPixelBottom = [];
var bottomLimit = 0;
for(var i in cols){
bottomLimit = cols[i].length - 1;
for(var i in cu_col){
var tmpEndPixel = _ard_sampleLines[color_uppermost] >> 2; // this would be the value if loop fails to quit with proper pixel
// define default value for both
endPixelTop[i] = -1;
endPixelBottom[i] = -1;
var j = _ard_sampleLines[color_uppermost-1];
// check the top pixel
var cls = cols[i].length - 4;
var cls_quarter = cls >> 2;
for(var j = 0; j < cls_quarter - 4; j += 4){
if(cols[i][j] > blackbar_tresh && cols[i][j+1] > blackbar_tresh && cols[i][j+2] > blackbar_tresh){
endPixelTop[i] = j >> 2; // equal to division by 4
while(j < _ard_sampleLines[color_uppermost]){
if(cols[ cu_col[i] ][ j ] > blackbar_tresh &&
cols[ cu_col[i] ][ j+1 ] > blackbar_tresh &&
cols[ cu_col[i] ][ j+2 ] > blackbar_tresh ){
console.log("detecting value higher than blackbar_tresh!");
tmpEndPixel = j >> 2;
break;
}
j += 4;
}
if(endPixelTop[i] == -1) // this means we must have a really exotic apect ratio, or the entire column is black
continue; // we'll go with a black column.
// check for bottom pixel
// cls_quarter = bottomLimit - cls_quarter;
// NOTE: this sometimes causes browser to crash, keep commented. We'll assume some basic competence by the video
// makers and assume letterbox is always vertically centered.
// for(bottomLimit -= 5; bottomLimit => cls_quarter; bottomLimit -= 4){
// if(cols[i][bottomLimit] > blackbar_tresh && cols[i][bottomLimit+1] > blackbar_tresh && cols[i][bottomLimit+2] > blackbar_tresh ){
// endPixelBottom[i] = j >> 2;
// break;
// }
// }
endPixelTop.push(tmpEndPixel);
}
console.log("777");
for(var i in cl_col){
var tmpEndPixel = _ard_sampleLines[color_lowermost] >> 2;
var j = _ard_sampleLines[color_lowermost];
while(j < _ard_sampleLines[color_lowermost+1]){
if(cols[ cl_col[i] ][ j ] < blackbar_tresh &&
cols[ cl_col[i] ][ j+1 ] < blackbar_tresh &&
cols[ cl_col[i] ][ j+2 ] < blackbar_tresh ){
tmpEndPixel = j >> 2;
break;
}
j += 4;
}
endPixelBottom.push(tmpEndPixel);
}
console.log("888");
// dobi najvišji in najnižji piksel
var bottomPixel = 0;
var topPixel = 222222;
for(var i in endPixelTop){
if( endPixelTop[i] < topPixel )
topPixel = endPixelTop[i];
}
for(var i in endPixelBottom){
if( endPixelBottom[i] > bottomPixel )
bottomPixel = endPixelBottom[i];
}
// preveri, če sta odmika zgoraj in spodaj podobno velika. Če nista, potem gledamo objekt, ne letterboxa
// check if black borders match; if the line isn't horizontal we could be looking at an object in
// the actual video that shouldn't be cropped out.
// TODO: disregard values with -1 in case of pillarbox
isLetter = true;
sampleLength = endPixelTop.length - 1;
letterboxThickness = endPixelTop[i]; // todo: better letterbox calculation
for(var i = 0; i < sampleLength; i++){
isLetter &= endPixelTop[i] == endPixelTop[i+1];
// isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
}
if(Debug.debug || Debug.debugArDetect )
console.log("letterbox " + (isLetter?("detected — upper bar width: " + endPixelTop[0] + "px"):"cannot be confirmed — uneven edge (do nothing)"));
var letterDiff = topPixel - (h - bottomPixel);
if(letterDiff < 0)
letterDiff = -letterDiff;
isLetter = (letterDiff < h * Settings.arDetect.allowedMisaligned);
console.log("pixels top: ", topPixel, "pixels bottom:", (h-bottomPixel), " (", bottomPixel,") — difference: ",letterDiff,"max allowed difference:", (h * Settings.arDetect.allowedMisaligned), "(",h,Settings.arDetect.allowedMisaligned,"), isLetter:",isLetter, "\n\n all candidates (top):", endPixelTop, "(bottom):",endPixelBottom);
if(isLetter)
_ard_processAr(vid, w, h, letterboxThickness);
_ard_processAr(vid, w, h, topPixel);
setTimeout(_ard_vdraw, msec_pause, vid, context, w, h);
}

21
js/modules/Resizer.js
View File

@ -337,15 +337,6 @@ var _res_setArFs = function(ar){
// Actual aspect ratio of the file/<video> tag
var fileAr = vid.videoWidth / vid.videoHeight;
// Če sta razmerja stranic preveč podobna, ne spreminjaj velikosti
// we don't change ar if the target AR and actual AR are too similar
var arDiff = ar - fileAr;
if (arDiff < 0 )
arDiff = -arDiff;
if( arDiff < ar * Settings.arChange.samenessTreshold )
return;
// Zabavno dejstvo: ta funkcija se kliče samo v fullscreen. Za ne-fs verzijo bo posebna funkcija, ker bo včasih verjetno treba
// spremeniti velikost predvajalnika
//
@ -367,12 +358,20 @@ var _res_setArFs = function(ar){
videoDimensions.height = videoDimensions.width * (1/fileAr);
}
else{
// TODO: implement for pillarbox
return;
videoDimensions.height = Math.min(screen.width * (1/ar), screen.height);
videoDimensions.width = videoDimensions.height * fileAr;
}
if(Debug.debug){
console.log("[Resizer::_res_setArFs] Video dimensions: ",videoDimensions);
}
var cssValues = _res_computeOffsets(videoDimensions, playerDimensions);
if(Debug.debug){
console.log("[Resizer::_res_setArFs] Offsets for css are: ",cssValues);
}
_res_applyCss(cssValues);
}