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>
            <div class='row'>
                <template x-for="item in filteredItems" :key="item">
                    <div class='col-md-6 mb-2 text-center' x-if="item == '1001'">
                    <img src="http://localhost:9099/video_feed/0/" width="100%">
                          <br>
                        <strong x-text='item'></strong>
                        
                    </div>
                    <div class='col-md-6 mb-2 text-center' x-if="item != '1001'">
                       <video x-init="vdo($el)"  class="video-js vjs-default-skin" controls preload autoplay muted>
                           <source src="./video/cctv.m3u8" type="application/x-mpegURL">
                       </video>
                        <br>
                        <strong x-text='item'></strong>
                    </div>
                </template>
            </div>
    </div> 
</div>
{% endblock %}