嵌入式爱好者

查看: 11032|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 - \8 B" K7 D/ M3 i( u( a
; ]% r# b7 `* b  I+ V2 I4 D9 L


9 ~0 w' P# C; r4 i9 Q" o

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html, W4 Z0 s1 [3 O* R

+ p8 p0 f& q7 b+ e$ C

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

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


- t1 U- O' T( }6 O

& g1 N1 O- L: ~+ ~- q, t7 A2 e' @  k

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

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

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


    " j- K" H1 j- F& G0 ~! S

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

+ s( h5 W/ y0 b
一、HTTP网页服务器
7 W# Z0 W$ P' M6 B' N

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)# }7 j( {1 r, [. u7 J4 N
  2. {& z! _, H$ b: S+ q7 f* L, I
  3.     struct sockaddr_in servaddr;( a8 a, A5 ?( o1 e" d
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    4 r8 C1 G! {- Z: q
  5.     bzero(&servaddr , sizeof(servaddr));
    8 a8 S! T" D" {* x! @: _; q+ X" f
  6.     servaddr.sin_family = AF_INET;
    ! U. x2 q, y6 j; N% x
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    ( n) |, H& H1 q; R* g# ^9 u' p1 P: h
  8.     servaddr.sin_port = htons(port);
    $ @8 `: y- w1 Q; P
  9.     int ret;
    : @3 L# q" ~6 A
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)' ]( ?2 K& z; ]9 `. F- H
  11.         {
    $ Y4 `' |+ d: C/ C# z1 }: x
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    ! h% z; Q  Q3 |- A/ x
  13.             return -1;
    " {7 Q  _0 i5 T! r' S' X
  14.         }/ E, J$ A8 g0 j3 |
  15.     int on = 1;* B: s5 R9 K( e" V7 u, B! n8 H
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
    6 A) x; |. H, x" n7 \
  17.     {
    $ ?/ J' |+ C% B) D9 x( o/ Z
  18.         printf("setsockopt error\n");9 X: ]8 ?1 f( L6 \
  19.     }! D8 C2 Y& {( K3 U/ [. o, Q* W7 [, m
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);! @6 g& Q' ?6 S  d; I
  21.     if(ret == -1)8 c( O* ]5 x+ ^
  22.     {
    1 o6 k, C& I) j% [/ ?
  23.             printf("Tcp bind faiLED!\n");
    % D. N; J' P2 {- g, T, K" L
  24.             return -1;
    . y& K9 y  Y  H5 @% J# A1 ~4 }: U7 s
  25.     }
    ) g, G. Q4 e) _# d5 A/ t; x
  26.     if(listen(*socket_found , 5) == -1)
    4 ^) r1 B8 T# b7 N; `
  27.     {% v0 z* J- X% A
  28.             printf("Listen failed!\n");- x. E* P, k) b" \+ U. ?
  29.             return -1;( N; {$ a& Z& s
  30.     }
    - h4 j& M0 E- K& ~( ?$ X
  31.     return 0;' d* S/ ]3 w: w' F9 f
  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);# I" j  P" j( Q
  2. void * Thread_TCP_Web_Recv(void *arg)6 P+ w) N2 G% p' o: k1 [+ o6 ?9 M
  3. {% X4 W0 j; |' e, k) b! |
  4. 。。。
    5 w& n- O+ ]% k2 i+ h7 [" O6 l
  5. while(1)
    : a) p, U/ d3 P' D0 N7 d
  6. {
    1 a6 T' }: r' ?: @
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    ) S* F5 u6 q6 V& }% r  S
  8.            printf("fd_socket_conn = accept()\n");" b3 n# c+ h  W7 W# a% N0 k( w& g
  9.     。。。. v, c7 p3 }9 J3 ?
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);& f3 L: E0 _8 O5 X0 ]3 w3 ]/ v
  11. }
    6 U: c, F. d& O
  12. 。。。
    5 m* m, }) O7 x4 L: P
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);
    ' d' p" Y  D. ]. ~
  2.     pic_tmpbuffer = pic.tmpbuffer;
    8 P. R: ^% D- f
  3.     pic.tmpbytesused = buff.bytesused;( D0 L' h, D) C  l0 o* Z
  4.     pic_tmpbytesused = pic.tmpbytesused;
    3 G7 K! `2 w/ P. b
  5.     pthread_cond_broadcast(&pct);+ F) D) A$ M5 o! @. y
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;7 O5 o5 C5 v. N- a5 A" E; K
  2. pthread_cond_t pct;
    ) e! p2 [: x" Y) K! l4 S4 E
  3. int main(int argc, char* argv[])
    , {% t" T  r7 D( V% H+ x
  4. {
    0 K8 Y- ^1 q9 i% z: K7 D
  5. ...
    * I$ X" ~3 }" n* ]! Q- f8 L5 A
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);2 j& H$ b% V% Y
  7. pthread_mutex_init(&pmt , NULL);' B  U5 q2 H' g, p! J2 s& o
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    9 Z, H1 ?7 o. r2 S
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    , O" ~! N8 Y6 d. _4 p. n
  10. ...2 x, V, c- q# |9 `% J8 I# {
  11.     while(1)& q# M3 E% S+ z2 K
  12.     {
    6 D6 s2 H: r# m2 ^" p" N; F+ k; U) F
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    % E  Y2 a' T6 N7 \9 L
  14. ...
    + x- ~$ E7 X: e+ Y# T! g7 @
  15.     }
    7 b6 `4 u! f7 f
  16. ...
    , m' j, @+ O* z- B1 [
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">; s) J8 z/ Q4 `7 y: J9 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" \
    3 @- J( Z- L' D- a5 X1 a
  2.     "Server: MJPG-Streamer/0.2\r\n" \% L# ^/ p/ f! V
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    - k+ j9 s# k4 ?
  4.     "Pragma: no-cache\r\n" \# F7 k1 m/ T* Y
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"% o& h* H: f1 u9 y, s: C) R# `7 P4 H7 q
  6. #define BOUNDARY "boundarydonotcross"9 b, h( Z/ ^9 K; |6 h* ]6 v& W9 M
  7.     printf("preparing header\n");! n, p5 t, e' Z( o
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    - N8 a4 Q/ n- o+ }; h
  9.             "Access-Control-Allow-Origin: *\r\n" \
    7 w( f; W: ^+ d+ X1 T
  10.             STD_HEADER \
    * i+ z0 v! E( B! f6 r. N
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \* c/ I) `4 P; r+ j3 _/ B# T: U( r: w
  12.             "\r\n" \
      `, F: Q9 u9 P) B3 ?+ M6 _
  13.             "--" BOUNDARY "\r\n");; _8 g; w3 Q* m  m0 ~) v* K
  14.     if(write(fd, buffer, strlen(buffer)) < 0)4 j0 L9 L4 I+ P6 F3 s/ E' \; q, O5 o
  15.     {; I& d& P4 T, S. y: a
  16.         free(frame);6 D; @$ w/ ?) F+ j3 S
  17.         return;
    / ~" _+ J; S: q9 {
  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" \' R6 A) f: m* D- F
  2.                 "Content-Length: %d\r\n" \% h' \" q0 z5 }$ O" `$ m- B
  3.                 "X-Timestamp: %d.%06d\r\n" \
    , B- _9 \1 D" l* v' ^8 l
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);. i$ c3 [4 G8 a5 K: [0 |
  5.         printf("sending intemdiate header\n");
    $ o8 W5 t8 J6 |' K7 m
  6.         if(write(fd, buffer, strlen(buffer)) < 0)$ t: i" ^& K# h( c" E7 z
  7.             break;
    2 ]5 P' D  n; y2 Q* \
  8.         printf("sending frame\n");2 x' J1 h) {- D" N
  9.         if(write(fd, frame, frame_size) < 0)7 n" a6 w+ @; b
  10.             break;* M7 r3 X5 s$ p
  11.         printf("sending boundary\n");
    3 _) V- d% U4 U2 j+ u* Z+ b
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    * H* q8 S' A8 \) u+ ^0 i
  13.         if(write(fd, buffer, strlen(buffer)) < 0)# P' ?4 q* t: P. `2 |/ L' |
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。

