Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Paul Geisler
portramat-ii
Commits
44cf8c91
Commit
44cf8c91
authored
Nov 26, 2019
by
dronus
Browse files
added state machine for portrait mirror slideshow
parent
608c12a5
Changes
1
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
44cf8c91
...
...
@@ -16,48 +16,125 @@
position
:
relative
;
}
#video
{
position
:
absolute
;
top
:
0px
;
left
:
0px
;}
#video2
{
position
:
absolute
;
bottom
:
0px
;
left
:
0px
;}
canvas
{
position
:
absolute
;
top
:
0px
;
right
:
0px
;}
#mirror
{
position
:
absolute
;
bottom
:
0px
;
left
:
0px
;}
#photo
{
position
:
absolute
;
bottom
:
0px
;
right
:
0px
;}
#slides
{
position
:
absolute
;
top
:
0px
;
right
:
0px
;}
</style>
<video
id=
video
></video>
<video
id=
video2
></video>
<canvas
id=
"photo"
></canvas>
<video
id=
mirror
></video>
<canvas
id=
photo
></canvas>
<canvas
id=
slides
width=
480
height=
800
></canvas>
<script
src=
"face-api.js"
></script>
<script>
var
state
=
null
;
var
states
=
[];
function
switch_state
(
new_state
){
if
(
state
==
new_state
)
return
;
console
.
log
(
'
Switch to state
'
+
new_state
+
'
(was
'
+
state
+
'
)
'
);
states
[
new_state
]();
state
=
new_state
;
}
states
.
idle
=
function
(){
document
.
querySelector
(
'
#mirror
'
).
style
.
visibility
=
'
hidden
'
;
document
.
querySelector
(
'
#slides
'
).
style
.
visibility
=
'
hidden
'
;
}
states
.
preroll
=
function
(){
setTimeout
(
function
(){
switch_state
(
'
show_mirror
'
)},
5000
);
}
states
.
show_mirror
=
function
(){
document
.
querySelector
(
'
#mirror
'
).
style
.
visibility
=
'
visible
'
;
setTimeout
(
function
(){
switch_state
(
'
show_slideshow
'
)},
5000
);
}
var
slides
=
[];
for
(
var
i
=
0
;
i
<
20
;
i
++
)
slides
.
push
(
document
.
createElement
(
'
canvas
'
));
var
slide_capture_index
=
0
;
var
slide_show_index
=
0
;
var
slide_interval
;
states
.
show_slideshow
=
function
(){
document
.
querySelector
(
'
#slides
'
).
style
.
visibility
=
'
visible
'
;
slide_show_index
=
slide_capture_index
;
slide_interval
=
setInterval
(
function
(){
var
ctx
=
document
.
getElementById
(
'
slides
'
).
getContext
(
'
2d
'
);
ctx
.
drawImage
(
slides
[
slide_show_index
],
0
,
0
);
slide_show_index
=
(
slide_show_index
+
1
)
%
slides
.
length
;
},
1000
);
slide_capture_index
=
(
slide_capture_index
+
1
)
%
slides
.
length
;
setTimeout
(
function
(){
switch_state
(
'
hide_mirror
'
)},
20000
);
}
states
.
hide_mirror
=
function
(){
document
.
querySelector
(
'
#mirror
'
).
style
.
visibility
=
'
hidden
'
;
setTimeout
(
function
(){
switch_state
(
'
hide_slideshow
'
)},
5000
);
}
states
.
hide_slideshow
=
function
(){
clearInterval
(
slide_interval
);
document
.
querySelector
(
'
#slides
'
).
style
.
visibility
=
'
hidden
'
;
setTimeout
(
function
(){
switch_state
(
'
idle
'
)},
6000
);
}
// faceapi.loadSsdMobilenetv1Model('/models');
faceapi
.
loadTinyFaceDetectorModel
(
'
/models
'
);
// faceapi.loadFaceLandmarkModel('/models')
var
time
=
0
,
frame_time
=
0
;
// running time
var
canvas_photo
=
document
.
getElementById
(
'
photo
'
);
var
update
=
async
function
()
{
// enqueue next update
requestAnimationFrame
(
update
);
// get animation time
var
current_time
=
Date
.
now
();
frame_time
=
frame_time
*
0.9
+
(
current_time
-
time
)
*
0.1
;
time
=
current_time
;
//grab the context from your destination canvas
video
=
get_video
(
0
);
var
detection
=
await
faceapi
.
detectSingleFace
(
video
,
new
faceapi
.
TinyFaceDetectorOptions
());
//.withFaceLandmarks();
video
=
get_video
(
1
);
if
(
!
video
||
video
.
videoWidth
==
0
)
{
// enqueue next update
requestAnimationFrame
(
update
);
return
;
}
var
canvas_photo
=
document
.
getElementById
(
'
photo
'
);
canvas_photo
.
width
=
video
.
videoWidth
;
canvas_photo
.
height
=
video
.
videoHeight
;
var
ctx2d
=
canvas_photo
.
getContext
(
'
2d
'
);
ctx2d
.
drawImage
(
video
,
0
,
0
);
var
detection
=
await
faceapi
.
detectSingleFace
(
canvas_photo
,
new
faceapi
.
TinyFaceDetectorOptions
());
//.withFaceLandmarks();
if
(
detection
&&
detection
.
box
.
height
>
150
)
{
var
box
=
detection
.
box
;
var
pad
=
box
.
width
*
0.1
;
canvas_photo
.
width
=
box
.
width
+
2
*
pad
;
canvas_photo
.
height
=
box
.
height
+
2
*
pad
;
var
ctx2d
=
canvas_photo
.
getContext
(
'
2d
'
);
ctx2d
.
drawImage
(
video
,
box
.
x
-
pad
,
box
.
y
-
pad
,
box
.
width
+
2
*
pad
,
box
.
height
+
2
*
pad
,
0
,
0
,
box
.
width
+
2
*
pad
,
box
.
height
+
2
*
pad
);
var
pad
=
0.2
;
var
w
=
box
.
width
*
(
1
+
pad
*
2
);
var
h
=
800
.
/
480
.
*
w
;
var
canvas
=
slides
[
slide_capture_index
];
canvas
.
width
=
480
;
canvas
.
height
=
800
;
//box.width+2*pad_x; canvas.height=box.height+2*pad_y;
var
ctx2d
=
canvas
.
getContext
(
'
2d
'
);
ctx2d
.
drawImage
(
canvas_photo
,
box
.
x
-
box
.
width
*
pad
,
box
.
y
-
box
.
height
*
pad
,
w
,
h
,
0
,
0
,
480
,
800
);
if
(
state
==
'
idle
'
)
switch_state
(
'
preroll
'
);
}
requestAnimationFrame
(
update
);
};
var
videos
=
{};
...
...
@@ -110,7 +187,7 @@
}
recorder
.
start
(
1000
);
}
video2
=
document
.
getElementById
(
'
video2
'
);
video2
=
document
.
getElementById
(
'
mirror
'
);
video2
.
src
=
URL
.
createObjectURL
(
source
);
var
capture_stream
=
video
.
captureStream
();
setTimeout
(
function
(){
...
...
@@ -140,6 +217,9 @@
navigator
.
mediaDevices
.
enumerateDevices
().
then
(
function
(
devices
){
onSourcesAcquired
(
devices
);
});
switch_state
(
'
idle
'
);
</script>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment