cam-demo/templates/index.html

{% extends 'base.html' %}
{% block main %}
<div class='row'>
    <div x-data="video_init">
        <div class='row p-2'>
            <input x-model="search" placeholder="Search..." class='form-control'>
        </div>
                           <video x-init="vdo($el)"  class="video-js vjs-default-skin m-auto" controls preload autoplay muted>
                               <source src="./video/cctv.m3u8" type="application/x-mpegURL">
                           </video>
            <div class='row'>
                <template x-for="item in filteredItems" :key="item">
                    <div class='col-md-6 mb-2 text-center'>
                        <template x-if="item == '1001'">
                    <img src="http://localhost:9099/video_feed/0/" width="480">
                          
                        </template>
                        <template x-if="item == '3001'">
                    <img src="http://localhost:9024/video_feed/0/" width="480">
                          
                        </template>
                        <p>
                        <strong x-text='item'></strong></p>
                        
                    </div>
                </template>
            </div>
    </div> 
</div>
{% endblock %}