我让GPT4为OriginBot开发了一个监控功能

source /opt/ros/foxy/setup.bash  # 配置ros2环境变量
mkdir -p ~/robot_ws/src  # 创建工作空间和src目录，如果已存在可忽略此步
cd ~/robot_ws/src
ros2 pkg create --build-type ament_python camera_listener  # 创建Python类型的ros2包

import rclpy
from rclpy.node import Node
from sensor_msgs.msg import Image
from cv_bridge import CvBridge

class CameraListener(Node):

    def __init__(self):
        super().__init__('camera_listener')
        self.bridge = CvBridge()
        self.subscription = self.create_subscription(
            Image,
            'image_raw',
            self.listener_callback,
            10)
        self.subscription

    def listener_callback(self, msg):
        cv_image = self.bridge.imgmsg_to_cv2(msg, desired_encoding='passthrough')
        # 对cv_image进行处理


def main(args=None):
    rclpy.init(args=args)

    camera_listener = CameraListener()

    rclpy.spin(camera_listener)

    # Destroy the node explicitly
    camera_listener.destroy_node()
    rclpy.shutdown()


if __name__ == '__main__':
    main()

这段代码首先导入必要的模块，然后定义了一个CameraListener类，该类继承自Node，它订阅了'image_raw' topic。每当有消息发布到这个topic时，都会触发`listener_callback`方法。
注意这里的`imgmsg_to_cv2`函数就是把ROS image message转为 OpenCV 的格式。

cd ~/robot_ws/
colcon build --packages-select camera_listener  # 编译 workspace
source install/setup.bash  # 设置环境变量
ros2 run camera_listener listener.py  # 运行节点

pip install paho-mqtt

import cv2
import rclpy
from rclpy.node import Node
from sensor_msgs.msg import Image
from cv_bridge import CvBridge
import numpy as np
import paho.mqtt.client as mqtt
import base64

class CameraListener(Node):

    def __init__(self):
        super().__init__('camera_listener')
        self.bridge = CvBridge()
        self.subscription = self.create_subscription(
            Image,
            'image_raw',
            self.listener_callback,
            10)
        
        # Initialize the MQTT client
        self.client = mqtt.Client()
        self.client.connect("localhost", 1883, 60) #if your mqtt server is running on a different machine, change localhost to its IP address.

    def listener_callback(self, msg):
        cv_image = self.bridge.imgmsg_to_cv2(msg, desired_encoding='passthrough')
        
        # Convert the image to JPEG
        ret, jpeg = cv2.imencode('.jpg', cv_image)
        
        if not ret:
            raise Exception('Could not encode image!')
        
        b64_string = base64.b64encode(jpeg.tobytes()).decode('utf-8')

        # Publish the encoded string via MQTT
        self.client.publish("robot/camera/image_raw" ,b64_string)

def main(args=None):
    rclpy.init(args=args)

    camera_listener = CameraListener()

    rclpy.spin(camera_listener)

    # Destroy the node explicitly
    camera_listener.destroy_node()
    rclpy.shutdown()


if __name__ == '__main__':
    main()

cd ~/robot_ws/
colcon build --packages-select camera_listener 
source install/setup.bash  
ros2 run camera_listener listener.py

entry_points={
    'console_scripts': [
        'camera_listener = camera_listener.listener:main'
    ],
},

mosquitto_sub -h localhost -t "test"

mosquitto_pub -h localhost -t "test" -m "Hello, World!"

pip install paho-mqtt

import paho.mqtt.client as mqtt
import base64
import cv2
import numpy as np

def on_connect(client, userdata, flags, rc):
    print("Connected with result code "+str(rc))
    client.subscribe("robot/camera/image_raw") # the topic you subscribed in ROS node.

def on_message(client, userdata, msg):
    print(msg.topic+" received")
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

client = mqtt.Client()
client.on_connect = on_connect
client.on_message = on_message

# connect to the broker
client.connect("localhost", 1883, 60) 

client.loop_start() 

pip install django
pip install djangorestframework

