fixed the issue with hanging.

This commit is contained in:
Tamius Han 2017-09-15 23:49:58 +02:00
parent 24a7b1c448
commit be8fba8e04

View File

@ -1,5 +1,3 @@
// this script should work but it crashes firefox instead.
var vid = document.getElementsByTagName("video")[0];
var canvas = document.createElement("canvas");
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 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
if(vid.paused || vid.ended){
console.log("1");
if(vid === undefined || vid.paused || vid.ended){
// we slow down if paused
setTimeout(vdraw, 300, vid, context, w, h);
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
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++){
//where-x, where-y, how wide, how 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;
}
console.log("4");
// fast test to see if video is full screen
isLetter=true;
for(var i in cols){
@ -51,68 +50,92 @@ function vdraw(vid, context, w, h, bb){
// 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){
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;
}
// 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;
console.log("6");
for(var i in cols){
bottomLimit = cols[i].length - 1;
// check the top pixel
// 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; 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){
endPixelTop[i] = j >> 2; // equal to division by 4
break;
}
}
if(endPixelTop[i] == -1) // this pretty much means we've reached the bottom while still not detecting
continue; // picture, so we get out.
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;
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");
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;
}
}
}
// 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
// the actual video that shouldn't be cropped out.
@ -121,11 +144,11 @@ function vdraw(vid, context, w, h, bb){
sampleLength = endPixelTop.length - 1;
for(var i = 0; i < sampleLength; i++){
isLetter &= endPixelTop[i] == endPixelTop[i+1];
isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
// isLetter &= endPixelBottom[i] == endPixelBottom[i+1];
}
console.log("letterbox " + (isLetter?("detected — upper bar width: " + endPixelTop[0] + "px"):"not detected"));
setTimeout(vdraw, msec_pause, vid, context, w, h, isLetter);
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);