-
Notifications
You must be signed in to change notification settings - Fork 21
/
pip_module.js
120 lines (93 loc) · 4.1 KB
/
pip_module.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
//window.pip_header_canvas_context = window.pip_header_canvas.getContext("2d");
window.pip_video = document.createElement("video");
// Picture in Picture
window.pip_canvas = document.createElement("canvas");
window.pip_canvas_context = window.pip_canvas.getContext("2d");
window.pip_header_canvas = document.createElement("canvas");
window.pip_canvas.width = 480;
window.pip_canvas.height = 640;
window.pip_header_canvas.width = 480;
window.pip_header_canvas.height = 50;
//async function load_pip_image(url) {
// return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
//}
async function really_write_on_pip_canvas(text=null){
if(window.pip_started){
await window.add_script('./js/canvasTxt.js');
// test
if(window.canvasTxt && typeof text == 'string'){
//console.log("write_on_pip_canvas: writing");
const { drawText, getTextHeight, splitText } = window.canvasTxt; // https://github.com/geongeorge/Canvas-Txt/
window.pip_canvas_context.clearRect(0, 0, window.pip_canvas.width, window.pip_canvas.height);
//window.pip_canvas_context.fillStyle = "white";
//window.pip_canvas_context.font = "bold 16px Arial";
if(text.length < 500){
window.pip_canvas_context.drawImage(window.pip_header_canvas, 5, 5);
const { height } = drawText(window.pip_canvas_context, text, {
x: 20,
y: 70,
width: (window.pip_canvas.width - 40),
height: (window.pip_canvas.height - 90),
fontSize: 24,
align:'left',
vAlign:'top',
lineHeight:35,
debug:false,
});
//console.log(`write_on_canvas: total height = ${height}`);
if(height < window.pip_canvas.height - 90){
window.pip_video.srcObject = window.pip_canvas.captureStream(0);
return
}
else{
window.pip_canvas_context.clearRect(0, 0, window.pip_canvas.width, window.pip_canvas.height);
}
}
drawText(window.pip_canvas_context, text, {
x: 20,
y: 20,
width: (window.pip_canvas.width - 40),
height: (window.pip_canvas.height - 40),
fontSize: 24,
align:'left',
vAlign:'bottom',
lineHeight:35,
debug:false,
});
window.pip_video.srcObject = window.pip_canvas.captureStream(0);
}
}
}
window.really_write_on_pip_canvas = really_write_on_pip_canvas;
function image_to_pip_canvas(image_blob){
//console.log("in image_to_pip_canvas. window.pip_started,typeof image_blob: ", window.pip_started, typeof image_blob);
if(window.pip_started && typeof image_blob != 'undefined'){
window.pip_canvas_context.clearRect(0, 0, window.pip_canvas.width, window.pip_canvas.height);
window.pip_canvas_context.drawImage(window.pip_header_canvas, 5, 5);
//console.log("image_to_pip_canvas: creating image");
var img1 = new Image();
img1.onload = function(event) {
//console.log("image_to_pip_canvas: blob succesfully loaded into image");
if(typeof img1.width == 'number' && img1.width > 0){
const ratio = window.pip_canvas.width / img1.width;
//console.log("image_to_pip_canvas: ratio: ", ratio);
const centerShift_y = ( window.pip_canvas.height - img1.height*ratio ) / 2;
var centerShift_x = ( window.pip_canvas.width - img1.width*ratio ) / 2;
//console.log("image_to_pip_canvas: centerShift_x: ", centerShift_x);
//console.log("image_to_pip_canvas: centerShift_y: ", centerShift_y);
window.pip_canvas_context.drawImage(img1, 0,0, img1.width, img1.height, centerShift_x, centerShift_y, img1.width*ratio, img1.height*ratio);
window.pip_video.srcObject = window.pip_canvas.captureStream(0);
}
else{
console.error("image_to_pip_canvas: img did not have valid width: ", typeof img1.width, img1.width);
}
//ctx.drawImage(img1, 0, 70);
URL.revokeObjectURL(event.target.src);
}
img1.src = URL.createObjectURL(image_blob);
}
else{
console.warn("image_to_pip_canvas: pip not started, or invalid image blob provided. window.pip_started,typeof image_blob: ", window.pip_started, typeof image_blob);
}
}
window.image_to_pip_canvas = image_to_pip_canvas;