嵌入式爱好者

查看: 11647|回复: 1

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

[复制链接]

48

主题

55

帖子

304

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 ! M# \* P* D. ^

  M$ d2 ^& X7 B/ O' D


3 }( S$ T; ?# U' v; H8 a2 N8 o

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
$ W- \. b( F& S/ L% {' D/ i+ L1 q, Q

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

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


( }) E1 c& {$ t

. i. [, f) D; h1 I4 [2 ?8 t" Y0 [

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

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

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

    6 V1 B: t9 x9 ]8 v" F! ]& U

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


3 P/ Y8 S, E5 V: w8 c7 }一、HTTP网页服务器% r+ _  g- F" T5 B4 O5 |4 v7 ~! T  |

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    ( t2 `" s6 b# E9 B1 |; W" C
  2. {3 t1 u' y( `  g* F: E: a1 T- A/ [
  3.     struct sockaddr_in servaddr;
    ; v8 b5 M# r! h; q8 r  X) J* I
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    6 m8 u' ]# ~# E) s+ q
  5.     bzero(&servaddr , sizeof(servaddr));: L2 q/ ^% A; ~6 D' B# A) K
  6.     servaddr.sin_family = AF_INET;4 [$ t+ w) b2 J' V/ l  b& y3 c
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    " T) P( V, B3 x7 _1 @7 m- V0 i1 V
  8.     servaddr.sin_port = htons(port);
    & E3 p. ~5 ^1 [/ o' i
  9.     int ret;
    * T2 m. j+ ~; \; T1 X4 a
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1): x  {; o2 `9 H9 P3 g! w8 M
  11.         {
    2 |% G3 {! b, ~% \
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
      v- a# N, D* v. U7 i, U
  13.             return -1;/ N& J- s7 ]6 k" Z  B% v+ g+ V
  14.         }# p% `+ f( {  g" D- _) n
  15.     int on = 1;
    + B5 M9 R1 H0 b7 T: q
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)) w; J* c: W1 O5 U+ O
  17.     {
    - M' f; I, \2 z
  18.         printf("setsockopt error\n");
    & D" j2 L% [' O
  19.     }0 E/ T5 Z9 F6 W9 S6 Y+ w
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);0 h; y+ _" x/ L* K* E5 F" A
  21.     if(ret == -1)
    . X; X) Y# K8 Z  t8 ?* Z) a
  22.     {
    ! q, V, l8 J  U# P
  23.             printf("Tcp bind faiLED!\n");
    # e  Q! S5 ]; D9 i& ~+ Y( ^9 b
  24.             return -1;( o/ u# h2 U' _! P' d" @
  25.     }
    ; \& x+ O$ Y8 J# G0 m* d6 ]5 T
  26.     if(listen(*socket_found , 5) == -1)
    ' \4 u4 A6 k. b; |- j
  27.     {  W- r- p# B4 n7 D, X5 A6 g1 s4 a" u
  28.             printf("Listen failed!\n");
    1 m) N2 O# V" w# A- Q  Y2 k
  29.             return -1;0 D5 g; l0 C8 A' U
  30.     }3 E" n6 S( J* X1 `7 r3 o. U
  31.     return 0;
    , e% D: A7 l7 w' z
  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);4 [" Z" q0 @# A) T$ Q
  2. void * Thread_TCP_Web_Recv(void *arg)- Y. U6 w8 K: I  T6 ]6 ^
  3. {2 I2 ?# Z  f' G5 E; S' d0 r
  4. 。。。; B; Q' j: B( H7 _" F5 T! {
  5. while(1)
    2 X) Q3 U5 b& g! V* \
  6. {
    % W3 h) D. U/ d& k, R% E
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);- g- }0 o0 h, |
  8.            printf("fd_socket_conn = accept()\n");) Z3 p3 P2 ]3 k& b( u$ V# {8 X0 u1 b
  9.     。。。# d$ L- C& X+ d" [) r  R$ p1 L
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    $ q9 c9 s+ E0 J$ k
  11. }. \( }# s) U) f) J, _5 J9 v: y
  12. 。。。6 V& N( E( `4 w+ k0 u: o+ ~* ]  n
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);
    * U2 ^1 e9 v* h: F; X/ g
  2.     pic_tmpbuffer = pic.tmpbuffer;
    2 W. X7 s# I8 j$ T
  3.     pic.tmpbytesused = buff.bytesused;% q8 b6 I8 L: d' M5 t) l) i
  4.     pic_tmpbytesused = pic.tmpbytesused;4 J. S% r6 _* B: o/ a! r
  5.     pthread_cond_broadcast(&pct);
    % J! D% c6 S# k" j" Z6 ]  }
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;4 j1 x" o) ^* \4 r+ A8 Y( ?9 G2 Y
  2. pthread_cond_t pct;3 H- c! g& [- x: s
  3. int main(int argc, char* argv[])
    ) Q1 a( _7 M2 g0 R
  4. {% E2 F- f! e8 Y( L) E7 \
  5. ...
    5 b# Q/ I; y6 T; r( a: _) C
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);
    ! d9 o1 `3 E7 H9 y: D
  7. pthread_mutex_init(&pmt , NULL);2 Q3 G" i+ ]: B  J( \
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    : m( t0 W0 {+ a! L
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    0 u8 v# I0 y% t/ ?$ `2 N9 @  h3 D  Q6 q
  10. ...9 e+ @9 a/ Q9 r
  11.     while(1)
    ; P# |* X  R. h( B
  12.     {4 v( n0 M" a7 s' V* k. X: E3 V
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    $ F. P& h2 I; m
  14. ...
    5 R5 s1 @) \4 \4 L
  15.     }/ Q- `- N% f, L/ l) k
  16. ...
    ! R& j$ \4 H% A5 g+ J( B9 S8 y9 i
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    * ~- F& Z5 T  c; ^/ V7 d
  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" \& J0 X) `/ I7 [$ Q
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    4 z. l7 t& i9 ~/ P
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \2 ~' ~: Y5 ]9 ]7 l. Y' B7 l
  4.     "Pragma: no-cache\r\n" \
    * T4 m# b4 H2 ?4 b: }
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"; R+ [" s& @' E4 Q3 |
  6. #define BOUNDARY "boundarydonotcross"- i( A0 t; h' g$ a
  7.     printf("preparing header\n");
    1 j0 D1 Z; D& ?" H
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    ' m) S  q/ J# _9 E' P; I  b
  9.             "Access-Control-Allow-Origin: *\r\n" \
    . s( u1 u% D" g# A- k1 S
  10.             STD_HEADER \! ~$ H6 S2 u9 T! o
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    2 b) r9 t+ Q2 [7 ?
  12.             "\r\n" \9 K  U: J& ?4 a  W" o- m/ U
  13.             "--" BOUNDARY "\r\n");
    0 n- B* |9 R! c; v9 g2 f
  14.     if(write(fd, buffer, strlen(buffer)) < 0)5 @7 h$ J0 I6 M
  15.     {
    ' H! h. J* k" h" C5 [1 m
  16.         free(frame);8 t' x, C2 j' F: p# [3 z/ x
  17.         return;/ j: d" N( E. f3 u
  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" \
    4 M1 G% Y$ v7 v$ {
  2.                 "Content-Length: %d\r\n" \+ \! ~0 ~& A8 O8 R
  3.                 "X-Timestamp: %d.%06d\r\n" \5 r1 c+ b9 ~( m- L
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    ! L2 V0 M8 v2 z* t6 A7 s8 X/ A
  5.         printf("sending intemdiate header\n");- n/ h! {) F* g- O' l6 S0 f* N8 B
  6.         if(write(fd, buffer, strlen(buffer)) < 0)0 N. z& {3 r) o
  7.             break;
      X! i: \5 u, u; _
  8.         printf("sending frame\n");8 C) a, j+ P( ~
  9.         if(write(fd, frame, frame_size) < 0)0 h7 Y5 R4 ?% ^" W" C9 z& q
  10.             break;
    # ]; p/ X" a( {# b( i6 s; ~" e) @2 S1 W
  11.         printf("sending boundary\n");
    - y! Y4 C1 v! z
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");. b" X7 S+ B  z# V7 K, J0 ?% |* M
  13.         if(write(fd, buffer, strlen(buffer)) < 0)$ ]% c( m. c+ {% m. ~: ]9 g- [
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。

% P: ?! j/ |1 n4 K% Z4 I; }

1 \- w) B- s; Z6 F$ L0 [) m6 E
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
5 w* Z1 W7 M, R: {1 ], l0 g- _
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    1 l# c& E. d+ o4 ^9 M7 e+ N4 Z% @5 s
  2. {- ?& u' D' M& \/ ~* L9 Z
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    - @5 `/ }: h! R
  4.     if(*socket_found == (~0))- A! X8 |5 s  j) v0 Y4 s
  5.     {
    & {& ^6 e5 C) F2 R" k
  6.         printf("Create udp send socket failed!\n");
    2 \( b3 S0 q& ]& q
  7.         return -1;
    3 d' p7 j9 q# _% P/ `3 G
  8.     }9 |; P5 Q0 ?2 i8 g9 A
  9.     addr->sin_family = AF_INET;6 i2 I% S. R  r! R
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    9 M$ X  `& H2 n" u6 B
  11.     addr->sin_port = htons(port);
    : M9 A$ b: P1 }, ~8 d) |4 l
  12.     memset(addr->sin_zero, 0, 8);3 r. ~; k: Q8 m: }
  13.     return 0;
    , x2 F; X3 [. H8 d+ G+ `. W
  14. }
复制代码

9 H' a, `+ e0 p1 y+ g* s' r- u4 O7 M2 }, }1 Q4 ~
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:; r5 _6 o( R- T' o

: v9 `, W7 C- z6 Y6 O! M: y1 [& q4 }. P' H+ d) C! n4 d* D
  1. while(fend > 0)
    4 M+ O9 H/ P( }# Y, K7 q% s4 H
  2. {
    2 V& D! w+ e" R: {0 n8 q1 ~
  3. memset(picture.data , 0 , sizeof(picture.data));
    . }  A. @' u; R. k& A: n) i+ V
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    ! _/ R! |: P0 e, W8 ^+ w
  5. if(fend >= UDP_FRAME_LEN)0 c) p' W' }& |
  6. {
    ' a4 J1 U: A% m( _
  7. picture.length = UDP_FRAME_LEN;
    $ j1 U; I) D+ V
  8. picture.fin = 0;
    " A" m+ m# t) t2 l* R1 ~1 A
  9. }
    6 P/ C! J. f8 r1 Q
  10. else$ [9 q, c6 S" K, l& Y
  11. {
    . o* X/ f( r7 A
  12. picture.length = fend;
    0 q* s' G" v5 {% ?8 A/ [6 f% R
  13. picture.fin = 1;
    ' [0 a* N4 s& t8 B
  14. }
    . s  P6 A$ V/ |: w
  15. //printf("sendbytes = %d \n",sendbytes);, r8 @* p( r4 `, W  {7 x
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);; J% u; }4 w9 u; L/ F$ M
  17. if(sendbytes == -1)
    8 Q4 t9 G( ~  J! \6 e& I
  18. {
    . r& I3 D# C6 U. i! {1 \2 |
  19. printf("Send Picture Failed!d\n");" A; w  E4 k5 s/ u6 k; ]5 Q
  20. return -1;
    * _1 c6 i! W8 o: d8 T! Y% y1 o
  21. }, Q( x9 l- |% }/ }* O
  22. else
    ; x% M7 n  Z1 V+ u
  23. {
    + Y7 ]* e5 d! @4 t
  24. fend -= UDP_FRAME_LEN;
    : Y! u8 |6 l. u* a7 q" d
  25. }
    * j2 I, x; [8 M& `, Y* F; P2 B, _2 |
  26. }
复制代码
4 f' Q4 ]$ @) N
+ O0 W1 B+ W4 _0 L! K


, |) t0 }/ J# \- j9 s7 I  A% f; c" b7 r& b' E% d! ~% m
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-4-5 02:33

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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