django-admin startproject robot_server
cd robot_server

python manage.py startapp images

from django.db import models

class ImageModel(models.Model):
    data = models.TextField()   # Store base64 image string here.
    timestamp = models.DateTimeField(auto_now_add=True)

from django.contrib import admin
from .models import ImageModel

admin.site.register(ImageModel)

from rest_framework import serializers
from .models import ImageModel

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = ImageModel
        fields = ['id', 'data', 'timestamp']

from rest_framework import viewsets
from .models import ImageModel
from .serializers import ImageSerializer

class ImageViewSet(viewsets.ModelViewSet):
    queryset = ImageModel.objects.all().order_by('-timestamp')
    serializer_class = ImageSerializer

from django.urls import include, path
from rest_framework import routers
from images.views import ImageViewSet

router = routers.DefaultRouter()
router.register(r'images', ImageViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

python manage.py makemigrations images
python manage.py migrate

import paho.mqtt.client as mqtt
import base64
import cv2
import numpy as np

def on_connect(client, userdata, flags, rc):
    print("Connected with result code "+str(rc))
    client.subscribe("robot/camera/image_raw") # the topic you subscribed in ROS node.

def on_message(client, userdata, msg):
    print(msg.topic+" received")
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

client = mqtt.Client()
client.on_connect = on_connect
client.on_message = on_message

# connect to the broker
client.connect("localhost", 1883, 60) 

client.loop_start() 

from django.core.management.base import BaseCommand, CommandError
import paho.mqtt.client as mqtt
import base64
import cv2
import numpy as np
from images.models import ImageModel # importing the model

def on_connect(client, userdata, flags, rc):
    print("Connected with result code "+str(rc))
    client.subscribe("robot/camera/image_raw") # the topic you subscribed in ROS node.

def on_message(client, userdata, msg):
    print(msg.topic+" received")
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

	def save_image_to_db(image_buffer):
        encoded_string = base64.b64encode(cv2.imencode('.jpg', image_buffer)[1]).decode() # encode image to base64 string
        img_obj = ImageModel(data=encoded_string) # creating a new model instance
        img_obj.save() # saving the model
    
    save_image_to_db(image_buffer) # call this function to save image data into database

class Command(BaseCommand):

    def handle(self, *args, **options):
        client = mqtt.Client()
        client.on_connect = on_connect
        client.on_message = on_message

        client.connect("localhost", 1883, 60) 

        client.loop_forever() 

python manage.py runmqtt

python manage.py runmqtt images

# A simplified example.
import cv2
from images.models import ImageModel

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()
    
    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v') 
    out = cv2.VideoWriter('output.mp4',fourcc, 20.0, (640,480))
    
    for image in images:
        frame = ...  # recover the frame data from your model
        # Write the frame into the file 'output.mp4'.
        out.write(frame)

    # Release everything after writing.
    out.release()

frames_to_video()

from django.http import FileResponse

def stream_video(request):
    video_file_path = 'path_to_your_video_file/output.mp4'
    
    response = FileResponse(open(video_file_path, 'rb'))  
    return response 

urlpatterns = [
    # ...
    path('video-stream/', views.stream_video, name='stream-video'),
]

# Use Vue CLI to initiate a new project
npm install -g @vue/cli
vue create my-project

# Go into your project directory
cd my-project

# Install vue-router and element-plus
npm install vue-router@4
npm install element-plus

import { createRouter, createWebHistory } from 'vue-router'
import VideoStream from '../views/VideoStream.vue'

const routes = [
  {
    path: '/video-stream',
    name: 'VideoStream',
    component: VideoStream
  },
  // other routes...
]

export default createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

<template>
  <el-container direction="vertical">
    <el-header>Video Streaming</el-header>
    <el-main>
      <div class="video-container">
        <video ref="videoPlayer" autoplay></video>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

let videoPlayer = ref(null);

onMounted(async () => {
  const streamUrl = 'http://your_django_server/video-stream/';
  
  // Fetching the stream and playing it in our video player.
  const response = await fetch(streamUrl);
  const blob = await response.blob();
  const objectURL = URL.createObjectURL(blob);
  videoPlayer.value.src = objectURL;
});

</script>

<style scoped>
.video-container {
  display: flex;
  justify-content: center;
}
</style>

npm run serve

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()

    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    out = cv2.VideoWriter(
        str(settings.BASE_DIR) + '/output.mp4', fourcc, 20.0, (640, 480)
    )

    for image in images:
        frame = ...  # recover the frame data from your model
        # Write the frame into the file 'output.mp4'.
        out.write(frame)

    # Release everything after writing.
    out.release()

import cv2
import numpy as np

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()

    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    out = cv2.VideoWriter(
        str(settings.BASE_DIR) + '/output.mp4', fourcc, 20.0, (640, 480)
    )

    for image in images:
        # Assume that your model stores binary data of each frame in a column called "data".
        nparr = np.fromstring(image.data.tobytes(), np.uint8)
        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

        if frame is not None:
            # Write the frame into the file 'output.mp4'.
            out.write(frame)

    # Release everything after writing.
    out.release()

class ImageModel(models.Model):
    data = models.TextField()  # Store base64 image string here.
    timestamp = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ['-timestamp']

import cv2
import numpy as np
import base64

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()

    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    out = cv2.VideoWriter(
        str(settings.BASE_DIR) + '/output.mp4', fourcc, 20.0, (640, 480)
    )

    for image in images:
        decoded_data = base64.b64decode(image.data)
        nparr = np.fromstring(decoded_data, np.uint8)
        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

        if frame is not None:
            # Write the frame into the file 'output.mp4'.
            out.write(frame)

    # Release everything after writing.
    out.release()

import cv2
import numpy as np
import base64

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()

    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    out = cv2.VideoWriter(
        str(settings.BASE_DIR) + '/output.mp4', fourcc, 20.0, (640, 480)
    )

    for image in images:
        decoded_data = base64.b64decode(image.data)
        nparr = np.fromstring(decoded_data, np.uint8)
        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

        if frame is None:
            print('Failed to decode image with timestamp:', image.timestamp)
            continue

        # Resize the frame to required dimensions if necessary
        frame = cv2.resize(frame, (640, 480))

        # Write the frame into the file 'output.mp4'.
        out.write(frame)

    # Release everything after writing.
    out.release()

<template>
    <el-main><VoiceControl /></el-main>
</template>

<script>
import VoiceControl from '../voice_control/VoiceControl.vue'
export default {
    components: {
        VoiceControl,
    }
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;

    .el-header {
        padding: 0%;
        display: flex;
        justify-content: space-between;
        align-items: left;
        width: 100%;
        flex-direction: column;
        height: 100px;
        background-color: #333;
    }

    .el-footer {
        padding: 0%;
    }
}
</style>

npm install --save vue-video-player

<template>
    <el-main>
        <video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"></video-player>
    </el-main>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
    components: {
        videoPlayer
    },
    data() {
        return {
            playerOptions: {
                autoplay: true,
                muted: true,
                language: 'en',
                aspectRatio: '16:9',
                sources: [{
                    type: "application/x-mpegURL",
                    src: "<Your m3u8 stream URL here>"
                }],
                poster: "<Poster of the video>",
                notSupportedMessage: 'This video could not be played on this browser.',
            }
        }
    },
    methods: {
        // This method gets triggered once the player is ready
        playerReadied(player){
            console.log('The player is ready')
            // You can use the player object for further processing or handling.
        }
    }
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
    
    .el-header {
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: left;
        width: 100%;
        flex-direction: column;
        height: 100px;
        background-color: #333;
    }

    .el-footer {
        padding: 0;
    }

    .vjs-custom-skin {
      /* Add your custom styles for the video player element */
    }
}
</style>

