嵌入式爱好者

查看: 10355|回复: 1

[帮助] 发烧友实测 | i.MX8MP 基于HTTP网页服务器和UDP上位机的MJPG码流传输(mjpg-steamer)

[复制链接]

46

主题

53

帖子

296

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 6 Q3 W8 Z; K3 K8 v
$ D+ V' V9 P0 G) k& ]5 u% d


' x) G! L6 D+ y- a/ R4 u

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
9 U! p1 l8 m+ g  b9 J$ I) T$ V+ q3 B( A7 h/ n# G1 L2 z

本文采用的硬件板卡为飞凌嵌入式OKMX8MP-C开发板,系统版本Linux5.4.70+Qt5.15.0,主要介绍基于HTTP网页服务器和UDP上位机的MJPG码流传输。

MJPG格式作为一种持续传输的视频码流,在远程监控领域中应用较广,而实现这种远程监控的第三方应用最常见的有两种:浏览器HTTP网页、UDP上位机。

3 ?& x% i* v) |5 Y& D

. Z6 k  g# f5 v

两者各有优势,对比鲜明,其中:

  • UDP上位机:传输效率高,上位机编写方便。

  • HTTP网页方式:客户端无需安装上位机,只需要一个浏览器应用即可;客户端访问服务器支持跨平台支持,无论是电脑、平板、手机,还是Linux系统、Windows系统及安卓系统都可以,只要有浏览器应用都可访问,而UDP上位机则受限于目标平台,不易移植。

    ' s$ e& p0 Y0 S% f

这两种应用各有优缺点,对于嵌入式开发者来说,两者都必须掌握。


/ w6 d4 O! E; {一、HTTP网页服务器
" q& r# S$ j, T( E

先说下HTTP网页服务器获取MJPG码流的代码,首先是OKMX8MP-C在开发板端建立TCP服务器:

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)4 k  G6 `3 s0 a+ @# C0 e4 Y' @
  2. {
    : _1 R$ g! o  J6 l5 q( \
  3.     struct sockaddr_in servaddr;9 p( V7 m9 D" N+ {3 q
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    . z7 O/ H0 ?& W; }+ W* O
  5.     bzero(&servaddr , sizeof(servaddr));
    ) Y4 C( C3 e! N! e0 ^5 z
  6.     servaddr.sin_family = AF_INET;
    ( @  r" r" q" F0 K( k
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    2 V( K/ \) S+ Y
  8.     servaddr.sin_port = htons(port);. U# L" J& {5 ]% c( E+ k+ B5 m
  9.     int ret;9 {+ n/ S+ l% f# T; m$ I1 [
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    / Q8 \. R' n; m5 ]! J+ A& e, {
  11.         {
    1 P" T; Y  O! q6 P" n
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);7 a, F2 ^6 s% N3 ?
  13.             return -1;0 Z1 R+ h* E0 c. ~
  14.         }2 E# c8 u% \; H! H
  15.     int on = 1;
    1 i; x5 V! p. c* {- g3 u
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)8 n/ [% |2 h0 x/ J) c( C; u
  17.     {
    1 Q6 t' z& F9 x* a, |0 S
  18.         printf("setsockopt error\n");
    % @, w, W9 G2 K
  19.     }2 J; @5 H6 M) s! |3 o! E
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    + p0 v+ O) G" {. f+ N5 ^
  21.     if(ret == -1)$ p/ q6 [0 N* @; D; C  b
  22.     {
    3 B" N' J" ]) f+ y1 _
  23.             printf("Tcp bind faiLED!\n");4 {! P2 ?8 R7 Z) B+ b. a/ ~5 n5 t7 i6 D
  24.             return -1;
    - N2 u' ?. M" {3 ^
  25.     }
    0 J- V3 ?, [) |5 X
  26.     if(listen(*socket_found , 5) == -1)
    1 O' S+ B3 P' P5 K$ }/ W/ `
  27.     {6 B4 ?) n' E' s6 S! j
  28.             printf("Listen failed!\n");
    3 a+ U! K7 e4 E# `7 w9 S
  29.             return -1;
    6 t  l! W1 Z. x# t
  30.     }
    " |$ Q0 K( B: w. z- z
  31.     return 0;
    3 d% l3 w0 T2 |5 Z% h9 p' z' C, W
  32. }
