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