嵌入式爱好者

查看: 10815|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 , t: J: B/ E/ M/ w+ Z7 z1 O
4 c& _% J3 k2 m8 l( p

: F) m/ I: X+ C  o" j

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
2 |, @1 J6 g# X( T! `. O  t) A+ Q
3 ~2 v2 E8 Q5 @

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

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


. g9 t0 Z  p$ N0 _1 f: x1 W

1 X7 h% `8 Q6 w2 x

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

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

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

    " f  e' m% T* v2 f- e! L

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

. e9 a5 ]6 ~' p5 w
一、HTTP网页服务器
+ ?& `0 s. \9 s7 O' G( @5 v6 Q3 W

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    * s6 W  f6 u# ~) J+ g
  2. {. _- q0 `7 x% ~( u2 [  E
  3.     struct sockaddr_in servaddr;
      H' [3 i% \8 |: d6 p# H
  4.     socklen_t addrsize = sizeof(struct sockaddr);  b1 r5 E  {  ^1 A- p  R
  5.     bzero(&servaddr , sizeof(servaddr));
    ) e, {* K  ^! ^- w
  6.     servaddr.sin_family = AF_INET;
    5 b5 F2 ]" A; A6 y" }! d
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);4 L) o( R8 P" C' E8 q9 A4 ^
  8.     servaddr.sin_port = htons(port);
    & e/ X4 r& g; T5 l5 q; k7 m) D% [, ~
  9.     int ret;
    & l/ I" V% Y! o) O6 p4 M
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)0 E& {. ?. @7 e. T
  11.         {
    ! S# y% Z; t6 r% ^6 ^
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    9 S: S! ?+ Q0 ?8 m
  13.             return -1;4 T% T* ~+ E  K
  14.         }
    4 }* g0 E' C! z' Q, J7 }
  15.     int on = 1;
    % _" J! }# F. G
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
      t* W4 L% B' j" W, F/ G
  17.     {
    : n* K9 p% @' }3 m
  18.         printf("setsockopt error\n");
    2 v+ ^% w0 x0 Q/ K) p( v, V/ Z# {9 [4 J
  19.     }
    6 N  a1 K! @) N4 v6 ]2 a5 R, L
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    # S) x/ h: K! L9 Z8 R2 l
  21.     if(ret == -1)+ N1 {) p) a) E1 h( g1 v( q
  22.     {( Z9 g3 r, y6 ^+ H. ]2 Z, [+ ^
  23.             printf("Tcp bind faiLED!\n");6 ?+ X5 V( M$ c5 a8 K/ m
  24.             return -1;7 C6 c) c. [* e
  25.     }1 X( c# M' m( N/ L, `
  26.     if(listen(*socket_found , 5) == -1)
    4 r$ v/ I- e; y# x0 A) X
  27.     {
    ; @0 i0 m# m1 B! B7 m) z2 s: g
  28.             printf("Listen failed!\n");. b1 z: k+ M5 U
  29.             return -1;
    : S; v3 D4 O2 D5 r0 d# W
  30.     }
    & h3 B8 z3 y0 X3 F
  31.     return 0;+ ?) @4 X8 ]/ E( g* u. S
  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);
    8 |/ B& r0 k  i; M/ a* N; a  g5 x0 A
  2. void * Thread_TCP_Web_Recv(void *arg)
    : p0 V6 s( G  {$ l
  3. {& z0 A7 z0 {4 i4 c' b7 X. |
  4. 。。。
    ' g" y; z3 [: k9 ?& G+ F4 q2 K
  5. while(1)
    6 v/ E, D  r/ g8 |0 c' P% Y
  6. {% o2 {' T1 W9 j( S
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    9 g7 u; [) a) a3 |
  8.            printf("fd_socket_conn = accept()\n");
      r0 i, |! r, @6 C! ]1 B
  9.     。。。$ @  D4 R8 F7 V: F
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    ! y' R- B! |0 k8 `4 e! d
  11. }
    - E4 H- k; E* U. H
  12. 。。。) E) z  F! _3 y( r; R% n
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);" C  v$ i* a. d1 u8 C
  2.     pic_tmpbuffer = pic.tmpbuffer;  m8 c+ Z* i7 M+ q3 D6 g$ [
  3.     pic.tmpbytesused = buff.bytesused;
    5 S! a8 h5 t6 L# }1 W8 G
  4.     pic_tmpbytesused = pic.tmpbytesused;
    6 z" u7 W9 ~/ \) @1 s
  5.     pthread_cond_broadcast(&pct);
    0 ~6 {1 p) d: a  `6 Z. ~, d
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    ) L: X* U3 m% G4 k' v8 y
  2. pthread_cond_t pct;
    3 H8 E& j/ G) L5 {: w
  3. int main(int argc, char* argv[])
    5 {+ D1 W7 ~* _9 ?
  4. {) L% S, y+ S- q0 B* {
  5. .../ _' K# c$ ]. R6 m- l
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);6 @) b- j+ B, J; S4 M2 n% U+ c
  7. pthread_mutex_init(&pmt , NULL);! ~/ N8 M5 }5 t# x' C
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);- X  m' J, D2 u
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    0 r% H# T0 |- t2 b8 U# S) a
  10. ..." x$ E4 {6 d8 a8 v3 X  f/ v! a2 L
  11.     while(1)8 K6 [, p. S3 ~- g3 d
  12.     {- k5 R$ V6 b5 h: @" I, r9 X
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);0 }4 C4 w# Z' G$ I# G
  14. ...+ `9 G9 c( d0 G" |, Z0 o; h; f; I
  15.     }
    : M( S9 m. R, P: ]$ C- ]
  16. ...
    2 O  |2 J; W: W( \; i1 ~
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    ; J+ ~2 M, s1 G) {+ h3 g7 y
  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" \
    % h. `1 y4 Z  @
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    7 ?/ G0 z, i, s0 q0 \4 D8 b
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \( V  H; M# h* w" }' z
  4.     "Pragma: no-cache\r\n" \- _1 s" {0 k  t1 V
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    # h' B* t. Q! `2 K& i3 r7 n
  6. #define BOUNDARY "boundarydonotcross"
    2 h7 P6 D# {5 B  v, K
  7.     printf("preparing header\n");
    4 _, F  r) M# g: {: O% ^9 S& Z
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \: N& W% T3 c4 G" N" U7 P; `; Y
  9.             "Access-Control-Allow-Origin: *\r\n" \
    , i" y7 n9 T1 S7 g
  10.             STD_HEADER \. W2 d) S& h; u' v1 B6 s
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    / j5 @, q) K" I
  12.             "\r\n" \
    # ?' x6 i# X/ z& E. X" M* j
  13.             "--" BOUNDARY "\r\n");
    # h1 _. }+ d" }7 H
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    " u5 b. s# }. G& Z9 J) ^
  15.     {. r4 U& j( d, ~' _
  16.         free(frame);& A: W- e- r: e3 E) f
  17.         return;6 `0 `: V) |3 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" \: U* `/ t5 m* b# l: z, h
  2.                 "Content-Length: %d\r\n" \3 v  @/ Z, b8 A& T
  3.                 "X-Timestamp: %d.%06d\r\n" \2 _" C1 o0 n) G% M& C
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    9 j+ T- c+ H  E# P8 A
  5.         printf("sending intemdiate header\n");% X/ R9 w/ n4 D5 Y. j. r1 {5 Q
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    7 D9 M1 e4 G( \4 B( I9 a
  7.             break;( _7 ?! q6 M% a8 B
  8.         printf("sending frame\n");( j; E' @6 Q8 K8 \" H  {! }
  9.         if(write(fd, frame, frame_size) < 0)
    - _" T8 v3 r! g4 ~. R* v
  10.             break;
    2 ^- j3 O: v$ W5 d5 P. R! M* |  V
  11.         printf("sending boundary\n");
    9 x" d, d0 [) t0 _9 f
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    5 k7 h, a9 X2 [7 ~* d" p7 _+ |
  13.         if(write(fd, buffer, strlen(buffer)) < 0)/ e- w  ?& p& c5 k
  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% d6 `  c8 z6 e8 {  u9 R


! V, W' l8 |" K' @) H3 Q二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
  h3 D$ i' c0 ^2 A* |9 o
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)0 l! s# _# \$ ~
  2. {9 M# Z; ?3 h; q- d/ J" L
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    8 ^( e! X, ?7 I
  4.     if(*socket_found == (~0)). Q% c0 ?7 t$ o3 U& I" A( n
  5.     {  v" {7 M& U4 T2 h0 Q
  6.         printf("Create udp send socket failed!\n");" ^6 F  b; t# E  U+ Z$ Z- O
  7.         return -1;
    ( ^; j% n- a# q
  8.     }
    8 ?6 y7 O9 ~& K4 a
  9.     addr->sin_family = AF_INET;
    - g8 e/ n) c% |. m$ a0 K$ F
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    * h4 ?5 H" f# j7 Y8 M& {
  11.     addr->sin_port = htons(port);/ n6 ]5 t+ j# q+ A3 G! E7 ^4 \
  12.     memset(addr->sin_zero, 0, 8);8 c4 W5 T9 n; l! D: T) _# {
  13.     return 0;7 R9 p2 x1 {# Z6 Z' L8 ?" d2 F
  14. }
复制代码

( ~) Q2 S+ ]9 F/ s
0 E* r+ _1 o; t' \8 B& w0 s7 z而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
# f! }8 r1 U: h7 I8 L
  k! X) y, {( h8 Y0 L+ P" m, [) }7 u, [
  1. while(fend > 0)
    3 s6 E, R4 P1 m- l9 y6 W, g
  2. {! t' h+ N) g* ^9 K# M* r
  3. memset(picture.data , 0 , sizeof(picture.data));
    8 a* Q' U  K/ c/ L$ u5 i9 H
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);. x  @) j. z4 c! @. t3 ]* T
  5. if(fend >= UDP_FRAME_LEN)
    # H" L/ ~# I+ O" }' `5 s" Q2 R
  6. {! `( T$ |- g' U5 }8 z
  7. picture.length = UDP_FRAME_LEN;  t4 W- P  l9 R! c5 z0 o6 B
  8. picture.fin = 0;" {. Q7 G" Y+ B* F# S% t# l
  9. }$ X- z7 k  d7 D/ ~
  10. else$ f' u- }+ a1 x0 d6 N
  11. {+ h& U9 W$ L  B- J  r1 s
  12. picture.length = fend;
    - p1 ]/ z: g& w+ r
  13. picture.fin = 1;
    1 I+ y" R! F" c) {1 {
  14. }2 C2 h7 i) L7 k- c7 P* _
  15. //printf("sendbytes = %d \n",sendbytes);
    1 f* I  {) {& b# X  ^( z. }6 P
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    + |% w# z1 h& P
  17. if(sendbytes == -1)- _- j* w3 r# }% M
  18. {+ P# a" [  k/ O2 l8 G5 f* Y& v
  19. printf("Send Picture Failed!d\n");! C6 P9 |4 i  R. j  n6 A
  20. return -1;3 G1 p4 D$ l% R& C5 P! t
  21. }; H8 M3 Z' }# a+ p+ e7 h/ a; v3 k6 {
  22. else
    & f3 |  ~) V7 R$ |# H! W  b1 a* W
  23. {; `0 A3 |# ~) B: ^* f. p
  24. fend -= UDP_FRAME_LEN;4 K4 C3 e& S: W5 t
  25. }
    " {6 {) C9 w/ [" o* j( [0 i$ W
  26. }
复制代码

* s# _& s  |) d4 Z9 w. _+ v. z9 L8 K4 Q$ T" H; y3 ?/ P

0 t' l7 o1 J1 H+ Z
5 k; x9 m0 J& o" z
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-1-18 05:59

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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