import cv2
import numpy as np
import base64

def frames_to_video():
    # Read all images from database.
    images = ImageModel.objects.all()

    # Define the codec and create VideoWriter object.
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    out = cv2.VideoWriter(
        str(settings.BASE_DIR) + '/output.mp4', fourcc, 20.0, (640, 480)
    )

    for image in images:
        decoded_data = base64.b64decode(image.data)
        nparr = np.fromstring(decoded_data, np.uint8)
        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

        if frame is None:
            print('Failed to decode image with timestamp:', image.timestamp)
            continue

        # Resize the frame to required dimensions if necessary
        frame = cv2.resize(frame, (640, 480))

        # Write the frame into the file 'output.mp4'.
        out.write(frame)

    # Release everything after writing.
    out.release()

def stream_video(request):
    video_file_path = str(settings.BASE_DIR) + '/output.mp4'

    response = FileResponse(open(video_file_path, 'rb'))
    return response

<template>
    <el-main>
        <video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"></video-player>
    </el-main>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
    components: {
        videoPlayer
    },
    data() {
        return {
            playerOptions: {
                autoplay: true,
                muted: false,
                language: 'en',
                aspectRatio: '16:9',
                sources: [{
                    type: "video/mp4",
                    src: "<Your server's endpoint here>"
                }],
                poster: "<Poster of the video>",
                notSupportedMessage: 'This video could not be played on this browser.',
            }
        }
    },
    methods: {
        // This method gets triggered once the player is ready
        playerReadied(player){
            console.log('The player is ready')
            // You can use the player object for further processing or handling.
        }
    }
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
    
    .el-header {
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: left;
        width: 100%;
        flex-direction: column;
        height: 100px;
        background-color: #333;
    }

    .el-footer {
        padding: 0;
    }

    .vjs-custom-skin {
      /* Add your custom styles for the video player element */
    }
}
</style>

