嵌入式爱好者

查看: 10942|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 / c: }8 n4 P2 O6 U9 b9 Q6 M: A
" }) P: E" y1 j


0 e6 q7 n7 I: j! _+ `" I

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
' H  f( }4 x% R- U, l) M; @0 E' Y7 C$ u7 `

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

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

4 O( Y) i2 ~& p6 {+ E

  R- S9 [: t% X/ j

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

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

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


    7 |4 [- V  G  d+ ]

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


# B+ K. A& ~- z8 s一、HTTP网页服务器
" c( z+ F$ O5 J. ]/ [

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)7 y5 P& B- _$ p& E) s5 p; c
  2. {
    7 N" Z9 [) h( z2 \3 B  |, z
  3.     struct sockaddr_in servaddr;
    : ~: k: q. @, m: Z; w& h$ T
  4.     socklen_t addrsize = sizeof(struct sockaddr);0 I4 t0 |: L! L9 T: k
  5.     bzero(&servaddr , sizeof(servaddr));( t+ X) U' D) _' G5 w
  6.     servaddr.sin_family = AF_INET;3 M4 ^0 ]$ f# ^
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    9 x( y' L0 F# ^  @
  8.     servaddr.sin_port = htons(port);
    4 `, W& [: c3 C
  9.     int ret;
    , P% I! _6 M0 W3 u8 W) ^
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    1 ~+ a6 T6 I' ?" k
  11.         {
    2 a  ]2 h% M9 F/ l( g; i9 Z$ \
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);9 x2 \0 {; Z, M! f4 Y
  13.             return -1;( ?- a7 `: R, N9 s4 s
  14.         }. P9 ~0 `% d* e. h: X+ v# z+ z
  15.     int on = 1;
    # R) [, m; k! u+ _
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
    . ^! f' g- o# ]) D8 C
  17.     {. z8 P+ C: h3 j- q+ F
  18.         printf("setsockopt error\n");
    & j, C$ g( w  h  t
  19.     }
    # E- E' `, r4 v3 U  S, @& o
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);( P- j$ W3 A4 L% l
  21.     if(ret == -1)
    2 B5 E/ b) t- C  K
  22.     {
    ! n  }" l6 p0 X, X1 z' H, F9 v
  23.             printf("Tcp bind faiLED!\n");
    2 I4 \7 U- K- [1 a  V" E9 ?
  24.             return -1;
    ( \$ p4 ]! ?; }& ?: Q2 U
  25.     }4 V9 g1 }& u. _, s( F5 H; \
  26.     if(listen(*socket_found , 5) == -1)1 B5 ~/ B  a: U! c: q; t6 o3 o
  27.     {) g8 [' ]8 b9 p3 J. X8 F- Q# ?% V* y
  28.             printf("Listen failed!\n");
    $ j( t1 ^1 I% t. {; V
  29.             return -1;  ^7 T( `/ j  h% K" H
  30.     }$ R) g- @. h2 D- u2 C
  31.     return 0;
    8 M+ x9 A% x$ c# A+ x9 a1 M
  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);2 v& }" D4 k4 w
  2. void * Thread_TCP_Web_Recv(void *arg)" [, w' F' q6 ^( R  G
  3. {+ i  u; F  k1 a* T7 W1 g
  4. 。。。
    # v) C) \9 m+ w8 n5 o1 o
  5. while(1)8 T! P, F! E  w) F7 z$ c, ~
  6. {' Y. i" Q6 ~, x5 z  X, n) P" k; y' q
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);( A% N  y; O  u
  8.            printf("fd_socket_conn = accept()\n");
    4 L( L1 |( L6 @1 G
  9.     。。。
    ) i: f: @5 Y, e# V  N- W& Y, m
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);. F9 n/ h# i& Z. ^2 n" G! d
  11. }
    ( _: m3 n2 [3 ~
  12. 。。。
    2 d8 a. F; g% k
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);
    ; a% R' @" ]! F9 D$ Q0 S
  2.     pic_tmpbuffer = pic.tmpbuffer;
    % w( G6 C6 x  o
  3.     pic.tmpbytesused = buff.bytesused;
    $ j9 j. m7 d2 U- [  h# j2 I
  4.     pic_tmpbytesused = pic.tmpbytesused;
    ( i! p/ E" f/ \+ b5 ~; A6 [+ c
  5.     pthread_cond_broadcast(&pct);
    5 p  ~7 ?* L4 Y& W: f7 t
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    * X( V* B9 A  J" c& D% C
  2. pthread_cond_t pct;( T3 S; T$ t9 M' c7 J
  3. int main(int argc, char* argv[])" S! D! {' Q8 o0 g0 l
  4. {3 `9 u1 l+ T* @7 U: `; t* m
  5. ...4 j; {5 s5 }+ `" z' v
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);
    0 r# ?) l: a8 f6 [( C1 m
  7. pthread_mutex_init(&pmt , NULL);* {2 E0 G, _5 R
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    / R: {0 f" e6 h7 t& m6 q4 D
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);# F' ]3 |( W1 i8 |6 f, i
  10. ..." D9 B6 S/ X/ H7 ]- E, j, P
  11.     while(1)' x3 M5 b8 M7 x$ q
  12.     {
    6 b# ^+ E7 E# P* S! J) W
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
      ^0 I! j3 q. p. u! s' v
  14. ...2 g; ]5 \. C8 \: K5 [
  15.     }
    2 I. V9 b* o/ Y" M# p" t
  16. ...) N9 ^3 g* N  c  u5 b! V( I
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    5 Y% M& k5 W- Y+ m* [7 a; ?4 o% \
  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" \7 z5 f- C- [1 K" X, p: F# `
  2.     "Server: MJPG-Streamer/0.2\r\n" \* i3 t- q8 v( n. x( F
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    + _4 o0 J; w! b) K
  4.     "Pragma: no-cache\r\n" \
    4 t) D, H) D. m' R4 r- ^
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    ' e5 B/ U3 E1 D' M2 ]
  6. #define BOUNDARY "boundarydonotcross"
    ' ?( S- J, T1 R
  7.     printf("preparing header\n");
      O0 U0 U8 W* n8 |
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    $ C8 n/ i2 J) O
  9.             "Access-Control-Allow-Origin: *\r\n" \& t/ t% k; k! t0 d8 s
  10.             STD_HEADER \2 ^' f& C7 t, `7 O
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \% ^9 N7 J- c) v' n  t/ {: r
  12.             "\r\n" \
    1 i# a6 B& `, f" ~' R2 [8 ^8 ^
  13.             "--" BOUNDARY "\r\n");
    8 d$ ^& Q  \  Y( a/ a  p# H
  14.     if(write(fd, buffer, strlen(buffer)) < 0)9 g& ?& j  w' J, x
  15.     {
    & C1 g6 c# s; x
  16.         free(frame);4 n- m, P# p  Z: J: S) M
  17.         return;
    ! P1 A- X! P  P4 T" Q6 b0 j
  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" \
    9 Z  K1 Y3 N$ J6 L# H0 T
  2.                 "Content-Length: %d\r\n" \0 ^( k" P4 \2 @9 g3 e; |" V
  3.                 "X-Timestamp: %d.%06d\r\n" \
    " l+ ~, P  N) x/ O: ?5 A
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    9 I: X8 g: `& w: Y# a. T1 |
  5.         printf("sending intemdiate header\n");
    ( o. U& n; k& m
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    / Q2 P" b; ]/ D" x# c2 J
  7.             break;
    " U3 o% L) v: T
  8.         printf("sending frame\n");, v! a& W' c3 z; E0 Z8 l( e$ p
  9.         if(write(fd, frame, frame_size) < 0)
    ; h! x) h% t5 a
  10.             break;6 Q0 b! m6 }1 y, Y1 |7 ~
  11.         printf("sending boundary\n");7 K7 r7 V' _8 f8 j5 j, [* ?2 S
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    * o" i; y4 h) C; X6 J' d% [0 X
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    6 `/ U% o! S2 ^! u3 i
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。

6 J, c* I8 {; Y" h; f7 k2 p+ r, M


6 u5 [. F- ^; d二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
' J$ P! y* i8 Z' u
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)) v0 r0 U3 p0 N4 u. |* E9 D) b
  2. {
    5 t$ A% v9 s/ {
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    & E& g) F& D$ O6 c; w' b8 {
  4.     if(*socket_found == (~0))- o& t" n  V1 F8 F8 T, o
  5.     {
      w; V. i+ m, P4 b3 c' N1 F7 z) }
  6.         printf("Create udp send socket failed!\n");/ j/ C" D5 n( _; `3 q3 e
  7.         return -1;5 D7 W6 T) F. X9 b
  8.     }
    7 D' s) I( Y/ ?; Z! D: @" g2 U
  9.     addr->sin_family = AF_INET;
    ) u  c( W: j+ R/ l+ A
  10.     addr->sin_addr.s_addr = inet_addr(ip);0 h4 T, Y2 S; M/ M
  11.     addr->sin_port = htons(port);
    . u# c& `' l/ n8 {7 ^+ z
  12.     memset(addr->sin_zero, 0, 8);
    # Z. g6 k. T: B
  13.     return 0;5 M/ V: J0 P) b$ R3 w
  14. }
复制代码

9 N6 ?$ ]( w' u! v: D8 w# E4 o0 K( B, y' K7 a/ e* w/ J) T
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
0 F# I8 A. n$ w8 l9 Z3 f# e% Z: [+ N2 s! P/ }

