嵌入式爱好者

查看: 10319|回复: 1

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

[复制链接]

46

主题

53

帖子

296

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑
, i; w9 f; M; N6 A; t3 C9 j, Q. a5 n2 K: [' F+ n


5 A2 f& m. i/ ?- R% K$ v

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html! e' E1 Q( c" U  n5 [+ [; k3 \
: E, }& n1 H6 q1 C8 W0 M+ C

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

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

* w4 g' f' W1 Q) _+ I


5 E9 T# b, K$ a. ]2 C

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

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

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

    3 r4 J+ H9 I. D/ k+ \; Q6 g1 u

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


' m# m& L# v5 R8 [( Z5 [/ |一、HTTP网页服务器
* Z" e% `1 k# [# T$ p

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    + {! ]& m9 ~* w/ B# a
  2. {0 E3 S3 o5 A8 I0 R. f! A
  3.     struct sockaddr_in servaddr;9 A" W* V3 H9 c5 K; {  [
  4.     socklen_t addrsize = sizeof(struct sockaddr);
      B. q: D0 t' ?6 Z
  5.     bzero(&servaddr , sizeof(servaddr));
    " S/ I# L4 W# z3 s6 J1 _; X
  6.     servaddr.sin_family = AF_INET;
    + P( G+ s* S* U5 c  s! {" d
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
      r4 [9 |. H$ M; g' }7 r
  8.     servaddr.sin_port = htons(port);4 u* f: y( R2 n2 O6 M
  9.     int ret;
    ' j0 U9 A  m  j, B3 i  w& k, Z
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    & V1 ^1 _% P1 |: Q; g- ^
  11.         {
    + c6 J2 U% u/ E( M# b& c- v5 r
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    ) j( Q- a* f# ^& \
  13.             return -1;
    / M3 m1 C' T: c  {
  14.         }  s4 h. y/ d- a6 \9 {/ f7 K: D
  15.     int on = 1;2 t5 I+ c( {0 w! k# N
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)! j! L# c5 K) T% [  @
  17.     {) N! A2 w7 q$ {
  18.         printf("setsockopt error\n");  }$ D% @2 Z* K( }) Z# c
  19.     }' D! m9 \! ]) K! y
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
      V& b4 w" }# m# E( r8 y! x
  21.     if(ret == -1)9 C( `8 a2 ^2 l. L7 h* r, G
  22.     {. J! g0 ~, X; M0 C3 H% z
  23.             printf("Tcp bind faiLED!\n");: t7 k# g5 E: _% `) J5 I8 r, b+ @" k
  24.             return -1;
    # s: Q1 O* `3 j' {- X! Q
  25.     }$ |7 [+ B2 l- ]8 t+ r7 y
  26.     if(listen(*socket_found , 5) == -1)
    ' }% I0 d0 y4 H: m" ?( z
  27.     {( t, O5 O2 ]+ L7 P
  28.             printf("Listen failed!\n");" ~, b$ D0 E- C% W/ S$ K6 d% M$ [
  29.             return -1;2 E# i$ z/ N3 Q  N4 F) }
  30.     }$ d! d% C+ A; c4 U6 k, M; O2 o
  31.     return 0;. R: j2 ~& c2 ]
  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);( _5 E. y+ ]$ `7 [8 e, p: \
  2. void * Thread_TCP_Web_Recv(void *arg)' Y0 [# N5 ~3 x" s8 \) C
  3. {! P: f4 w- y6 l
  4. 。。。8 D% |3 [: E9 [2 Z( ?
  5. while(1). T( C0 s, ?6 F: ^+ j
  6. {. `( F( I0 z6 k: L( F
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);3 ^" M( x! I% \' v
  8.            printf("fd_socket_conn = accept()\n");
    / Z0 c4 l" A% _5 W' K
  9.     。。。  X) r0 H# `3 H% W
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);+ Y, i' ~0 N3 k
  11. }
    4 a7 K$ _( h4 w* L
  12. 。。。, B7 }  y7 q3 t( k" c# B7 V' s
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);
    + t5 w- ?' |/ W7 T4 f# H$ j) J$ l
  2.     pic_tmpbuffer = pic.tmpbuffer;
    5 Y6 k4 M) M6 d0 E& E' u
  3.     pic.tmpbytesused = buff.bytesused;
    $ T" t; ~2 g: b4 [# B
  4.     pic_tmpbytesused = pic.tmpbytesused;
    0 b2 U8 N. A4 Y: ]. E- C& X: U- d
  5.     pthread_cond_broadcast(&pct);
    ) [: ^' W# q7 g0 Z; D, u8 U6 \6 r
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;3 N9 x' S. @. M6 H
  2. pthread_cond_t pct;
    + M& p0 \& y% {; _
  3. int main(int argc, char* argv[])2 ^1 X* y) i0 G+ K( R
  4. {' F* q* d' K, B/ \! ^# v: u. D
  5. ...% |3 p) n/ m& b( b) E3 C
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);0 ^) o( B4 s  F9 y( j
  7. pthread_mutex_init(&pmt , NULL);
      C1 q( y* `* h
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);- `$ a8 }% B8 B7 u) `
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);" p* c3 C/ P, ]; d3 J/ H' w7 N
  10. ...4 a) p9 t1 n, N% j
  11.     while(1)$ X& E* b) H- J: c  G8 P& c5 O
  12.     {
    ) Y# e, ?: e7 c' e( }" R
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    * Z9 e0 F1 K1 D" t7 B5 ^
  14. .../ V0 M- z' d" ~0 F
  15.     }
    7 Z% ?- v0 k7 O" A, g6 n6 C
  16. ...* K- h( V" R2 E
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">7 |2 D( \: ]& 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" \
    7 F9 d% K/ T  z4 C6 |- J$ _
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    1 y. B7 C# Y' A5 K) j6 V4 B* V
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    & H" w! S: L; e3 @3 `- K
  4.     "Pragma: no-cache\r\n" \$ |( E, i2 u% I4 E" M
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
      c- f- ~1 O, n. d2 l, E
  6. #define BOUNDARY "boundarydonotcross"
    4 b+ E* P' W0 g3 {$ g3 X! k1 y
  7.     printf("preparing header\n");
    ; B- e+ C; D5 s. J
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    & v6 a2 ~) ~# E) @8 }5 b4 A
  9.             "Access-Control-Allow-Origin: *\r\n" \
    9 Q, }  f5 c% n; B; N6 L
  10.             STD_HEADER \
    % O2 C3 ]9 T9 K6 }7 ]/ T6 e9 ?/ X
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    2 ]( C3 O* t( C
  12.             "\r\n" \
    / Q8 F( K* D2 ?. Y5 |$ C% n
  13.             "--" BOUNDARY "\r\n");
    - P% y$ w, z+ J% J  L/ \+ H$ d
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    . T  _3 F+ }2 ^/ s( ?) g! i
  15.     {
    6 L, p+ e% A, Y. t/ K2 r
  16.         free(frame);5 [5 i7 @1 N/ G3 O) Z
  17.         return;
    1 X% W" A' f/ `1 P! @
  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" \( A8 Y( J& ~% _# |$ t
  2.                 "Content-Length: %d\r\n" \
    % E' R' T$ ?( K
  3.                 "X-Timestamp: %d.%06d\r\n" \8 v7 C. F* J6 B6 ?) }7 g' r/ N; C6 m! ^
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);# j3 v1 o% A. [0 a8 V' a
  5.         printf("sending intemdiate header\n");9 S) F5 ?) p" q+ r- g3 _
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    ) M8 R9 k4 j$ O. \4 k
  7.             break;
    * s( D! m. p$ h3 ?8 g. Z
  8.         printf("sending frame\n");
    # H( ^8 r- w4 }1 m
  9.         if(write(fd, frame, frame_size) < 0)+ ?! t( e/ K2 ^0 ^) O9 Q
  10.             break;
    " N# A. l6 @' `; J4 ?4 |  r
  11.         printf("sending boundary\n");  O) n5 r2 ]3 h; v0 U3 p
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    ; T1 G) S' K  O% ^! L3 ^
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    $ O2 z5 Z" E% |4 Z. j
  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 z0 V& k( D; M6 M& g5 ]