from django.core.management.base import BaseCommand, CommandError
import paho.mqtt.client as mqtt
import base64
import cv2
import numpy as np
from monitor.models import ImageModel  # importing the model


def on_connect(client, userdata, flags, rc):
    print("Connected with result code " + str(rc))
    client.subscribe("robot/camera/image_raw")  # the topic you subscribed in ROS node.


def on_message(client, userdata, msg):
    print(msg.topic + " received")
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

    def save_image_to_db(image_buffer):
        encoded_string = base64.b64encode(
            cv2.imencode('.jpg', image_buffer)[1]
        ).decode()  # encode image to base64 string
        img_obj = ImageModel(data=encoded_string)  # creating a new model instance
        img_obj.save()  # saving the model

    save_image_to_db(
        image_buffer
    )  # call this function to save image data into database
    print("saved a image successfully.")


class Command(BaseCommand):
    def handle(self, *args, **options):
        client = mqtt.Client()
        client.on_connect = on_connect
        client.on_message = on_message

        client.connect("192.168.0.120", 1883, 60)

        client.loop_forever()

def on_message(client, userdata, msg):
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

    ret, jpeg = cv2.imencode('.jpg', img)
    if not ret:
        raise Exception('Failed to encode image')

    ffmpeg.stdin.write(jpeg.tobytes())

def stream_video(request):
    # 此处根据实际 serdever 端细节填充，以下双引号内为伪地址。
    video_file_path = "http://my_server:port/stream_path" 

    return StreamingHttpResponse(
        (stream.generate_stream(video_file_path), content_type="multipart/x-mixed-replace; boundary=frame")
    )

<template>
  <div class="video-stream">
    <video-player :options='playerOptions'>
    </video-player>
  </div>
</template>

<script>
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        // 视频 流 url 并通过 Django 视图Talks with your backend
        sources: [{
          type: "application/x-mpegURL",
          src: "http://your_django_view_url"
        }],
        autoplay: true,
      }
    }
  }
}
</script>

sudo apt-get install ffmpeg

from subprocess import Popen, PIPE