1 Z3 i" y& \4 i5 r5 E5 C7 b" S
  1. while(fend > 0)
    6 @  ?' j" S" a0 A( ]5 C
  2. {2 Y' N+ Q' |9 T
  3. memset(picture.data , 0 , sizeof(picture.data));* W4 a( W7 B* J: M; |2 Z4 b
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    8 G6 ?8 l7 z% y; F) ?
  5. if(fend >= UDP_FRAME_LEN)2 B1 a% _4 ^& s# m/ n
  6. {# m( Z+ G& R' g# [7 }' y# T( I! G
  7. picture.length = UDP_FRAME_LEN;: E/ D6 i( W0 ^7 N: N
  8. picture.fin = 0;
    7 E' j" Z1 O3 a& c7 R, n
  9. }
    ; P. j# E# S- Y1 ]- F
  10. else( p& b( u8 _- ^5 R
  11. {
    ) Q; }* |" D3 y. e% P
  12. picture.length = fend;+ R- C6 Y" q% i. t
  13. picture.fin = 1;7 g' j8 h- ], a0 c1 N- W5 }
  14. }
    2 W2 @4 @; K6 K% k, V# z
  15. //printf("sendbytes = %d \n",sendbytes);
    ! f# P$ Y; K/ F6 l: |6 T
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    8 C9 P7 H3 j; `9 t" A- M# j7 Z
  17. if(sendbytes == -1). A$ [% A3 l; G0 e$ @( x  X
  18. {+ N- @1 o) K& C  [# \
  19. printf("Send Picture Failed!d\n");
    2 t" m! f( a- j' x3 t( T
  20. return -1;3 S  g$ H- ~, e9 }0 U3 G
  21. }# f- r  n" ^! x' y
  22. else( N! a% m1 N2 g+ K' Z5 p& D. P
  23. {$ Q6 w, j/ l6 W4 t) S$ w
  24. fend -= UDP_FRAME_LEN;
    + a' `6 b* g% H
  25. }
    / r! H; ]1 s& W$ f
  26. }
复制代码
+ U2 e- o1 I4 B. Q* S$ Q

4 m" k7 K% A  }# p2 L5 D

+ f0 X+ |; \$ Q  _9 ~, W

& m. l: p0 H3 Z0 `4 {iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-1-30 13:33

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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