复制代码

其中setsockopt()函数是可选的,一般只用于规避socket()函数的建立错误。

建立了TCP服务器后,返回的socklen_t型实参在后面的HTTP网页服务器中需要用到。

HTTP网页服务器所属的TCP操作是需要另起轮询线程来让客户端进行accept()握手操作的,accept()之前的listen()倒是只需要执行一次即可,accept()握手操作和recv()接收操作需要创建一个死循环线程:

  1. pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    & B4 r% K2 N- s1 p$ s
  2. void * Thread_TCP_Web_Recv(void *arg). }! y' z6 Y) P) w$ _  h3 W9 S
  3. {
    ! T; S$ X( R4 T
  4. 。。。
    4 G9 c4 n% s) m# `) c
  5. while(1)
    3 T9 K- z3 Q- |8 p* ?8 u
  6. {& }' T9 ?$ G: D' d
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);1 R) {/ k) X4 J/ r) x* d% Z
  8.            printf("fd_socket_conn = accept()\n");
    7 n' f0 W/ \5 M0 k2 J( l- G1 p
  9.     。。。
    4 R2 z1 x1 k1 ~  \7 ^0 N
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);: a8 U5 a3 s8 n, |
  11. }5 j* M* r) U' @
  12. 。。。
    % j. ?( s% L# F' i4 ~
  13. }
复制代码

MJPG帧可以使用Grab操作获取,获取到的MJPG帧需要在TCP线程中读,在Grab操作线程中写,这种被多个线程访问的资源需要加锁防止读写冲突,即资源被Grab操作写入时,需要上锁,不允许其它线程访问,操作完成时需要解锁,允许其它线程访问:

  1. pthread_mutex_lock(&pmt);
    # x( o" o* A8 j! S. I! B
  2.     pic_tmpbuffer = pic.tmpbuffer;
    8 }0 @) v. q7 R8 d5 s2 y
  3.     pic.tmpbytesused = buff.bytesused;2 F# N4 S" g5 I# e5 i' `! h
  4.     pic_tmpbytesused = pic.tmpbytesused;
    & \9 |/ E8 z- h9 n9 g
  5.     pthread_cond_broadcast(&pct);  Q+ ^9 `* J7 \' G" Y: b
  6.     pthread_mutex_unlock(&pmt);
复制代码

线程互斥锁使用之前需要初始化:

  1. pthread_mutex_t pmt;
    : T7 d0 N( D/ X8 k: n
  2. pthread_cond_t pct;
    / V: p& \# ?/ e5 y
  3. int main(int argc, char* argv[])( I/ q1 A7 o2 C% x6 @/ K
  4. {2 A3 L6 w; h6 ?; L
  5. ...
    5 f6 B- ^& K9 o. \, E
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);* u  d7 K7 n. D
  7. pthread_mutex_init(&pmt , NULL);
    8 Z% x8 J" ]: i, U0 S* m: I
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    ) o  [) R; I% `
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);5 Y  W3 X; e. v/ K; Z7 g2 _
  10. ...% u7 s; H& P* |) X3 q6 y; b- t
  11.     while(1)' f5 k: C- P6 E: X: G' c
  12.     {. }8 R  z; _$ W. Y, H
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);( T4 I. S* O7 [1 n
  14. ...4 c$ E# ]# ?8 y! ?1 g+ L0 j" X
  15.     }! j! H& i: p" b7 W9 e
  16. .../ a+ X# A5 J7 `6 l! u8 i
  17. }
复制代码

然后是发送的细节,发送图片文件之前,需要先发送HTTP标准头,这个相当于给发送图片或者其它类型的流数据铺路:

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">2 {& C4 d- r* m0 _
  2. </span></p><p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"></p>
