本文将介绍如何基于 webnet 组件搭建 uvc 视频流网站，帮助读者熟悉开发环境，并掌握 uvc 摄像头的使用及网站构建的基本流程与关键技术。

硬件连接

依次连接电源线、网口 0、USB 摄像头、串口、调试器。

创建工程点击展开

1. 依次点击 “文件” -> “新建” -> "RT-Thread RuiChing App 项目"。

   

2. 在弹出新建向导中选择 开发版 、BSP: 、示例 、 调试器/下载器。选择好之后点击 “完成”。

   

3. 点击 “完成” 后，等待工程创建完成。

   

4. 创建完成。

   

构建工程点击展开

1. 单击工程使工程进入 Active-Debug 模式。

   

2. 点击工具栏上的构建按钮进行工程编译。

   

3. 构建成功后，会显示构建成功的信息。

   

固件下载点击展开

1. 固化设备树

   

2. 固化 APP

   

核心示例代码

提示

• 视频帧回调函数：这段代码是一个视频帧回调函数，当有新的视频帧产生时会被自动调用，持续将接收到的视频帧包装成标准的 MJPEG 流格式发送给客户端；
• CGI函数：这段代码是一个处理 MJPEG 视频流的 CGI 处理函数，主要功能是初始化视频设备,构建 HTTP 响应头,启动视频流传输，维持会话连接并检测连接状态。

applications/webnet_uvc_stream.c

static void video_frame_callback(struct usbh_videoframe *frame)
{
    if (stream_running && g_session)
    {
        webnet_session_printf(g_session, "Content-Type: image/jpeg\r\n\r\n");
        webnet_session_write(g_session, frame->frame_buf, frame->frame_size);
        webnet_session_printf(g_session, "\r\n--%s\r\n", boundary);
    }
}

static void cgi_mjpeg_stream_handler(struct webnet_session* session)
{
    uint8_t type = 1;

    g_session = session;
    RT_ASSERT(g_session != NULL);

    /*Initialize the UVC device*/
    if (!uvc_device)
    {
        uvc_device = rt_device_find("uvc");
        if (!uvc_device)
        {
            LOG_E("uvc equipment cannot be found");
            return;
        }
        rt_device_init(uvc_device);
        rt_device_open(uvc_device, RT_DEVICE_FLAG_RDWR);
    }

    /*Set the response header*/
    char content_type[64];
    rt_snprintf(content_type, sizeof(content_type), "%s%s", mimetype, boundary);
    g_session->request->result_code = 200;
    webnet_session_set_header(g_session, content_type, 200, "OK", -1);
    webnet_session_printf(g_session, "--%s\r\n", boundary);

    /* Start the UVC stream */
    rt_device_control(uvc_device, RT_UVC_CTRL_SET_CALLBACK, (void *) video_frame_callback);
    rt_device_control(uvc_device, RT_UVC_CTRL_START_STREAM, &type);

    stream_running = RT_TRUE;
    LOG_I("The video stream has been started");

    while (stream_running)
    {
        char read_buf[32];
        int read_len;
        read_len = webnet_session_read(g_session, read_buf, sizeof(read_buf) - 1);
        if (read_len < 0)
        {
            LOG_I("The client connection has been disconnected（read_len = %d，errno = %d）", read_len, errno);
            stream_running = RT_FALSE;
        }
        rt_thread_mdelay(33);
    }

    g_session = RT_NULL;
    LOG_I("cgi_mjpeg_stream_handler exits");

}

运行示例

操作步骤

• 设置 IP 地址：将 IP 地址替换为自己网络的实际 IP 地址。

msh />ifconfig e0 10.23.8.38 10.23.8.254 255.255.255.0
config : e0
IP addr: 10.23.8.38
Gateway: 10.23.8.254
netmask: 255.255.255.0

• 启动 webnet

webnet 的根目录默认设置为sdmmc/webnet, 默认解析根目录下的index.html文件。

将applications目录下的webnet文件夹拷贝到 SD 卡中，插入 SD 卡到开发板中。

在控制台中输入 webnet_video_init 命令，启动webnet。

msh />webnet_video_init
[I/mj] RT-Thread webnet package (V2.0.3) initialize success.
[I/mj] webnet root :/sdmmc/webnet

4.测试 webnet 功能

在浏览器输入开发板的 IP 地址，访问webnet。点击开始视频流即可看到摄像头实时画面，点击停止视频流即可停止显示画面，控制台将打印开始和停止的相关信息。

[I/USB] uvc_contrl cmd = 0
[I/USB] uvc_contrl cmd = 1
[I/USB] uvc mps :3072
[I/webnet.video] The video stream has been started
[I/USB] start uvc stream...

[I/webnet.video] The client connection has been disconnected( read_len = -1, errno = 104)
[I/webnet.video] cgi_mjpeg_stream_handler exits