command = ['ffmpeg',
           '-y',          # Overwrite output files 
           '-f', 'image2pipe',   # Image format (png, jpeg)
           '-r', '10',         # Framerate (fps)
           '-i', '-',       # Input comes from pipe
           '-vcodec', 'libx264',
           '-pix_fmt', 'yuv420p',  # codec and pixel format suitable for most players
           '-preset', 'ultrafast',      
           '-tune', 'zerolatency',
           '-f', 'flv',    # FLV is a common container format
           "rtmp://127.0.0.1/live/test"]

# Open the process
ffmpeg_pipe = Popen(command, stdin=PIPE)

def on_message(client, userdata, msg):
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.cvtColor(cv2.imdecode(jpg_as_np, flags=1), cv2.COLOR_BGR2RGB)

    ret, frame = cv2.imencode('.png', img) # or '.jpg'
    if not ret:
        raise Exception('Failed to encode image')
    
    ffmepg.stdin.write(frame.tobytes())

worker_processes auto;
events {}
http {
    server {
        listen      8080;
     
        location /live {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp/hls;
            add_header Cache-Control no-cache;
        }
    }
}
rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application live {
            live on; # Enable live streaming

            # Turn on HLS
            hls on;
            hls_path /tmp/hls;
            hls_fragment 3;
            hls_playlist_length 60;
           
            record off;        
        }
    }
}

npm install --save video.js@7
npm install --save @videojs/http-streaming

<template>
  <div class="VideoPlayer">
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: ['url'],
  data() {
    return {
      player: null,
    }
  },
  mounted() {
    const player = (this.player = videojs(this.$refs.videoPlayer, {}, () => {
      console.log('Player ready')
      this.player.src({
        src: this.url,
        type: 'application/x-mpegURL', // Or other relevant type depending on the stream
      })
      this.player.play()
    }))
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
}
</script>

<style scoped>
.video-js {
  width: 640px;
  height: 360px;
}
</style>

<VideoPlayer :url="'http://your_server_ip:8080/live/test.m3u8'" />

sudo apt-get install ffmpeg

from subprocess import Popen, PIPE

command = ['ffmpeg',
           '-y',          # Overwrite output files 
           '-f', 'image2pipe',   # Image format (png, jpeg)
           '-r', '10',         # Framerate (fps)
           '-i', '-',       # Input comes from pipe
           '-vcodec', 'libx264',
           '-pix_fmt', 'yuv420p',  # codec and pixel format suitable for most players
           '-preset', 'ultrafast',      
           '-tune', 'zerolatency',
           '-f', 'flv',    # FLV is a common container format
           "rtmp://127.0.0.1/live/test"]  # Output RTMP Stream

# 开启子进程
ffmpeg_pipe = Popen(command, stdin=PIPE)

def on_message(client, userdata, msg):
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.cvtColor(cv2.imdecode(jpg_as_np, flags=1), cv2.COLOR_BGR2RGB)

    ret, frame = cv2.imencode('.png', img) # or '.jpg'
    if not ret:
        raise Exception('Failed to encode image')
    
    ffmepg.stdin.write(frame.tobytes())

npm install --save video.js@7
npm install --save @videojs/http-streaming

def on_message(client, userdata, msg):
    jpg_original = base64.b64decode(msg.payload)
    jpg_as_np = np.frombuffer(jpg_original, dtype=np.uint8)
    image_buffer = cv2.imdecode(jpg_as_np, flags=1)

    ret, jpeg = cv2.imencode('.jpeg', image_buffer) # or '.jpg'
    if not ret:
        raise Exception('Failed to encode image')
    
    ffmpeg_pipe.stdin.write(jpeg.tobytes())

sudo apt update
sudo apt install nginx

# 首先备份当前的 Nginx 执行文件，以防万一新的编译产生问题
sudo cp /usr/sbin/nginx /usr/sbin/nginx.bak

# 获取 Nginx 源代码
cd ~/
wget http://nginx.org/download/nginx-1.18.0.tar.gz   # 请检查并下载最新版本
tar zxvf nginx-1.18.0.tar.gz

# 获取 nginx-rtmp-module
git clone https://github.com/sergey-dryabzhinsky/nginx-rtmp-module.git

