嵌入式爱好者

查看: 11050|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑
& U: [& k* q9 |$ M8 G9 k; `# f' D" {" D
& a& T9 ]% j) V: }- ?

: d/ p& |0 H0 A, x

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
1 }4 c* V% t/ m8 }0 W" ~, G3 B6 Y# t* |3 {' Z& Z

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

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


1 v( N1 ]* E; c

, X% Z! n( B9 b6 I) H2 }; L# K

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

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

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


      p8 k2 r1 F3 L: m

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

0 {* D9 U4 y, ]. [0 ?+ b% t
一、HTTP网页服务器* |3 T+ J% k8 G+ a; J$ T- u

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)* E2 {) K1 o1 u% l# `. O3 O
  2. {8 @) c) H5 R: O  f
  3.     struct sockaddr_in servaddr;, ?3 H, k! b- K' o! d9 B2 w
  4.     socklen_t addrsize = sizeof(struct sockaddr);6 V+ x) R3 [. }: t: n
  5.     bzero(&servaddr , sizeof(servaddr));% J: `, x. K9 k- I$ E
  6.     servaddr.sin_family = AF_INET;
    - m7 A; n: j* K# J
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);# w# x. w/ j! f2 ~. _- ]% Y1 s
  8.     servaddr.sin_port = htons(port);
    7 R+ q) i4 e5 R6 Q5 y7 w
  9.     int ret;
    7 }$ Z+ n- c* Q! z7 e
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    ; \) Q; l) d7 H* Y
  11.         {: M1 q% ^2 G3 x! W" ], {5 n
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    $ @8 ]0 \; A" f" Y+ X. H
  13.             return -1;
    ' Y! A8 w& Q1 V0 X, E
  14.         }; Q% h5 U- _" \5 {9 N  f- L
  15.     int on = 1;  |2 E$ D) u3 r5 e
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)4 }- _' I- A8 F/ X
  17.     {/ i' U) M" Q6 y5 {0 |7 ^- q: x
  18.         printf("setsockopt error\n");
    ; B* s% Z' O- H% N; I, T
  19.     }6 V4 e1 G& T7 U0 U  M
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);9 b' _4 ~1 I  K- r! i; a+ i
  21.     if(ret == -1)4 v/ P) k3 [! E  z
  22.     {
    / d3 T6 q3 X7 o6 B9 k9 Y
  23.             printf("Tcp bind faiLED!\n");$ `1 F. G$ Y3 ], U, ?" V
  24.             return -1;
    % Q& [9 j& J' ~- b
  25.     }5 @5 g( x; V( _7 X4 N4 w
  26.     if(listen(*socket_found , 5) == -1)
    3 D5 X) J, w9 \4 G" ^7 D) a1 s
  27.     {
    : z1 N7 R8 ?; m
  28.             printf("Listen failed!\n");
    2 y, ^  N4 ~( L5 P. K0 l
  29.             return -1;6 e2 M$ J$ l( e7 s, w- n# J
  30.     }8 c( C) C; d# o9 b5 Q' t0 m% O& ^
  31.     return 0;6 j7 P6 D+ A) Q; A. Z
  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 a  l/ Q8 V6 d( o1 ?' z
  2. void * Thread_TCP_Web_Recv(void *arg)
    : ^4 K9 x3 s/ |' x# [8 t
  3. {
    9 P  l3 `" g0 [) s3 k4 V
  4. 。。。0 n7 ]5 R. S7 A
  5. while(1)
    , S* U. C/ q# M
  6. {' ^% \* \, {; T' g- V+ V
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);2 U; a) C) _/ a1 p, X3 q. E  V$ i
  8.            printf("fd_socket_conn = accept()\n");
    , R9 O: |( Z  H' F8 A# Y+ ]! ~. j
  9.     。。。
    2 F+ T* N7 d9 _* ^% K( X* z* X# Y6 n
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);2 O* `, S' s* l1 H0 Q1 Q/ C) }$ t9 w
  11. }0 e) x) a% ]/ I( v2 _( K2 q
  12. 。。。
    ; u2 j8 F& T5 x; ^
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);7 w+ L- X; y8 z
  2.     pic_tmpbuffer = pic.tmpbuffer;1 \9 f+ g# w1 x8 v3 {) N& |
  3.     pic.tmpbytesused = buff.bytesused;
    * m0 a5 d, J  B/ g9 a* E
  4.     pic_tmpbytesused = pic.tmpbytesused;
    8 q3 T9 E; f# Z7 j1 _  y" l3 P/ Y) ]
  5.     pthread_cond_broadcast(&pct);
    , D. T: h' B4 S# y
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    % h, V2 V  r5 a6 e( k
  2. pthread_cond_t pct;2 ^* r# L3 h  {* K7 \4 ]7 ?. A
  3. int main(int argc, char* argv[])4 H3 o2 a7 s! \" e
  4. {
    $ l8 U1 x9 ]6 I
  5. ...7 Q1 y' f% d8 B5 L
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);! o+ Y0 Y2 A& b+ n0 C% i* m
  7. pthread_mutex_init(&pmt , NULL);
    3 }" s, `0 x# h# ]
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);3 ^/ v: T- n9 H9 B
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);, N9 `* m! y  R+ V( F  y
  10. ...
    ( u! J; K+ Z9 I9 ^$ S( j$ Z/ v, w
  11.     while(1): z; [. \! M7 X
  12.     {
    6 y! M3 x& R, r! K; _
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
      E7 M$ N9 P  H; d$ A3 I- i
  14. ...0 k% a' Z. h6 R$ F, D
  15.     }
    3 u- Z9 }! F5 s# G# G
  16. ...
    5 J1 ?$ s# w% U7 M  q
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    # M/ A' M  d, n$ E7 c+ I8 H- Z
  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" \/ c8 q- y; B- z# j0 W
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    ' R, l* t9 @) W# ]- A1 l) D, W9 Z
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
      |8 p' U( [) }1 w5 c8 [
  4.     "Pragma: no-cache\r\n" \/ n- b+ x2 u3 K. r
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"1 a' w8 x) ]. L5 j* J# e
  6. #define BOUNDARY "boundarydonotcross"
    2 U: u1 c( n/ M
  7.     printf("preparing header\n");
    2 X( K: M' d- r) ]7 c0 p8 c( o
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    6 t4 X6 L- x1 w, b" n
  9.             "Access-Control-Allow-Origin: *\r\n" \
    2 Q& e: W+ y, @( W+ a2 ~9 G
  10.             STD_HEADER \* b, c% t0 \8 N3 s7 ]9 b
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    9 L9 {, U3 a' {4 n( r
  12.             "\r\n" \
    2 ?$ Q& s6 y3 B) b! H4 [4 w7 I
  13.             "--" BOUNDARY "\r\n");
    4 {2 e1 p7 k6 X2 X9 [
  14.     if(write(fd, buffer, strlen(buffer)) < 0)1 Q) I+ @5 ]' F
  15.     {1 m- B: |/ ^) \0 u; a6 X
  16.         free(frame);( s" f# f5 y, D& Y" W4 N
  17.         return;
    & H# ^% \4 W4 d) `! C; q
  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" \
    / t- y3 x3 L! |5 t) K
  2.                 "Content-Length: %d\r\n" \5 J* h" r% }' ]+ z0 Y! S/ x9 l
  3.                 "X-Timestamp: %d.%06d\r\n" \
    4 Q; V" y& I' {8 w$ |1 j
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);  G/ y( i6 @; c# h
  5.         printf("sending intemdiate header\n");
    5 e' k/ _. h' }1 ]8 W/ i
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    - a, q+ y! t- |5 I* q0 e
  7.             break;
    6 \( ^; c. O  u9 t& T
  8.         printf("sending frame\n");0 K! u5 E8 H- i- U
  9.         if(write(fd, frame, frame_size) < 0)' ~& P$ n2 g" V6 C! {% w9 C* W9 \2 R
  10.             break;
    0 y; S1 V: h% X2 D* R' m" t
  11.         printf("sending boundary\n");2 L7 [) }( R5 O# ^
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");1 ?6 x0 Y# g9 y& ?+ s' Y& o
  13.         if(write(fd, buffer, strlen(buffer)) < 0)# Z- @. D. B) n% {2 \! u: v
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。


2 s, R8 G$ ~2 I

* b& Q6 ^0 u! O
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
) o1 X* O5 A0 s; c1 p7 }, B, }
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)4 i2 g2 Z( J% s& C+ Z3 W
  2. {: r; P! [  R' b/ W
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);; D/ H6 D' Q5 }4 a
  4.     if(*socket_found == (~0))5 G$ x/ ]: ]* `! z
  5.     {
    # i8 l9 f2 S: B
  6.         printf("Create udp send socket failed!\n");
    , p: A% ~9 ^$ B: a( G& |# w3 B
  7.         return -1;
    1 P' m1 U, Y1 L+ w1 ~
  8.     }% _5 G0 s" @5 X
  9.     addr->sin_family = AF_INET;
    ! Y8 Q/ j, H5 r1 m
  10.     addr->sin_addr.s_addr = inet_addr(ip);" S3 J, J9 F/ v! v
  11.     addr->sin_port = htons(port);
    * b& V/ R. ]1 Q; V3 J5 ~! C
  12.     memset(addr->sin_zero, 0, 8);  g$ E/ f; p" y4 ?  I6 T% {- M
  13.     return 0;8 L: K0 U, J, Z$ i- N1 H
  14. }
复制代码

6 e; H) v5 u* B& Y0 T6 N
8 T- p" l. [9 P  H3 x& [+ `而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
. O  ?+ e5 [! C) }1 |
7 r9 I1 y! C, {
* {  `" E( E# U4 n3 M
  1. while(fend > 0)( e8 g4 S& \! N7 `2 v4 O
  2. {
    ' ]* {7 e& D7 t: ?( H  m0 P
  3. memset(picture.data , 0 , sizeof(picture.data));
    ' ?( h( u  h4 H5 T1 {
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);& R3 l! @" a4 G# j) n& ?
  5. if(fend >= UDP_FRAME_LEN)
    ) S) R+ A) A8 ^$ J, x  R
  6. {
    ) a4 {7 J; {3 V
  7. picture.length = UDP_FRAME_LEN;; M5 h: }5 U8 w* v  K
  8. picture.fin = 0;6 q2 ]; k, i& g: X7 Q
  9. }
    4 f9 _' W, F$ S. W
  10. else. O$ {& K- q, T: R- h* Y
  11. {! K$ o5 C  }6 U# k$ t  `
  12. picture.length = fend;
    7 R" Z3 O1 j: h8 p9 e: `# H
  13. picture.fin = 1;( [9 h3 o' A4 v; t# G
  14. }  r+ @% `6 H* b3 M& n1 h( g
  15. //printf("sendbytes = %d \n",sendbytes);
    ' f) A# p7 l( j. N/ `/ u7 P
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);
    1 b; ~0 R9 Q# _6 w0 s
  17. if(sendbytes == -1)
    ( f1 r. U4 z7 }! O' F9 M
  18. {1 \$ G7 V  J& D8 K; n
  19. printf("Send Picture Failed!d\n");
    0 [+ Q7 V0 D/ @  }1 e" T
  20. return -1;3 e+ H; z0 c4 g) F; p
  21. }
    $ X# v/ c8 g& |
  22. else
    2 s" m9 ]( p3 J  H, H+ t3 n
  23. {
    ' ]% I/ J( W6 ?! k# X9 a9 c
  24. fend -= UDP_FRAME_LEN;/ l0 z  T5 K6 l! [7 ^, X1 B0 O
  25. }, X- }* _( g8 b; M3 y( j# n8 Q& ~
  26. }
复制代码
3 D0 q# ^+ f; j( E  j7 W3 R  G

, s% J3 `( E4 O- j4 q6 y


  U/ i: d; a7 [+ d3 v5 Z7 j2 n- y4 U' d" f' F# f' X+ X
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-2-8 14:01

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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