@mastashake08/vue-4k-camera-recorder
Version:
A Vue 3 component using MediaRecorder and MediaCapabilities API to record 4K video from the user's camera.
2 lines (1 loc) • 1.19 kB
CSS
.camera-recorder[data-v-40afb732]{font-family:sans-serif;padding:20px;border:1px solid #ccc;border-radius:8px;max-width:800px;margin:20px auto}.status p[data-v-40afb732]{margin:5px 0;font-weight:700}.status .supported[data-v-40afb732]{color:green}.status .not-supported[data-v-40afb732]{color:red}.controls button[data-v-40afb732]{margin:10px 5px 10px 0;padding:10px 15px;font-size:1em;cursor:pointer;border-radius:4px;border:1px solid #ddd;background-color:#f0f0f0}.controls button[data-v-40afb732]:disabled{cursor:not-allowed;opacity:.6}.controls button[data-v-40afb732]:not(:disabled):hover{background-color:#e0e0e0}.video-container[data-v-40afb732]{margin-top:20px;background-color:#000}.video-container h3[data-v-40afb732]{color:#eee;padding:5px;margin:0}video[data-v-40afb732]{display:block;width:100%;max-height:450px;background-color:#222}.download-section[data-v-40afb732]{margin-top:20px;padding:15px;background-color:#e8f4e8;border:1px solid #b8d8b8;border-radius:4px}.download-section a[data-v-40afb732]{font-weight:700;word-break:break-all}.error[data-v-40afb732]{color:#d8000c;background-color:#ffd2d2;border:1px solid #D8000C;padding:10px;border-radius:4px;margin-bottom:15px}