91 lines
3.5 KiB
HTML
91 lines
3.5 KiB
HTML
<div class="camera">
|
|
<div class="camera-container" ref="frameContainer">
|
|
<div class="no-frame" v-if="!streaming && !capturing">The camera is not active</div>
|
|
<img class="frame" :src="url" ref="frame">
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button type="button" @click="startStreaming" :disabled="capturing" v-if="!streaming">
|
|
<i class="fa fa-play"></i> Start streaming
|
|
</button>
|
|
|
|
<button type="button" @click="stopStreaming" :disabled="capturing" v-else>
|
|
<i class="fa fa-stop"></i> Stop streaming
|
|
</button>
|
|
|
|
<button type="button" @click="capture" :disabled="streaming || capturing">
|
|
<i class="fas fa-camera"></i> Take snapshot
|
|
</button>
|
|
</div>
|
|
|
|
<div class="url" v-if="url && url.length">
|
|
<label class="row">
|
|
<span class="name">Stream URL</span>
|
|
<input name="url" type="text" :value="window.location.protocol + '//' + window.location.host + url"
|
|
disabled="disabled"/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="params">
|
|
<div class="head">
|
|
<label class="row">
|
|
<span class="name">Show parameters</span>
|
|
<input name="toggleParams" type="checkbox" v-model="showParams"/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="body" :class="{ hidden: !showParams }">
|
|
<label class="row">
|
|
<span class="name">Device</span>
|
|
<input name="device" type="text" v-model="attrs.device" @change="onDeviceChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Width</span>
|
|
<input name="width" type="text" v-model="attrs.resolution[0]" @change="onSizeChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Height</span>
|
|
<input name="height" type="text" v-model="attrs.resolution[1]" @change="onSizeChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Horizontal Flip</span>
|
|
<input name="horizontal_flip" type="checkbox" v-model="attrs.horizontal_flip" @change="onFlipChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Vertical Flip</span>
|
|
<input name="vertical_flip" type="checkbox" v-model="attrs.vertical_flip" @change="onFlipChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Rotate</span>
|
|
<input name="rotate" type="text" v-model="attrs.rotate" @change="onSizeChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Scale-X</span>
|
|
<input name="scale_x" type="text" v-model="attrs.scale_x" @change="onSizeChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Scale-Y</span>
|
|
<input name="scale_y" type="text" v-model="attrs.scale_y" @change="onSizeChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Frames per second</span>
|
|
<input name="fps" type="text" v-model="attrs.fps" @change="onFpsChanged"/>
|
|
</label>
|
|
|
|
<label class="row">
|
|
<span class="name">Grayscale</span>
|
|
<input name="grayscale" type="checkbox" v-model="attrs.grayscale" @change="onGrayscaleChanged"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|