fixed the issue with hanging.
This commit is contained in:
parent
24a7b1c448
commit
be8fba8e04
@ -1,5 +1,3 @@
|
|||||||
// this script should work but it crashes firefox instead.
|
|
||||||
|
|
||||||
var vid = document.getElementsByTagName("video")[0];
|
var vid = document.getElementsByTagName("video")[0];
|
||||||
var canvas = document.createElement("canvas");
|
var canvas = document.createElement("canvas");
|
||||||
canvas.style.position = "absolute";
|
canvas.style.position = "absolute";
|
||||||
@ -16,19 +14,21 @@ var context = canvas.getContext("2d");
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
function vdraw(vid, context, w, h, bb){
|
function vdraw(vid, context, w, h){
|
||||||
var blackbar_tresh = 10; // how non-black can the bar be
|
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 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
|
var msec_pause = 333; // how long is the pause between two executions — 33ms ~ 30fps
|
||||||
|
|
||||||
if(vid.paused || vid.ended){
|
console.log("1");
|
||||||
|
if(vid === undefined || vid.paused || vid.ended){
|
||||||
// we slow down if paused
|
// we slow down if paused
|
||||||
setTimeout(vdraw, 300, vid, context, w, h);
|
setTimeout(vdraw, 300, vid, context, w, h);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
context.drawImage(vid, 0,0, 1280, 720, 0, 0, canvas.width, canvas.height);
|
console.log("2");
|
||||||
|
context.drawImage(vid, 0,0, canvas.width, canvas.height);
|
||||||
|
console.log("3");
|
||||||
// "random" columns — todo: randomly pick about 10 of those
|
// "random" columns — todo: randomly pick about 10 of those
|
||||||
var rc = [ 4, 9, 42, 69 ];
|
var rc = [ 4, 9, 42, 69 ];
|
||||||
|
|
||||||
@ -39,10 +39,9 @@ function vdraw(vid, context, w, h, bb){
|
|||||||
for(var i = 0; i < rc.length; i++){
|
for(var i = 0; i < rc.length; i++){
|
||||||
//where-x, where-y, how wide, how tall
|
//where-x, where-y, how wide, how tall
|
||||||
//random col, first y, 1 pix wide, all pixels tall
|
//random col, first y, 1 pix wide, all pixels tall
|
||||||
cimg[i] = context.getImageData(rc[i], 0, 1, canvas.height);
|
|
||||||
cols[i] = context.getImageData(rc[i], 0, 1, canvas.height).data;
|
cols[i] = context.getImageData(rc[i], 0, 1, canvas.height).data;
|
||||||
}
|
}
|
||||||
|
console.log("4");
|
||||||
// fast test to see if video is full screen
|
// fast test to see if video is full screen
|
||||||
isLetter=true;
|
isLetter=true;
|
||||||
for(var i in cols){
|
for(var i in cols){
|
||||||
@ -51,68 +50,92 @@ function vdraw(vid, context, w, h, bb){
|
|||||||
// should also check bottom
|
// should also check bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("letterbox " + (isLetter?"potentially detected, making further tests":"not detected"));
|
console.log("letterbox " + (isLetter?"potentially detected, making further tests":"not detected (there's pixels on upper edge!)"));
|
||||||
|
console.log("5");
|
||||||
if(!isLetter){
|
if(!isLetter){
|
||||||
setTimeout(vdraw, msec_pause, vid, context, w, h, isLetter); //no letterbox, no problem
|
setTimeout(vdraw, msec_pause, vid, context, w, h); //no letterbox, no problem
|
||||||
return;
|
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
|
// let's see where black bars end
|
||||||
|
|
||||||
var endPixelTop = []; // where the black bar ends.
|
var endPixelTop = []; // where the black bar ends.
|
||||||
var endPixelBottom = [];
|
var endPixelBottom = [];
|
||||||
|
|
||||||
var bottomLimit = 0;
|
var bottomLimit = 0;
|
||||||
|
console.log("6");
|
||||||
|
|
||||||
|
|
||||||
for(var i in cols){
|
for(var i in cols){
|
||||||
bottomLimit = cols[i].length - 1;
|
bottomLimit = cols[i].length - 1;
|
||||||
|
|
||||||
|
// define default value for both
|
||||||
|
endPixelTop[i] = -1;
|
||||||
|
endPixelBottom[i] = -1;
|
||||||
|
|
||||||
// check the top pixel
|
// check the top pixel
|
||||||
endPixelTop[i] = -1;
|
|
||||||
|
|
||||||
var cls = cols[i].length - 4;
|
var cls = cols[i].length - 4;
|
||||||
var cls_quarter = cls >> 2;
|
var cls_quarter = cls >> 2;
|
||||||
for(var j = 0; j < cls_quarter; j += 4){
|
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){
|
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
|
endPixelTop[i] = j >> 2; // equal to division by 4
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(endPixelTop[i] == -1) // this pretty much means we've reached the bottom while still not detecting
|
if(endPixelTop[i] == -1) // this means we must have a really exotic apect ratio, or the entire column is black
|
||||||
continue; // picture, so we get out.
|
continue; // we'll go with a black column.
|
||||||
|
|
||||||
|
|
||||||
// check for bottom pixel
|
// check for bottom pixel
|
||||||
|
// cls_quarter = bottomLimit - cls_quarter;
|
||||||
|
|
||||||
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){
|
// 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 ){
|
// if(cols[i][bottomLimit] > blackbar_tresh && cols[i][bottomLimit+1] > blackbar_tresh && cols[i][bottomLimit+2] > blackbar_tresh ){
|
||||||
endPixelBottom[i] = j >> 2;
|
// endPixelBottom[i] = j >> 2;
|
||||||
break;
|
// break;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
console.log("7");
|
||||||
// debug only — set test cols to red:
|
|
||||||
//for(var i in cols){
|
|
||||||
// for(var j = 0; j < cols[i].length; j+=4){
|
|
||||||
// cols[i][j] = 255;
|
|
||||||
// }
|
|
||||||
// //context.putImageData(cols[i], rc[i], 0);
|
|
||||||
//}
|
|
||||||
|
|
||||||
var blackFrame = true;
|
|
||||||
for(var i in endPixelTop){
|
|
||||||
blackFrame &= endPixelTop[i] == -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(blackFrame){
|
|
||||||
console.log("black frame detected, doing nothing");
|
|
||||||
setTimeout(vdraw, msec_pause, vid, context, w, h, blackFrame); //no letterbox, no problem
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// check if black borders match; if the line isn't horizontal we could be looking at an object in
|
// 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.
|
// the actual video that shouldn't be cropped out.
|
||||||
@ -121,11 +144,11 @@ function vdraw(vid, context, w, h, bb){
|
|||||||
sampleLength = endPixelTop.length - 1;
|
sampleLength = endPixelTop.length - 1;
|
||||||
for(var i = 0; i < sampleLength; i++){
|
for(var i = 0; i < sampleLength; i++){
|
||||||
isLetter &= endPixelTop[i] == endPixelTop[i+1];
|
isLetter &= endPixelTop[i] == endPixelTop[i+1];
|
||||||
isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
|
// isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
|
||||||
}
|
}
|
||||||
|
console.log("9");
|
||||||
console.log("letterbox " + (isLetter?("detected — upper bar width: " + endPixelTop[0] + "px"):"not detected"));
|
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, isLetter);
|
setTimeout(vdraw, msec_pause, vid, context, w, h);
|
||||||
}
|
}
|
||||||
|
|
||||||
vdraw(vid, context, 1280, 720, false);
|
vdraw(vid, context, 1280, 720, false);
|
||||||
|
Loading…
Reference in New Issue
Block a user