( j! ?( s% f1 J: L" P: `


7 @8 X% K) X& j4 i7 K9 W二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:6 B/ b- a4 ]4 ^# ~
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)/ ^! e6 ]- O9 G/ G8 [, G2 j
  2. {
    ( o% G- P, R$ f) ]  q
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);, b9 J! c% W& [: X* ~1 |
  4.     if(*socket_found == (~0))
    9 h5 B! H3 \0 M& c: |3 t7 i, @
  5.     {! S$ |# f6 l* f$ n, w- V& I
  6.         printf("Create udp send socket failed!\n");
    - W! U' g! u( s5 H0 _3 C* W
  7.         return -1;* Y: m1 X; y- ~: l- c1 K8 ?+ Y
  8.     }
    . G) o- F% p  c, Q8 b0 A/ V* Q+ K
  9.     addr->sin_family = AF_INET;
    5 F, `& L3 c+ _
  10.     addr->sin_addr.s_addr = inet_addr(ip);, q5 {3 T0 p! R+ |& A0 n
  11.     addr->sin_port = htons(port);& o6 A; W/ M# V6 ]/ ]
  12.     memset(addr->sin_zero, 0, 8);
    3 P* e( O' S/ ^- J& R
  13.     return 0;
    2 A; u& G! {+ q
  14. }
复制代码
3 f+ p2 r& C! u  }$ t1 i

9 F& O% B9 r+ z; R$ f8 D! z而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:2 u% H/ j  v* l+ X+ Y

6 @( ]9 [% i+ ^# n( n6 Y4 e0 Z, N" F/ j
  1. while(fend > 0)
    * P; R; d# D; U
  2. {
    6 H( y. m% e1 K9 W  ?+ Y/ L2 n( [! D
  3. memset(picture.data , 0 , sizeof(picture.data));* t  D7 y0 ^1 R% n
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    ( A5 o- r3 M; L9 n$ Y5 S* G
  5. if(fend >= UDP_FRAME_LEN)
    6 S$ b% s+ n, D1 e% \9 a$ X8 y. {/ E
  6. {
    6 Y- z% h5 M  p- M
  7. picture.length = UDP_FRAME_LEN;
    $ q# J% a0 Z9 Y9 L; ?; [
  8. picture.fin = 0;
    : \+ `  \. [" B" y3 T
  9. }% A! v: G! d: P# g9 m/ z
  10. else
    ! j- a# z% X+ z# B( k6 S! j5 R, A
  11. {- z* g3 m3 c+ W* Q7 d
  12. picture.length = fend;
    + J* \! Z4 o  v4 w* a+ l  p# H3 z
  13. picture.fin = 1;
    0 R9 @3 {+ H+ r% J
  14. }  D/ c+ ^6 ~- Z/ {( [6 J- W" X
  15. //printf("sendbytes = %d \n",sendbytes);6 c4 h1 \7 [, M/ l: l8 e% K
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    0 G/ a9 u3 Q8 c4 z4 S# e
  17. if(sendbytes == -1)
    1 ^  ]! G. U" ~: H) @8 M
  18. {
    - ?7 R: n3 y( r, r
  19. printf("Send Picture Failed!d\n");/ u* m$ G" L4 N
  20. return -1;
    ) U! ]9 t- E1 ?4 P) L2 m
  21. }
    : Y' g% z! ]& i& }& A7 k; e6 s! I
  22. else. `7 j& t: g1 @: w! ?: o
  23. {- ~& k* N# K% F# c0 n% M" Y; @% g
  24. fend -= UDP_FRAME_LEN;" b! v9 t/ F) S. M: n% D6 E
  25. }9 q3 N8 j+ ~& p( O: [; j0 l5 J
  26. }
复制代码

, h1 K' {9 g) ]9 u
" r  r7 ?2 Y' u# \


* z" y8 L0 Q; F7 |% [. T# x; U( [. n/ f0 q2 ~+ i. _; U3 B0 z
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-2-6 22:38

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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