# 编译并安装带有 nginx-rtmp-module 的 Nginx
cd ~/nginx-1.18.0
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module
make -j 1
sudo make install

worker_processes auto;
events {
    worker_connections 1024; 
}

http {  
    server {
        listen      8080;

        location /hls {
            types{
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root tmp/;
            add_header Cache-Control no-cache;
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length';
        }
    }
}

rtmp {
    server { 
        listen 1935;
        chunk_size 4000;

        application live {
            live on;
            hls on;
            hls_path /tmp/hls/;
            hls_fragment 3s;
        }  
    }
}

sudo /usr/local/nginx/sbin/nginx   # 按照编译安装时产生的路径执行.

sudo mkdir /tmp/hls/
sudo chmod -R 777 /tmp/hls/

worker_processes  auto;
error_log logs/error.log debug;

events {
    worker_connections 1024;
}

http {

    include mime.types;

    server {
        listen 8080;

        location / {
            root html;
            index index.html;
        }

        location /hls {
             # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp/;
            add_header Cache-Control no-cache; 
            add_header 'Access-Control-Allow-Origin' '*'; 
        }
    }
}

rtmp {
    server {
        listen 1935;
        chunk_size 4000;

        application live {
            live on;
            record off;

            hls on;
            hls_path /tmp/hls;
            hls_fragment 3s;
        }
    }
}

location /hls {
    # Serve HLS fragments
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }
    root /tmp;  # Here make sure this points to your actual hls path you setup in the rtmp setting.
    add_header Cache-Control no-cache; 
    add_header 'Access-Control-Allow-Origin' '*'; 
}

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"
    data-setup='{}'>
  <source src="http://your_server_ip:8080/hls/test.m3u8" type="application/x-mpegURL">
</video>

<template>
    <div class="VideoPlayer">
        <video ref="'http://192.168.0.120:8001/hls/test.m3u8" class="video-js vjs-default-skin" controls></video>
    </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
    name: 'VideoPlayer',
    props: ['url'],
    data() {
        return {
            player: null,
        }
    },
    mounted() {
        const player = (this.player = videojs(this.$refs.videoPlayer, {}, () => {
            console.log('Player ready')
            this.player.src({
                src: this.url,
                type: 'application/x-mpegURL', // Or other relevant type depending on the stream
            })
            this.player.play()
        }))
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    },
}
</script>

<style scoped>
.video-js {
    width: 640px;
    height: 360px;
}
</style>

<template>
    <div class="VideoPlayer">
        <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video>
    </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: ['url'],
  setup(props) {
    const videoPlayer = ref(null);
    let player;

    onMounted(() => {
      player = videojs(videoPlayer.value, {}, () => {
        console.log('Player ready')
        player.src({
          src: props.url,
          type: 'application/x-mpegURL', // Or other relevant type depending on the stream
        })
        player.play();
      });
    });

    onBeforeUnmount(() => {
      if(player) {
        player.dispose();
      }
    });

    return {
      videoPlayer
    };
  },
}
</script>

<style scoped>
.video-js {
    width: 640px;
    height: 360px;
}
</style>

<template>
    <div class="VideoPlayer">
        <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video>
    </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: ['url'],
  setup(props) {
    const videoPlayer = ref(null);
    let player;

    onMounted(() => {
      player = videojs(videoPlayer.value, {}, () => {
        console.log('Player ready')
        player.src({
          src: props.url,
          type: 'application/x-mpegURL', // Or other relevant type depending on the stream
        })
        player.play();
      });
    });

    onBeforeUnmount(() => {
      if(player) {
        player.dispose();
      }
    });

    return {
      videoPlayer
    };
  },
}
</script>