复制代码
  1. #define STD_HEADER "Connection: close\r\n" \# `* V( }# T  k! E
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    ! c! p3 r! Z4 a& M* i9 ^2 [. A; X
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    5 }2 C  A- H; j1 c! j! ~. n! ~
  4.     "Pragma: no-cache\r\n" \1 k/ F. |5 Z! f) ~! m- r
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    $ c3 z1 n( C0 [( ]1 E: i+ o
  6. #define BOUNDARY "boundarydonotcross"2 v- w8 f4 a( P5 i
  7.     printf("preparing header\n");
    1 r, K: K# x+ Q0 [: i
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \  v0 n6 n! P8 r3 P
  9.             "Access-Control-Allow-Origin: *\r\n" \
    * t" B9 w( s' d
  10.             STD_HEADER \3 N' i, q5 C- u  `3 ^% Q# o
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    - f7 {4 |. ]9 ^5 [4 A
  12.             "\r\n" \
    ) S: I) K2 b  x" o# g3 Y7 s
  13.             "--" BOUNDARY "\r\n");( C. e8 z. z7 z% }; |$ Q0 x
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    8 Q* d5 u7 ]0 a& D, \
  15.     {
    ! Z! }5 N7 t( Q/ M1 U. o
  16.         free(frame);& z, b6 a+ k1 f9 a7 {& A& |
  17.         return;  q5 _! x4 S8 @* m! y2 G, r
  18.     }
复制代码

发送完HTTP标准头之后,就需要发送内容头(Content-Type),这处的Content-Type为image/jpeg,同样,HTTP标准协议里面image支持的类型远不止jpeg一种,发送完内容头之后就是正文和boundary结尾,这样帧完整的HTTP头发送到指定的TCP GET地址,就会在浏览器中显示刚刚发送的图片:

  1. <pre class="prettyprint lang-cpp" style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 16px; white-space: pre-wrap; line-height: 1.38462; color: rgb(51, 51, 51); word-break: break-all; background-color: rgb(245, 245, 245); border: 0px; border-radius: 4px; vertical-align: baseline;"> sprintf(buffer, "Content-Type: image/jpeg\r\n" \! p2 U/ y, K& q$ B2 r4 A3 S; J
  2.                 "Content-Length: %d\r\n" \
    - S" A0 R. v7 W6 K$ @: G' `9 S
  3.                 "X-Timestamp: %d.%06d\r\n" \0 j9 y) J0 h: W! N) S; E, H
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    : z; h6 i+ }) d
  5.         printf("sending intemdiate header\n");
    2 l5 Q! {# N. j
  6.         if(write(fd, buffer, strlen(buffer)) < 0)9 z. w( x+ a& G4 f* P
  7.             break;1 ?% ?! I6 K( f- a2 l
  8.         printf("sending frame\n");
    % p+ _( e7 N, r" @+ O: F3 W) r
  9.         if(write(fd, frame, frame_size) < 0)6 D3 A6 d% k2 i  V
  10.             break;5 o! m. y9 H4 r5 z& s
  11.         printf("sending boundary\n");8 u1 g' p* I+ Z* _
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");. _% k4 E+ f1 \) L: \
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    # `5 e3 G( H* [; \5 Z. [
  14.             break;</pre><p style="box-sizing: border-box; border: 0px; font-size: 16px; vertical-align: baseline; line-height: 26px; color: rgb(51, 51, 51); font-family: " helvetica="" neue",="" helvetica,="" tahoma,="" arial,="" "microsoft="" yahei",="" "hiragino="" sans="" gb",="" "wenquanyi="" micro="" hei",="" sans-serif;"=""></p>
复制代码

另外需要说明的是,TCP服务器线程在发送MJPEG流的时候是死循环发送的,因此TCP客户端在发送完GET指令之后,就会收到TCP服务器循环发送的图像缓存,TCP客户端会陷入忙等待状态无法再对外发送任何GET或者POST指令,从客户端使用者角度来看的效果就是网页一直在等待。

# q. t2 x/ x& N  N3 w

. H/ Z. V4 a7 j8 K5 {" S) |
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:& S5 i6 {% O& \* y9 T* C
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    % ~. }$ x; ?% C7 N( |6 ^
  2. {
    1 }  A  z- b' X$ y+ M+ Y
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    1 u1 s* u0 e6 o
  4.     if(*socket_found == (~0))
      o: B' |8 z5 m3 u6 B: H
  5.     {/ X7 Z: L8 \3 J
  6.         printf("Create udp send socket failed!\n");
    - `0 j- [; R# o2 l, D6 ]) Y; a
  7.         return -1;8 R/ C2 v7 P; O  J0 h$ Z! I: q9 ^
  8.     }5 A3 f* d2 v, E' [. U% k
  9.     addr->sin_family = AF_INET;
    # u" Q  q/ O# p$ f- X4 }
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    / J- e0 G4 u2 t6 U* m! J0 A4 a$ `
  11.     addr->sin_port = htons(port);  E$ @0 B/ k/ r  G
  12.     memset(addr->sin_zero, 0, 8);& g; k+ {7 d7 ~+ a& u' T
  13.     return 0;/ R+ o% \5 g( m+ l2 u
  14. }
复制代码

& i+ ~1 u# B! x" {- a$ w0 M+ D8 ^' @% q/ ]! a3 Z" W+ k
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:: Y1 r; X# O9 B& d
" ]' M, O* g! H$ r3 K* m2 G

) [' Q& X, e; C( w
  1. while(fend > 0)
    # p8 {# @( T  O- b$ }' S2 o- W3 M
  2. {
    4 p6 n9 n* H/ {% _
  3. memset(picture.data , 0 , sizeof(picture.data));
    . Q( s# D4 L# j
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    ' e7 Q2 \+ [) F& }5 c! o
  5. if(fend >= UDP_FRAME_LEN)$ g. g, J' r% @( h7 w3 \, C
  6. {/ h9 l& e5 v, u" p, I: K% I# N
  7. picture.length = UDP_FRAME_LEN;: \8 B: M! C5 n  S5 M
  8. picture.fin = 0;
    # k6 Y5 q$ q1 O6 X2 m! l9 u
  9. }
    ) O8 ?2 @  s) K
  10. else( v& }3 T) @) w1 C' e3 ^0 H2 n; c1 G
  11. {  S' b; H1 R9 i* p" [3 F
  12. picture.length = fend;, f. K& o: I* B% d
  13. picture.fin = 1;
    9 ^  e" r3 o/ Q1 z
  14. }
    3 [/ h" |0 Y& n( X) o2 b. G
  15. //printf("sendbytes = %d \n",sendbytes);; |1 `2 k( j( {' r0 C# G/ E1 P
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    . z' {1 ]0 _. L, f# H. O6 a$ [
  17. if(sendbytes == -1)4 k7 Q6 W7 A5 h+ z9 J, h2 d
  18. {2 Z; m5 `2 u3 z+ L0 n
  19. printf("Send Picture Failed!d\n");
    - x; [: U0 t5 y! R
  20. return -1;: q& l4 a, u) \7 ]; N
  21. }
    5 S: K- ?6 H" f! @9 p+ K
  22. else
    3 w: _( d* r. `% g/ ^2 |, }
  23. {, X: A/ s! C9 h0 [9 [
  24. fend -= UDP_FRAME_LEN;
    % S/ Z/ P6 J3 }
  25. }
    9 L; m  M' j4 I$ z0 Y' l
  26. }
复制代码
& T- V% o2 V. K; F6 t6 p
5 W! C7 o( z2 ^  w4 B# c* h


1 [2 r3 ?2 W$ K  g$ s7 t
9 ^" v& ~0 j0 biMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋| 飞凌嵌入式 ( 冀ICP备12004394号-1 )

GMT+8, 2025-12-4 09:25

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表