嵌入式爱好者

查看: 10906|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 " w; r  g" z' \" z
4 G2 c0 ]! v( O2 b

. o$ Y/ V* l2 Q& ]# \# r! D" l

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
& d/ {6 r) t7 X+ ]) X- t5 v" u
, d) r0 T' `& n- B5 W

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

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

/ [- E! R5 b% D; e# D* m

( |! P3 O- f; G2 e! ^4 B

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

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

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


    ! P: T0 n2 @9 U( p

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

0 G( _7 n" Z, @, x7 o% E
一、HTTP网页服务器
2 v, G( M* Z9 w6 K8 ^; a5 P

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    1 q# v# O/ n& X2 v) P1 j& t
  2. {' J" a6 Y( m- B3 F& O
  3.     struct sockaddr_in servaddr;! n, M6 A! K1 [  p8 E$ M
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    / R0 S$ T% y  u7 s+ h# Z
  5.     bzero(&servaddr , sizeof(servaddr));
    8 t# b- G% J& a1 `, F9 s0 M
  6.     servaddr.sin_family = AF_INET;
    9 k9 \( c9 T  J/ u6 L- w4 f
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);6 t: ]( ~) K: Y; b+ z+ F: e) J
  8.     servaddr.sin_port = htons(port);
    4 u' {+ V- m: \5 t6 E
  9.     int ret;
    . {, O, e# s; J' |( Q
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)+ O+ I6 X! n2 }) ]$ v
  11.         {+ |( W! y' o0 ]  s7 ?- g
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);2 G2 v2 p3 c' R0 G3 d% `+ |
  13.             return -1;
    * s  b6 w* W4 l7 q* K( b
  14.         }, S# x% c4 ?! B) x
  15.     int on = 1;
    ( ~% ~8 W( u7 H" o/ x# _! t
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)1 F1 k: k6 a1 F4 H
  17.     {
    3 w$ |% K4 S8 n7 k. ^, q
  18.         printf("setsockopt error\n");
    - i8 s' C" X$ u
  19.     }3 |3 X' A- f/ `: X6 l/ p
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);8 e6 N, i: C* H; ~( ?; [. Y
  21.     if(ret == -1)
    % C. F/ }  C& E# S9 O9 n
  22.     {
    3 W; ?' f/ Z# R% g) t
  23.             printf("Tcp bind faiLED!\n");6 ]5 B: l4 z7 ]5 y5 v/ H5 ?
  24.             return -1;
    * C- m7 n, |3 A/ \) z' ~6 z* N: ^
  25.     }
    4 V0 x; ~' p, Z5 e( j" i1 q
  26.     if(listen(*socket_found , 5) == -1)% I: F1 _; \* {( g6 B  Z, \
  27.     {# U$ c: W, f7 a8 \
  28.             printf("Listen failed!\n");
    ' |6 Y, b/ G9 I- C+ s% _
  29.             return -1;$ L1 P$ M4 e/ `2 [2 A1 m
  30.     }7 `3 i1 J4 y* C9 e
  31.     return 0;
    , ?/ m; J3 o( d7 ]8 B8 D
  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);
      u1 s' G. g7 {) t2 r
  2. void * Thread_TCP_Web_Recv(void *arg)
    $ `- A! N: w7 {$ F
  3. {
    7 H, R7 c' o& P4 v# Q
  4. 。。。
    3 g! \  w: K0 {- [
  5. while(1)
    0 |7 ?" w4 d0 O9 n. J1 y
  6. {
    3 h% Q4 S& ?1 w* M4 ^9 A0 e
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);4 [* J) H2 A9 J
  8.            printf("fd_socket_conn = accept()\n");% R" p5 T! P( Y7 P
  9.     。。。! Y; o- Y/ }) c# ~
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);2 U/ [2 P+ p8 E- Y" n
  11. }; W/ q4 @; \- R% G  k* H7 k; I
  12. 。。。8 c" d! Z7 Y: Z5 h+ m0 h
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);* |8 E8 U$ p6 d3 T( d2 {, G
  2.     pic_tmpbuffer = pic.tmpbuffer;3 o* E0 `- b# Y8 t' e  k
  3.     pic.tmpbytesused = buff.bytesused;
    " ^% C3 g! \; W+ K( p# x8 g1 `! `
  4.     pic_tmpbytesused = pic.tmpbytesused;
    9 c; q# b% t4 }$ E  M( W( f
  5.     pthread_cond_broadcast(&pct);* P+ C4 i7 v8 w+ A9 O/ j. O+ Q+ p
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    5 C, n- D2 O" \! }" E% Z% O/ }- x
  2. pthread_cond_t pct;
    ' ], ]1 Z  f% E
  3. int main(int argc, char* argv[])/ C* t( c7 S) d/ W1 s; P
  4. {
    1 s" g; |1 w7 ]. [
  5. ...7 b+ |8 s. g$ N- |# v$ a7 m( ~
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);
    ; y# _# O4 z8 D1 K5 I8 ]
  7. pthread_mutex_init(&pmt , NULL);
    4 m. Z3 b+ g: \* w0 N8 a* R
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);
    * D9 @+ r4 c; h+ X7 {7 S( x
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    % C/ @! O, t7 N9 Z/ v
  10. ...# H  {; z3 y: F5 J
  11.     while(1)
    / ~5 L/ B, {2 U, }& d- _* W3 Z# n6 h
  12.     {
    . Q) k! S: Q$ M$ y
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    $ [6 k+ C2 F4 F4 N
  14. ...5 F2 k8 f5 p, c: |! C
  15.     }
      {5 y* d/ L. A4 D& Z
  16. ...
    8 O. U* b. G* w
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">: a( l1 Y; _' x- p0 m0 h& x* x% W
  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" \
    : p8 c0 T5 B' k% @* w
  2.     "Server: MJPG-Streamer/0.2\r\n" \7 I2 m, f5 v: `2 F
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \' Z: i# t$ Q+ d. B; R; H
  4.     "Pragma: no-cache\r\n" \) g6 p2 N$ B, F, q
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"8 l0 x6 W4 H  ]3 u$ A1 f
  6. #define BOUNDARY "boundarydonotcross"
    ( |' }6 ~, w4 m# B
  7.     printf("preparing header\n");
    9 V/ D* G; W4 E) O& F7 v+ `* c
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \: o. E( U/ P" G) v6 K' K! H
  9.             "Access-Control-Allow-Origin: *\r\n" \- H( m( v$ K/ w3 S) p9 Q1 q4 u7 T7 {
  10.             STD_HEADER \
    + T* M/ @* d2 T7 E+ |% s( H
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \, z$ J. ]6 T  L; ]* X
  12.             "\r\n" \
    : o8 ]4 z" ^  j7 Q. U0 E2 l: K  J
  13.             "--" BOUNDARY "\r\n");# C3 d9 O1 J) w9 w+ a7 C
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    % U( E; ~+ o3 F- {3 @/ w( q5 C
  15.     {8 N6 l0 j- X" F- I2 j3 g
  16.         free(frame);
    5 T( w- {& N8 ^8 N& |
  17.         return;
    " q' A( r1 d; n3 z5 v2 H. Z6 t8 S7 C
  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 `9 j7 Z6 w, m' ^( p1 h& }( s
  2.                 "Content-Length: %d\r\n" \" Y& B3 n9 m. {5 B$ ?7 v4 ~  q
  3.                 "X-Timestamp: %d.%06d\r\n" \
    0 }1 r3 V. n( b5 a9 ^  b% k
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);& T% U3 ?$ {- L& t4 ]& L# [' X0 B8 ^+ [
  5.         printf("sending intemdiate header\n");
    2 s+ p6 d" [. q. D8 d
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    6 @: I( k5 A0 Z: S! a
  7.             break;! C- w$ P# U" D4 F6 B' u
  8.         printf("sending frame\n");7 P/ l) v, i8 \+ K. g- m+ n
  9.         if(write(fd, frame, frame_size) < 0)
    2 h6 x  t  S; u) T0 |9 P
  10.             break;, [- @3 n" K- a& Q
  11.         printf("sending boundary\n");
    7 U. O) _9 O& F% \& J) A# h, _
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    ' `. `3 L& |3 r
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    # l  _" @8 L" u9 U- H) i
  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! L& ~% Z) J, k  y8 @" q' b


9 ^! d- X0 h# d二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:3 t1 E, T( ?4 [7 L' L0 w' |
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    ( G0 C/ x; O8 P( \
  2. {
    ( s( o6 I3 c: W/ G& Y( T& c/ \3 k& U
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    4 q& j9 v% C; Y2 t, X0 N+ {
  4.     if(*socket_found == (~0))9 c  b" U3 U, ?! k
  5.     {
    0 x+ a3 R+ d! C4 z
  6.         printf("Create udp send socket failed!\n");
    " z, x8 U1 [: G! c- p& x; ^% C* E9 ^- D! x
  7.         return -1;5 ]& c1 ?, E' t3 ?! Q  R
  8.     }* Z; d# C0 W0 T( y9 u
  9.     addr->sin_family = AF_INET;
    3 V; [5 z1 i: I. W7 D1 B
  10.     addr->sin_addr.s_addr = inet_addr(ip);7 x% O8 a: V0 I, }: r& V( Y
  11.     addr->sin_port = htons(port);  d9 z2 x9 E& k' i* V" U
  12.     memset(addr->sin_zero, 0, 8);# }7 U4 `1 W6 y, V& `
  13.     return 0;( {. M5 q7 b2 r% k: J& g
  14. }
复制代码
: Z- G9 f/ B2 J( i3 X( d

4 e! g4 i7 V+ p5 V9 l7 @. d而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
) G4 p2 J6 z- y, l/ C/ J1 ^+ [8 A
) J" p7 J2 f( V: U
% e% R0 s( p6 l3 E9 k& Y
  1. while(fend > 0): }% [; ^" L" h9 O& K* ~( y) `9 {
  2. {
    5 x! ^+ h$ r9 J0 g
  3. memset(picture.data , 0 , sizeof(picture.data));0 `4 k+ Y9 I( l+ S# }
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    / N, D( P( h& K' W$ o* @! C
  5. if(fend >= UDP_FRAME_LEN)
    0 f7 B1 i: H, J
  6. {+ B; x- Z6 _: u. Y
  7. picture.length = UDP_FRAME_LEN;
    & h/ L& t( u" C2 i- n
  8. picture.fin = 0;' [9 i9 f: f% o- D6 N
  9. }; O$ q* G6 a* W- T1 N& ?& Q5 \5 \
  10. else/ S, X  w% Z) E+ v1 b
  11. {
    1 ^6 x) D+ ~! `2 _. d. g
  12. picture.length = fend;
    % v5 l# n1 K3 W5 d3 r9 o
  13. picture.fin = 1;& ~; f* R5 D# u. ~$ o0 L$ i
  14. }
    6 N6 M3 w5 X) H8 n4 G
  15. //printf("sendbytes = %d \n",sendbytes);. }7 b" L6 p: Z
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);' K9 T3 @8 a2 U0 n, [
  17. if(sendbytes == -1)* G- U# Q( s2 \, P. i' A  f! u
  18. {) @- s* H$ t2 ~9 g) `$ F) a
  19. printf("Send Picture Failed!d\n");* F* H" N$ B; u: l( s+ s
  20. return -1;9 [) I9 y% G4 T+ Z" g( g+ f# `
  21. }
    2 S1 U- i: L6 u* x+ w
  22. else+ m- ~& v/ a( W6 y
  23. {
    4 u$ L0 [7 J: w
  24. fend -= UDP_FRAME_LEN;
    / I! q, U* R2 U" i
  25. }! }4 `2 J2 B' {: F& t
  26. }
复制代码

9 b6 v" p5 L3 N$ M. K0 f
  d3 b# ]/ c3 C; W4 t, x3 D" I& f( t

9 U( v$ H0 S3 F5 m9 P5 b1 @

3 n- _; O/ ~& j+ k9 RiMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-1-27 06:48

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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