Skip to content

Commit 80efb2d

Browse files
danrousedanrouse
committed
setup cross-env compat, get wasm working in browser ext
1 parent 2b8d3d4 commit 80efb2d

File tree

7 files changed

+112
-97
lines changed

7 files changed

+112
-97
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
dist
2-
lib.js
3-
lib.d.ts
2+
lib*.js
3+
lib*.d.ts
44
node_modules
55
.vscode

‎.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dlib
2+
.vscode
3+
node_modules

‎browser-ext-pre-js.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Module["locateFile"] = function(path, scriptDir) {
2+
return chrome.extension.getURL(path);
3+
}

‎lib-browser.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { dlib, Array2D, CorrelationTracker } from './lib';
2+
3+
const lib: dlib = require('./dist/binding-browser')();
4+
5+
let videoKeyInHeap: string | undefined;
6+
let cachedArray: Array2D | undefined;
7+
let canvas: HTMLCanvasElement | undefined;
8+
9+
const videoKey = (video: HTMLVideoElement, pointer: number) => pointer + video.src + video.currentTime;
10+
11+
function videoToArray2D(video: HTMLVideoElement, pointer: number): Array2D {
12+
const key = videoKey(video, pointer);
13+
if (key === videoKeyInHeap && cachedArray) return cachedArray;
14+
if (!canvas) canvas = document.createElement('canvas');
15+
const { videoWidth: width, videoHeight: height } = video;
16+
canvas.width = width;
17+
canvas.height = height;
18+
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
19+
ctx.drawImage(video, 0, 0);
20+
const pixels = ctx.getImageData(0, 0, width, height).data;
21+
lib.HEAP8.set(pixels, pointer);
22+
videoKeyInHeap = key;
23+
cachedArray = lib.readImageData(pointer, width, height);
24+
return cachedArray;
25+
}
26+
27+
interface Rectangle {
28+
x: number;
29+
y: number;
30+
width: number;
31+
height: number;
32+
}
33+
34+
export class VideoCorrelationTracker {
35+
video: HTMLVideoElement;
36+
rect: Rectangle;
37+
tracker: CorrelationTracker;
38+
39+
static lib: dlib;
40+
private static ptr: number | undefined;
41+
42+
static freeMemory() {
43+
if (this.ptr) {
44+
lib._free(this.ptr);
45+
this.ptr = undefined;
46+
}
47+
}
48+
49+
static reserveMemory(video: HTMLVideoElement) {
50+
if (this.ptr) this.freeMemory();
51+
this.ptr = lib._malloc(video.videoWidth * video.videoHeight * 4);
52+
}
53+
54+
private get videoArray2D() {
55+
if (!VideoCorrelationTracker.ptr) VideoCorrelationTracker.reserveMemory(this.video);
56+
return videoToArray2D(this.video, VideoCorrelationTracker.ptr as number);
57+
}
58+
59+
get prediction(): Rectangle {
60+
const rect = this.tracker.predict(this.videoArray2D);
61+
return {
62+
x: rect.left,
63+
y: rect.top,
64+
width: rect.width,
65+
height: rect.height,
66+
};
67+
}
68+
69+
constructor(video: HTMLVideoElement, rect: Rectangle) {
70+
this.video = video;
71+
this.rect = rect;
72+
if (!VideoCorrelationTracker.ptr) VideoCorrelationTracker.reserveMemory(video);
73+
this.tracker = new lib.CorrelationTracker();
74+
const _rect = new lib.Rectangle(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height);
75+
this.tracker.startTrack(this.videoArray2D, _rect);
76+
}
77+
78+
update(rect: Rectangle) {
79+
const _rect = new lib.Rectangle(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height)
80+
this.tracker.update(this.videoArray2D, _rect);
81+
}
82+
}

‎lib-node.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { dlib } from './lib';
2+
3+
const lib: dlib = require('./dist/binding-node')();
4+
export default lib;

‎lib.ts‎