<style scoped>
.video-js {
    width: 640px;
    height: 360px;
</style>

<template>
  <div>
    <!-- Other content -->
    
    <!-- Use VideoPlayer component with :url prop -->
    <VideoPlayer :url="'http://192.168.0.120:8001/hls/test.m3u8'"/>
    
    <!-- Other content -->
  </div>
</template>

<script>
// Import VideoPlayer component
import VideoPlayer from '../components/VideoPlayer.vue';

export default {
  components: {
    VideoPlayer // Register VideoPlayer component
  },
  
  // Other options...
};
</script>

<!-- Other styles or scripts as needed -->

class ImageModel(models.Model):
    data = models.TextField()  # Store base64 image string here.
    timestamp = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ['-timestamp']

def save_image_to_db(image_buffer):
    encoded_string = base64.b64encode(
        cv2.imencode('.jpg', image_buffer)[1]
    ).decode()
    img_obj = ImageModel(data=encoded_string)
    img_obj.save()

save_image_to_db(
    image_buffer
)  # call this function to save image data into database

import base64
import cv2
from datetime import datetime

def retrieve_image_from_db():
    # Fetch the most recent image data from database
    img_obj = ImageModel.objects.latest('timestamp')

    if img_obj:
        decoded_img = base64.b64decode(img_obj.data) 
        
        # Create a numpy array and reshape it into an OpenCV image matrix
        npimg = np.fromstring(decoded_img, dtype=np.uint8); 
        img = cv2.imdecode(npimg, 1)

        # Save the file locally with timestamp in filename to differentiate multiple files
        now = datetime.now()
        time_string = str(now.strftime("%Y_%m_%d-%H_%M_%S"))
        filename = "image_" + time_string + ".jpg"
        
        cv_state = cv2.imwrite(filename, img)
        return cv_state
    
    else:
        print("No images found in the database.")

import os
import sys

# Assuming the project name is 'myproject'
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
sys.path.append('/path/to/your/project')   # replace with your Django project path.
import django
django.setup()

import cv2
import numpy as np
from datetime import datetime
import base64

from myapp.models import ImageModel  # Replace 'myapp' with your actual app name.

def retrieve_image_from_db():
    try:
        # Fetch the most recent image data from database
        img_obj = ImageModel.objects.latest('timestamp')

        decoded_img = base64.b64decode(img_obj.data) 

        # Create a numpy array and reshape it into an OpenCV image matrix
        npimg = np.fromstring(decoded_img, dtype=np.uint8); 
        img = cv2.imdecode(npimg, 1)

        # Save the file locally with timestamp in filename to differentiate multiple files
        now = datetime.now()      
        time_string = str(now.strftime("%Y_%m_%d-%H_%M_%S"))
        filename = "image_" + time_string + ".jpg"
        
        cv_state = cv2.imwrite(filename, img)
        if cv_state:
            print(f"Image saved successfully under the name: {filename}")
            return True
        else:
            print("Failed to write image.")
            return False

    except ImageModel.DoesNotExist:
        print("No images found in the database.")
        return False

from django.core.management.base import BaseCommand
import cv2
import numpy as np
from datetime import datetime
import base64

from myapp.models import ImageModel  # Replace 'myapp' with your actual app name


class Command(BaseCommand):
    help = 'Retrieve the latest image from database and save it to local system'

    def handle(self, *args, **kwargs):
        try:
            # Fetch the most recent image data from database
            img_obj = ImageModel.objects.latest('timestamp')
    
            decoded_img = base64.b64decode(img_obj.data) 
    
            # Create a numpy array and reshape it into an OpenCV image matrix
            npimg = np.fromstring(decoded_img, dtype=np.uint8)
            img = cv2.imdecode(npimg, 1)
    
            # Save the file locally with timestamp in filename to differentiate multiple files
            now = datetime.now()
            time_string = str(now.strftime("%Y_%m_%d-%H_%M_%S"))
            filename = "image_" + time_string + ".jpg"
            
            cv_state = cv2.imwrite(filename, img)
            if cv_state:
                self.stdout.write(self.style.SUCCESS(f'Successfully saved image as {filename}'))
            else:
                self.stdout.write(self.style.ERROR('Failed to write image.'))

        except ImageModel.DoesNotExist:
            self.stdout.write(self.style.WARNING('No images found in the database.'))

python manage.py retrieve_image