嵌入式爱好者

查看: 10876|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑
' [% j& V& K' ^+ Q- d7 z9 X3 Z% i2 r. }


9 d9 y! ~6 N$ G$ H

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
3 g% c8 |7 }/ p& I% {: [
! ]; N9 I7 v4 I1 f8 O4 w8 O9 H

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

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

6 ]% Y: ~' S8 L; d. x  N) [

/ d2 `8 M  x$ {2 d" R7 [

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

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

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


    % G! P% L+ @. x4 N, S3 S

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

" h, Z* b  ]# h# Y$ v" [) Q: F9 v; I( J
一、HTTP网页服务器+ a9 v9 [* i2 W6 a, H

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)8 n; X8 A: [  I& B! g0 B
  2. {
    + ?3 ?# ]3 ~4 L! [& V! c. _
  3.     struct sockaddr_in servaddr;4 [& M8 w3 r1 ~. ^
  4.     socklen_t addrsize = sizeof(struct sockaddr);! w5 Z" y. c: m" X: \/ J3 k5 D/ `
  5.     bzero(&servaddr , sizeof(servaddr));
    , d5 L7 s) ^+ p, ?! \
  6.     servaddr.sin_family = AF_INET;/ c! ?! |- }! H0 K1 w
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    % K* H6 s/ V" z1 L; p* f
  8.     servaddr.sin_port = htons(port);+ C7 S, M5 ~- F& K0 O
  9.     int ret;& X1 R3 e8 k' r8 @
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    ; N4 a$ r/ x0 D# m$ T' J  k- F
  11.         {" `' x0 r; G" N6 e4 {
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);
    3 y# p9 H! ]/ s( u  D- G- U
  13.             return -1;  h$ b7 N: m7 C4 T, F1 M
  14.         }
    # f; h; J; a% c; w  e
  15.     int on = 1;
      P5 y3 R0 e' M* O4 J
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)0 h2 o* g; p/ N1 F5 K. M! ~- W
  17.     {6 e+ t, x+ H9 J4 z0 D
  18.         printf("setsockopt error\n");
    1 d  u6 a0 b' b3 _
  19.     }4 f: a2 w0 g: L4 c) m' }# v/ `7 K9 n! M
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);! H0 ~& {, ?3 N" L# b' b: R9 p
  21.     if(ret == -1): b7 L. o, R4 c+ J& T, G
  22.     {, _, u) b5 m8 \8 l9 y/ e
  23.             printf("Tcp bind faiLED!\n");
    ) \7 s& O' J, p+ J/ M2 }1 Q
  24.             return -1;. F, C9 A( ]& L) ]' t
  25.     }
    : `$ Z4 ^/ ]$ B6 [
  26.     if(listen(*socket_found , 5) == -1)3 R8 A' ?; Q! K4 y
  27.     {
    1 s6 A# \. X3 r  e! d6 g
  28.             printf("Listen failed!\n");; d1 Q& F  U8 e+ R) }2 r5 J
  29.             return -1;6 E% l9 r# J7 I! z* N' R; J
  30.     }+ f, z9 r7 j& F8 G$ r: v5 g
  31.     return 0;
    0 G' L% i# e' \. b5 b
  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);
    : O: H6 M  Y: r5 f$ P/ F3 j" w: i
  2. void * Thread_TCP_Web_Recv(void *arg)! t5 X0 n. M% A8 ?: y
  3. {
    " T6 u: b2 ~6 `; O
  4. 。。。
    + Q+ \( E; P. K
  5. while(1)
    3 P  o' Y! h* h7 L$ o$ B, e
  6. {* b6 d( q# y) T6 [
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    & p7 c9 A2 A# Z3 G  z4 I
  8.            printf("fd_socket_conn = accept()\n");2 _$ H& f! O( B2 S# O( t
  9.     。。。8 O4 O. v: d; u
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);  `8 M# T( u4 |9 ^5 M- B
  11. }
    7 ~- ]; i' |; |0 L& V
  12. 。。。
    * h- y1 O% q% _9 P7 d6 z
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);- z1 W9 {0 m$ ^
  2.     pic_tmpbuffer = pic.tmpbuffer;
    6 l$ c3 I. d2 K# d1 I( V' E
  3.     pic.tmpbytesused = buff.bytesused;6 p/ c" W/ ]5 P- h  H* D/ L& T
  4.     pic_tmpbytesused = pic.tmpbytesused;
    ; q: O; T; P; t- h' \% T
  5.     pthread_cond_broadcast(&pct);/ L. s" H8 `; ]& J
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    8 D+ X  D% I7 t" h  ]3 j# w7 T( U. t
  2. pthread_cond_t pct;
    ! f% C: c6 Q/ h
  3. int main(int argc, char* argv[])- R( Y( h, v. n" V. e; B# _
  4. {
    7 H% `& w8 C2 e; u  T
  5. ...
    ; ]5 }6 l9 z8 }4 |9 n
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);
    * ]  Q  [# m6 Z9 X1 ?
  7. pthread_mutex_init(&pmt , NULL);
    2 `& v8 O# ]: Q
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);7 f' n$ N( L$ O/ B- m$ C1 X
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);5 S0 H- v" ]" w- Q
  10. ...; f- m" u+ p; q) c* ~' q5 F
  11.     while(1)
    5 w2 U: @: \( G
  12.     {
    7 q, s* `6 \; k( a* Q$ k
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);0 `7 Z1 N& F, I6 M
  14. ...% P3 B0 }% {$ P1 I  k
  15.     }9 r( Z3 g8 n/ f! G6 a
  16. ...
    # E& b* g3 ~! Z. z6 Q& @& S& \
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    3 h; i% w( B3 q* h
  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% ~* e+ B9 L; U
  2.     "Server: MJPG-Streamer/0.2\r\n" \1 v: n3 X* N7 D$ E' J
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    ; P& v: z* r! h5 D
  4.     "Pragma: no-cache\r\n" \
    - T! r. X% y: E2 `) ^' R  g8 l; U
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    / }0 Z4 @% K# L- F! v0 c
  6. #define BOUNDARY "boundarydonotcross"6 r0 V2 q3 \0 e! ^& i/ K
  7.     printf("preparing header\n");" \8 ?2 X' O1 S: W5 O6 g
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    / R) X3 Z& L# I3 t" A
  9.             "Access-Control-Allow-Origin: *\r\n" \1 ~2 r2 }  l/ s% e* q
  10.             STD_HEADER \
    & C0 k9 U" Q5 H$ h: ^) z' v: }5 x
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    3 y6 E4 |0 j+ G6 h+ q
  12.             "\r\n" \7 e8 t5 c9 X# m( f; v# L3 d
  13.             "--" BOUNDARY "\r\n");" j* j9 d1 \. n) X5 t
  14.     if(write(fd, buffer, strlen(buffer)) < 0)! B6 s( k. Y( v' p% X8 \3 y! v8 W
  15.     {
    ) j) G: f  J8 {$ ?( w
  16.         free(frame);) i2 N, m0 }4 f5 k% a. }
  17.         return;1 ^2 n7 g( t5 k% T2 D! C, v) s
  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" \+ l# o" T) s- G7 t( \
  2.                 "Content-Length: %d\r\n" \
      F! ~0 P* d7 F8 N+ c2 i' I
  3.                 "X-Timestamp: %d.%06d\r\n" \
    1 J) X% K: u+ E- c
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);
    , q" L$ ]* T  d& k
  5.         printf("sending intemdiate header\n");
    2 ^. r. P0 Q' M- n
  6.         if(write(fd, buffer, strlen(buffer)) < 0)# j% B$ z; H4 C8 H: U
  7.             break;
    ' I% p3 U* [9 ^9 O( B1 J' P) K, \, ^
  8.         printf("sending frame\n");1 ?1 V8 s/ K* q; O2 H
  9.         if(write(fd, frame, frame_size) < 0)
    % H: x5 Z! m' z& c. v3 y
  10.             break;  M2 ^! C" z# ^9 a/ L* N8 \
  11.         printf("sending boundary\n");
    ' d) U; C2 e' ]! H7 z$ p
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");4 y9 E+ t  m, x
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    ; E! B+ z: F* w1 t, w& 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指令,从客户端使用者角度来看的效果就是网页一直在等待。


" y/ f# {2 c5 [) ]+ Y7 i* |3 v


8 A+ v1 _- q% @4 j3 D" V- ?) q二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
/ c: Z7 C% D% \7 C4 N8 ]
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)$ u- A% R6 T( Q! h
  2. {
    3 o9 D1 P7 J, t4 E( E5 K
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    # v6 C5 e- p. P0 U9 J- D3 z+ j
  4.     if(*socket_found == (~0))
    . O5 ~6 N9 [" A1 ~, s. e9 k) h
  5.     {, l( W& [6 x% p; J; ]& n
  6.         printf("Create udp send socket failed!\n");# i5 o/ I& r" L7 V$ l" B/ m( s
  7.         return -1;# Y. n( t2 a  _6 X9 r
  8.     }
    5 s; M1 d! K4 l& T- w* p
  9.     addr->sin_family = AF_INET;
      E1 |& m! Z, ^/ n1 O
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    & ^/ L* K: w+ X3 e- c
  11.     addr->sin_port = htons(port);3 r  e6 C0 e) n, K9 v* G
  12.     memset(addr->sin_zero, 0, 8);) j1 C8 s6 R% U. e+ o$ I
  13.     return 0;
    + n& Q8 _% j' D
  14. }
复制代码
* A" j  G# p; V9 i: s; x, J) Z, L

$ M! n7 b2 P2 X" |  m" K) K1 ~而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:/ K% h4 @. S& Z9 e5 R

, M# g0 h  g1 L4 K
2 S/ r* p. S( D8 I8 ]% h
  1. while(fend > 0)/ }5 Z  n3 ~: H* i% J" B
  2. {
    4 m: h# `- p; H% H& [+ T
  3. memset(picture.data , 0 , sizeof(picture.data));
    ( H- J' E7 V$ t8 D- K4 ?/ A
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    % k" Z/ w; P2 n, v& \
  5. if(fend >= UDP_FRAME_LEN)) X2 u! b- X, Y1 m1 Y+ N  f
  6. {* O7 Q5 y+ R* x$ c! F0 T
  7. picture.length = UDP_FRAME_LEN;
    ( a+ D' z$ d/ s6 {
  8. picture.fin = 0;! z! [8 M' }  L
  9. }
    - W2 V  e7 y9 T! Z) }9 U& }
  10. else, j) k/ \: r. y8 x( k; p9 v* c
  11. {
    5 N( S6 r$ [/ S# ?
  12. picture.length = fend;2 g& h. i- ^: t2 O
  13. picture.fin = 1;. f- W: J0 ~7 o$ P
  14. }9 E8 z6 z9 @2 p
  15. //printf("sendbytes = %d \n",sendbytes);( R, l6 e1 _  F: o5 }
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);, X3 a9 ~# c, T
  17. if(sendbytes == -1)
    - N# {: L" |* c6 t
  18. {& d; W; F3 L" d7 z, I, f; c6 L
  19. printf("Send Picture Failed!d\n");
      j! y# m+ C: F% I
  20. return -1;) w7 T" c+ m; ^/ j6 |6 H* w) d. `
  21. }
    ! m; ?' g! j. F! h: y
  22. else7 A) }5 B& E/ K
  23. {
    0 A7 W) A* T* T: ~9 o
  24. fend -= UDP_FRAME_LEN;2 @4 ~* g! H" R! F9 V+ q! B1 Y
  25. }
    : U  ]2 C, j# x# @
  26. }
复制代码

. r& N9 K* z! _# q* L$ `! d
4 Y( P6 Q' `/ C" R; ]5 c0 V, q

0 b! X% m7 y) o8 m( o

) I9 U+ q& ^1 F& g- r7 LiMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-1-24 06:14

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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