Lines changed: 9 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
declare class CorrelationTracker {
1+
export declare class CorrelationTracker {
22
constructor(a?: number, b?: number, c?: number, d?: number, e?: number, f?: number, g?: number, h?: number);
3-
startTrack(img: Array2D, bbox: _Rectangle): void;
4-
predict(img: Array2D): _Rectangle;
5-
update(img: Array2D, guess: _Rectangle): _Rectangle;
6-
getPosition(): _Rectangle;
3+
startTrack(img: Array2D, bbox: Rectangle): void;
4+
predict(img: Array2D): Rectangle;
5+
update(img: Array2D, guess: Rectangle): Rectangle;
6+
getPosition(): Rectangle;
77
}
8-
declare class _Rectangle {
8+
export declare class Rectangle {
99
constructor(l: number, t: number, r: number, b: number);
1010
left: Readonly<number>;
1111
right: Readonly<number>;
@@ -14,103 +14,21 @@ declare class _Rectangle {
1414
width: Readonly<number>;
1515
height: Readonly<number>;
1616
}
17-
declare class Array2D {
17+
export declare class Array2D {
1818
constructor();
1919
constructor(h: number, w: number);
2020
setSize(h: number, w: number): void;
2121
set(y: number, x: number, value: number[]): void;
2222
width: Readonly<number>;
2323
height: Readonly<number>;
2424
}
25-
declare interface dlib {
25+
export interface dlib {
2626
CorrelationTracker: typeof CorrelationTracker;
2727
Array2D: typeof Array2D;
28-
Rectangle: typeof _Rectangle;
28+
Rectangle: typeof Rectangle;
2929
readImageData(pointer: number, width: number, height: number): Array2D;
3030

3131
HEAP8: Int8Array;
3232
_malloc(size: number): number;
3333
_free(pointer: number): void;
3434
}
35-
36-
const lib: dlib = require('./dist/binding')();
37-
38-
let videoKeyInHeap: string | undefined;
39-
let cachedArray: Array2D | undefined;
40-
let canvas: HTMLCanvasElement | undefined;
41-
42-
const videoKey = (video: HTMLVideoElement, pointer: number) => pointer + video.src + video.currentTime;
43-
44-
function videoToArray2D(video: HTMLVideoElement, pointer: number): Array2D {
45-
const key = videoKey(video, pointer);
46-
if (key === videoKeyInHeap && cachedArray) return cachedArray;
47-
if (!canvas) canvas = document.createElement('canvas');
48-
const { videoWidth: width, videoHeight: height } = video;
49-
canvas.width = width;
50-
canvas.height = height;
51-
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
52-
ctx.drawImage(video, 0, 0);CorrelationTracker
53-
const pixels = ctx.getImageData(0, 0, width, height).data;
54-
lib.HEAP8.set(pixels, pointer);
55-
videoKeyInHeap = key;
56-
cachedArray = lib.readImageData(pointer, width, height);
57-
return cachedArray;
58-
}
59-
60-
interface Rectangle {
61-
x: number;
62-
y: number;
63-
width: number;
64-
height: number;
65-
}
66-
67-
export class VideoCorrelationTracker {
68-
video: HTMLVideoElement;
69-
rect: Rectangle;
70-
tracker: CorrelationTracker;
71-
72-
private static ptr: number | undefined;
73-
74-
static freeMemory() {
75-
if (this.ptr) {
76-
lib._free(this.ptr);
77-
this.ptr = undefined;
78-
}
79-
}
80-
81-
static reserveMemory(video: HTMLVideoElement) {
82-
if (this.ptr) this.freeMemory();
83-
this.ptr = lib._malloc(video.videoWidth * video.videoHeight * 4);
84-
}
85-
86-
private get videoArray2D() {
87-
if (!VideoCorrelationTracker.ptr) VideoCorrelationTracker.reserveMemory(this.video);
88-
return videoToArray2D(this.video, VideoCorrelationTracker.ptr as number);
89-
}
90-
91-
get prediction(): Rectangle {
92-
const rect = this.tracker.predict(this.videoArray2D);
93-
return {
94-
x: rect.left,
95-
y: rect.top,
96-
width: rect.width,
97-
height: rect.height,
98-
};
99-
}
100-
101-
constructor(video: HTMLVideoElement, rect: Rectangle) {
102-
this.video = video;
103-
this.rect = rect;
104-
if (!VideoCorrelationTracker.ptr) VideoCorrelationTracker.reserveMemory(video);
105-
this.tracker = new lib.CorrelationTracker();
106-
const _rect = new lib.Rectangle(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height);
107-
this.tracker.startTrack(this.videoArray2D, _rect);
108-
}
109-
110-
update(rect: Rectangle) {
111-
const _rect = new lib.Rectangle(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height)
112-
this.tracker.update(this.videoArray2D, _rect);
113-
}
114-
}
115-
116-
export { lib };

‎package.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
{
22
"name": "dlib-correlation-tracker-js",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "Bindings to dlib correlation_tracker module",
5-
"main": "lib.js",
6-
"types": "lib.d.ts",
5+
"main": "lib-node.js",
6+
"browser": "lib-browser.js",
7+
"types": "lib-browser.d.ts",
78
"scripts": {
89
"tsc": "tsc",
9-
"build": "emcc --bind -s WASM=0 -s DISABLE_EXCEPTION_CATCHING=2 -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s FILESYSTEM=0 --memory-init-file 0 -s ENVIRONMENT=web -O3 -o dist/binding.js binding.cpp"
10+
"emcc:base": "emcc --bind -s MODULARIZE=1 -O3 binding.cpp",
11+
"emcc:browser": "npm run emcc:base -- -s FILESYSTEM=0 -s ALLOW_MEMORY_GROWTH=1 --memory-init-file 0 -s ENVIRONMENT=web -o dist/binding-browser.js",
12+
"emcc:browser-ext": "npm run emcc:browser -- --pre-js browser-ext-pre-js.js",
13+
"emcc:node": "npm run emcc:base -- -s ENVIRONMENT=node -o dist/binding-node.js",
14+
"build": "npm run emcc:browser && npm run emcc:node && tsc"
1015
},
1116
"repository": {
1217
"type": "git",

0 commit comments

Comments
 (0)