嵌入式爱好者

查看: 11619|回复: 1

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

[复制链接]

48

主题

55

帖子

304

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑
( a6 G4 w* L+ A
. i$ j) \# w2 q) B2 L; B" c

$ q" k5 H! H0 f: t3 u4 V8 v( D

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html& f/ s8 g, P- f" X4 M5 t0 f

$ S. g5 B- N% [  T( Z

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

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

" R- h* M, L& P& W

  z# s! D* L) w

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

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

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


    " Y# ]) @, j: T* I+ @8 }

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

5 S; l# w" J+ }. d. i$ Y8 c9 ~
一、HTTP网页服务器
* L. l$ U+ G) N: K2 Z3 P2 t  R; I

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    , ^, _& _8 Z" k+ _/ f3 O. \
  2. {
    . g3 ^- V2 l  V2 @: P( F' c
  3.     struct sockaddr_in servaddr;; X# @; f2 k, n3 j" |& v
  4.     socklen_t addrsize = sizeof(struct sockaddr);5 Q: V' I9 @6 Z% `$ v4 v  d2 m
  5.     bzero(&servaddr , sizeof(servaddr));: `1 @& w' U! n. ]4 M3 M4 x
  6.     servaddr.sin_family = AF_INET;* K4 Y2 F7 b( i$ I' _; t' Y
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);* A4 K; d  A5 ?1 J2 |0 N% A: K3 O
  8.     servaddr.sin_port = htons(port);
    ; Z# C/ }9 [2 k- j
  9.     int ret;
    " Y) D, R1 J# J4 g8 n- b- l
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)4 R( Z7 A/ l2 Z4 E
  11.         {7 m5 h. }% V4 ?
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    $ r( K/ A# Z+ J4 |
  13.             return -1;+ f2 a9 [- r+ W8 D: m$ v/ D
  14.         }3 s, W, m1 I& v( \8 c9 p
  15.     int on = 1;
    ! T5 C( Q) s. @1 [4 S
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
    5 T, [* Y* }; M7 p! |  O+ `( U) E
  17.     {' T3 P; ?4 v9 }. t
  18.         printf("setsockopt error\n");
    : V0 L9 H' V1 Y
  19.     }/ X* I& @6 h# `# |( I6 M$ Q! r
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    # F4 E: j# n; g8 Q
  21.     if(ret == -1)
    / W; w" Y6 ]. _! u+ a- H( T" W  K
  22.     {
    - Q) N2 v2 E! m5 }7 a3 Z
  23.             printf("Tcp bind faiLED!\n");
    ' e0 l) \* T: O, y6 y  N
  24.             return -1;/ B. c! _  A+ p4 q
  25.     }
    ) H4 Z( I8 b. ?0 A
  26.     if(listen(*socket_found , 5) == -1)
    : t  e5 d# L) h/ _9 C: o" g& Q
  27.     {
    3 @7 A) ?0 Y: E1 e" d5 q
  28.             printf("Listen failed!\n");* r. J1 W5 g* W6 |3 Y; [7 h
  29.             return -1;
    & ^* ?" H. R/ h9 q
  30.     }: M+ k9 e* E+ A7 P4 W
  31.     return 0;5 y8 S" V- d. o! C2 r6 |# j
  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 Y1 _& }+ F% e8 V9 R/ _/ h' E
  2. void * Thread_TCP_Web_Recv(void *arg)( U% `; J8 U  j
  3. {- Y+ y. \; U/ w, `$ e7 b1 U% ^
  4. 。。。
    - T1 X! g4 s% u' d% V0 G
  5. while(1)
    7 H# Q% C- P+ B1 K9 S( o
  6. {, P2 ?" E( i* i% q4 u0 G
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);) @; Q. C! x0 W! _  T' N2 B
  8.            printf("fd_socket_conn = accept()\n");
    * U8 v, U) @+ W4 b& m% b+ j& _3 q
  9.     。。。
    1 @/ N2 M1 Y. u9 U
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);- A% k: J. I+ ?% G
  11. }
    ) D' v0 ?; _1 M& W2 t
  12. 。。。; M, X/ N. u# Z: q: u# P
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);) l: j$ v8 D. \  O1 }; P
  2.     pic_tmpbuffer = pic.tmpbuffer;; t/ F4 O' C. u3 f9 ~
  3.     pic.tmpbytesused = buff.bytesused;
    7 O) V- t* L9 q
  4.     pic_tmpbytesused = pic.tmpbytesused;9 M- i( e. F+ H) w
  5.     pthread_cond_broadcast(&pct);
    ) }6 D; h' c$ m4 L' E. p
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    & w4 _( ~5 N, p3 y1 F! l: C
  2. pthread_cond_t pct;0 U: m0 l) S" j& `' w
  3. int main(int argc, char* argv[])+ E1 J( o/ {1 G* q/ a0 x
  4. {: F+ ~9 [0 I% r( G5 ^* _
  5. ...
    : a# v' e* d# j) K
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);: y& k9 V0 d$ z# |4 }
  7. pthread_mutex_init(&pmt , NULL);3 \- t) b/ H* t, x% E" E- b. R$ F
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);" I4 X; c! R3 b& L( V6 e) H
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    + ]( @1 T8 y; I/ F. @2 Q
  10. ...; \3 c# K+ A3 r: Y7 M9 _
  11.     while(1)
    3 n* G" J* \6 P$ b0 r. Y/ o% F; x
  12.     {
    7 F3 e4 A7 w6 ]2 z1 W
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);8 Z8 h/ V, o" y& z1 t8 w
  14. ...
    7 e9 R5 H/ R. z0 r- |5 u7 a) H
  15.     }9 u/ [  `' h/ F1 ]2 A) G* e
  16. ...! [4 R: j% q5 w7 @7 E' C+ O
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">- e" O6 j2 d/ j* R9 I5 t
  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" \; W) L2 s5 \# ]6 a7 Y& I; ?' O0 x
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    * x+ i% @7 @) `# z* A7 E' E
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    8 U; j6 i) j7 r) n7 I) w- t
  4.     "Pragma: no-cache\r\n" \
    6 P7 ]1 U) i" P4 _
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"& U: ~' L% p+ B3 _3 w9 I, J
  6. #define BOUNDARY "boundarydonotcross"1 k6 E/ e1 w: C8 x
  7.     printf("preparing header\n");: C+ R  ^+ ~$ b5 k8 v% ?5 c+ x, m
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \) G8 a6 W7 S2 {  X- ?) ^
  9.             "Access-Control-Allow-Origin: *\r\n" \
    - E4 \: @, V- Y' d2 r
  10.             STD_HEADER \' D# h) Q) ]/ s+ @7 d
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \8 O) h, u& d$ `/ W, Y- d
  12.             "\r\n" \
    4 q4 o$ i/ v6 d5 Z
  13.             "--" BOUNDARY "\r\n");
    * ~: U7 X- C# _& s  }8 J  D- Z0 ^
  14.     if(write(fd, buffer, strlen(buffer)) < 0)" x" n% I' b/ V. N; R
  15.     {  }4 ]% t( p1 E0 Z# m- B
  16.         free(frame);
    3 e% x# Z& |: n% q6 G' ]
  17.         return;
    6 D  ~2 S( M- s1 `1 }% g
  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" \8 A/ i' z. L" K6 e9 H9 M
  2.                 "Content-Length: %d\r\n" \6 B* [4 b7 P& q" J9 `3 y& O
  3.                 "X-Timestamp: %d.%06d\r\n" \
    % @3 z: [- `: C% p9 r  u
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    ( P: [& [2 E1 A. D
  5.         printf("sending intemdiate header\n");
    ' E0 w7 b/ d4 p7 ?, ^. T
  6.         if(write(fd, buffer, strlen(buffer)) < 0)# x& B. `$ L& s  u+ J' W
  7.             break;: O) E: n! U% P" q6 J0 W
  8.         printf("sending frame\n");
    9 N. B! ^& @# h. u
  9.         if(write(fd, frame, frame_size) < 0)
    . U# B6 c! M* C# S
  10.             break;! Z% A( A' v+ M* k/ D2 m
  11.         printf("sending boundary\n");
    , a! i; M: J; M8 ?/ L
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");7 D9 {$ R' v/ N& {6 n$ _; G
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    " j! L, ]- k5 e: ]( S5 m
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。

* d: }& ~' k/ F6 l

' b) Z8 {- W; H( f( b2 W5 _- @2 C- x
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
! O) {/ i  h1 U
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    4 L1 {$ }; B, X! N+ t1 A
  2. {
    4 A0 c. B; ^" x8 U1 q
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);* @# n6 G% K' Y! u5 n# Z: W: q
  4.     if(*socket_found == (~0)), ~  `2 B7 r) D6 r% n  f5 t4 J; Q
  5.     {
    & f8 l( `0 L, L- E
  6.         printf("Create udp send socket failed!\n");% Q+ a7 \8 @1 a$ W
  7.         return -1;
    9 P/ ~/ c: Y. `* j% C' J
  8.     }7 |, V$ F7 x- J5 q
  9.     addr->sin_family = AF_INET;
    1 a" V: a! @; ?& R
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    $ x! U$ j* H) }* q1 k0 H
  11.     addr->sin_port = htons(port);' F$ N% c' r2 I5 J4 }% t
  12.     memset(addr->sin_zero, 0, 8);
      E  A, N4 ]' q+ _4 G4 s( Q  [
  13.     return 0;" a8 O, W/ y7 ]$ E! q9 H2 [
  14. }
复制代码

! `2 B$ f3 i4 e$ C1 A/ e- I+ n' x6 H! L
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
, S: ^/ g) g3 i' i, P+ G: x& }5 Z' f+ S+ Y: A9 c3 U8 {

3 D$ a4 M# Y! n* I- W
  1. while(fend > 0)
    1 F* i# g" J* g6 m3 F
  2. {% z3 H+ T: G1 l, C  C
  3. memset(picture.data , 0 , sizeof(picture.data));/ b8 ?0 p% @7 a+ L
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);) P. ^# ?. s9 L
  5. if(fend >= UDP_FRAME_LEN)
    # C2 j) U4 b: H9 X2 ^% }! E
  6. {& T0 F7 k9 v1 y  x" F8 C; E
  7. picture.length = UDP_FRAME_LEN;
    8 Y3 W7 d0 ~, j. s" N% K
  8. picture.fin = 0;
      j, V( o7 Q8 i% F
  9. }
    - }7 u8 K4 p, a( q4 ?" s; k& _
  10. else7 o% F* m- \% u& d/ ?4 ~
  11. {
    3 f2 ?2 s) W! B" w+ e0 p
  12. picture.length = fend;) K0 N$ H1 q0 z/ _2 N2 f( x' Y
  13. picture.fin = 1;3 L+ y  h! ?. `
  14. }. K8 g+ x8 K  y' J& Q* s+ D
  15. //printf("sendbytes = %d \n",sendbytes);
    8 L% P# v4 u  ^; c) W
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);/ S3 x2 n" x1 C
  17. if(sendbytes == -1)- \- a* F; _4 }- h, ^( q
  18. {
    + z% b) A; R( x; Y, k7 }
  19. printf("Send Picture Failed!d\n");6 U( J1 I0 j- X8 C( g- q+ g
  20. return -1;
    ! ~1 O; a( M* I7 l. n% J
  21. }
    3 f/ D4 m  V/ s/ k
  22. else
    6 u( s( M0 H6 j% M2 V( m/ Q
  23. {
    ( x0 x& q) I/ y; ^
  24. fend -= UDP_FRAME_LEN;9 F9 O3 J; ~7 a9 f+ ~* Y3 M% M! ^
  25. }2 t3 C% m. y4 I+ X9 _( r5 m
  26. }
复制代码

, O2 g, a% d3 G) L) t3 D
5 M' O( a" S7 N3 `' R% d

8 D8 R# b# `( w' n% D
; @9 C- \/ P' |% G. H
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-4-2 09:59

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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