Ecamm Live Kamera mit CSS HTML und JS animieren (Ecamm Live oder OBS)

von | Dez. 29, 2021 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - Ecamm Live

Ihr möchtet eure Livestreams oder Videos ein wenig verbessern? Dann wäre evtl eine Animation der Kamera eine gute Idee.

In diesem Video möchte ich euch zeigen, wie ihr mit JS und dem Browser das Videosignal abfangen und anzeigen könnt und dann die Kamera gleich mit CSS animieren könnt.
Klingt fast unglaublich, ist aber tatsächlich möglich und zwar ohne dass ihr noch was zusätzliches dazu laden müsst.

Der HTML Aufbau wie auch das Javascript ist immer das gleiche – denn die ganze Animation läuft über das CSS und hier kann man es dann selbst anpassen. Ich werde euch ein paar CSS Ideen zeigen, die ihr kopieren und noch für eure Zwecke anpassen könnt.

Video

HTML

1
2
3
4
5
6
7
8
<div class="container">
        <!-- 640*480 // 480*360 // 360*270-->
        <!-- 1920*1080 / 1280*720 / 854*480 / 640*360 / 426*240-->
 
      <video class="video" id="video" width="426" height="240" autoplay></video>  
 
      <canvas id="canvas" width="426" height="240"></canvas>
    </div>

JavaScript

Dieses Script am Schluss kurz vor dem Ende des Body Tag einsetzen.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
        let canvas = document.querySelector("#canvas");
        let contect = canvas.getContext("2d");
        let video = document.querySelector("#video");
 
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({video:true}).then((stream) => {
                video.srcObject = stream;
                video.play();
            });
        }
        </script>

CSS

Links Rechts

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
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: green;
}
.container {
    position: relative;
    width: 1920px;
    height: 1080px;
    border: 1px solid black;
}
 
.video {
    border: 1px solid gainsboro;
    position: absolute;
    bottom: 0; /* entfernen wenn oben */
    animation: slide1 30s infinite linear;
}
 
@keyframes slide1 {
    0% {
        left: 0px;
    }
    50% {
        left: 1494px;
    }
    100% {
        left: 0px;
    }
 
}

Rauf Runter

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
* {
    margin: 0;
    padding: 0;
}
body {
/*background-color: rgba(0,0,0,0);*/
background-color: green;
}
.container {
    position: relative;
    width: 1920px;
    height: 1080px;
    border: 1px solid black;
}
 
.video {
    border: 1px solid gainsboro;
    position: absolute;
     /* bottom: 0; entfernen wenn oben */
    animation: slide2 30s infinite linear;
}
 
@keyframes slide2 {
    0% {
 
        top: 0px
    }
    50% {
        top: 840px;
    }
    100% {
        top: 0px
    }
 
 
}

Im Kreis herum

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
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: green;
}
.container {
    position: relative;
    width: 1920px;
    height: 1080px;
    border: 1px solid black;
}
 
.video {
    border: 1px solid gainsboro;
    position: absolute;
     /* bottom: 0; entfernen wenn oben */
    animation: slide2 30s infinite linear;
}
 
@keyframes slide2 {
    0% {
        left: 0px;
    }
    25% {
        left: 1494px;
        top: 0px;
    }
    50% {
        left: 1494px;
        top: 840px;
    }
    75% {
        left: 0px;
        top: 840px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
 
 
}

Wie ihr hier sehen könnt, die ganze Animationsmagie findet eigentlich im Keyframe statt.





0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert