<template>
<!-- Video Box widget -->
<div
id="VideoStream"
class="w-100 h-100 m-auto position-relative bg-black-sb shadow-sb">
<!-- Video container -->
<div class="w-100 h-100 position-relative">
<!-- Video -->
<video
v-show="show"
:id="videoId"
class="w-100 h-100" />
</div>
</div>
</template>
<script>
/**
* Vue SFC that makes a box containing a video element that will fit
* the size given by the element in which it called (in the caller
* component). It keeps the aspect ratio of the video and adapt the
* the rest of the box (black bars) to fit. It takes 2 props, an id
* for the video element so a feed can be set to it and a boolean show
* to show or hid the video. It is used as a widget.
* This component have the following dependency :
* Bootstrap-Vue for styling.
*
*
* @module widget/VideoBox
* @vue-prop {String} videoId - Identifies source with exact name reference.
* @vue-prop {boolean} show - Enable or disable the camera display.
*/
/** Disabled comment documentation
* Might use those eventually by forking jsdoc-vue-js so it can manage the author
* and version tag correctly
* @author Edouard Legare <edouard.legare@usherbrooke.ca>
* @version 1.0.0
*/
export default {
name: 'video-box',
props: {
videoId: {
type: String,
required: true,
},
show: {
type: Boolean,
required: true,
},
},
};
</script>
<style>
</style>