/ z( G5 K3 j( L
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:: S2 ^0 `4 m# r* f
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    % f% p. S( y  o7 t  _+ |& `; V
  2. {
    ; ~9 r; d, o" G# F( x3 _
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);, J  I. q. L' P5 O  H
  4.     if(*socket_found == (~0))
    " F& [0 \* h* q) P
  5.     {
    + T" F% d' v  f% [% Q* b( s) y" s, a: V
  6.         printf("Create udp send socket failed!\n");+ Q  x. s5 U( L( W8 Y
  7.         return -1;9 q5 I0 Y" H+ _: e5 |* T3 H) K
  8.     }6 @0 b% p+ \7 K8 R- |6 Z
  9.     addr->sin_family = AF_INET;
    4 K8 M# L+ w5 e6 n0 t
  10.     addr->sin_addr.s_addr = inet_addr(ip);7 c" [7 k. H2 t" v$ j* z- i3 {
  11.     addr->sin_port = htons(port);
    2 O( d7 e" e! t2 k) r% ]+ a' \- n
  12.     memset(addr->sin_zero, 0, 8);
    $ t: d; h5 T' G; Q8 O# ?
  13.     return 0;- o; |' x: I9 e, o6 m# c& ~; e. A$ q
  14. }
复制代码
5 m  h5 f. M4 S% O  X
5 z/ l# ^9 F& h: ?
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:3 P- `1 v1 z& Y% e; F
( \3 C" j+ p4 w4 m3 R3 L

( h: a! s8 t2 W% L
  1. while(fend > 0)
    ( N: K9 P# B) l' f# ~
  2. {7 P, _' z5 j: d6 u' G, C. e1 p8 Q' s
  3. memset(picture.data , 0 , sizeof(picture.data));/ [( Y" P* S# P" p4 M
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);3 |% I$ X% \$ s1 F: |2 O
  5. if(fend >= UDP_FRAME_LEN)3 h( T5 O6 M' l" M
  6. {
    1 n% P* `3 ]9 S* k, `4 c
  7. picture.length = UDP_FRAME_LEN;4 v/ P& P' r8 v
  8. picture.fin = 0;$ ]! R) i  w5 k3 Q
  9. }
    6 Z# i7 v: K2 j/ Y0 M( f1 {; E$ A
  10. else0 f" _8 o" ]- c
  11. {2 g) a' v) r' w6 `( q8 ?
  12. picture.length = fend;8 i6 B9 B7 o4 K3 b+ q, \4 z
  13. picture.fin = 1;
    % z8 f- ~9 t9 v* g
  14. }0 N- b6 y- M7 N$ r" ?% x$ I
  15. //printf("sendbytes = %d \n",sendbytes);
      Q- y3 ?& z1 Q7 S9 [
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    " S! U9 U! V4 ]
  17. if(sendbytes == -1)
    ! }8 k' e9 p' C, A, w9 v
  18. {
    3 c4 A/ g2 X9 P9 @0 N9 e' c: Z
  19. printf("Send Picture Failed!d\n");. D+ t# m  [3 H; G& ?
  20. return -1;
    - c7 b) k. D5 E6 X
  21. }. ^8 p- W. e* w6 e' x' g" h
  22. else2 g4 _* L9 g$ X/ N! W( U2 u
  23. {
    , d$ G! V# k6 h% t0 E$ ~: S
  24. fend -= UDP_FRAME_LEN;
    ( B8 K' W1 p6 _6 Q. c
  25. }4 A3 p9 t6 `6 @7 Z9 N) b& C. T
  26. }
复制代码
1 ]. l+ _3 |7 _, F- [( j

* R/ Q, C6 e9 b4 Q3 O


- E: E2 }8 {: R8 E; B9 [5 d
6 T- ]  d) `' q9 S' O' p" RiMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-12-1 07:51

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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