嵌入式爱好者

查看: 11175|回复: 1

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

[复制链接]

46

主题

53

帖子

297

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 . w, ]0 r8 |& w7 G1 C8 G, {
" B; r! Q. T0 k! u


) D4 X8 D8 X7 P, \) Q4 R

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
9 ~, C# l* [/ G% C: q% p& V/ x$ l! n. {- ?! P9 h2 _" W* V

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

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

; f: }. h1 `7 p4 _


4 P' h& Y0 I. o

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

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

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

    6 T. |9 l) e9 K3 x

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

* \+ @4 w) U; y8 C8 u) L- @
一、HTTP网页服务器. k1 C8 u3 l+ [" z$ e8 W

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    , C) q# d( v. ?( u
  2. {
    : E( R  U1 _. ?: ~* I1 @
  3.     struct sockaddr_in servaddr;
    + Y/ v7 D6 B" c( B; F" p& p
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    7 J* [& v& N' q6 ^/ [# D' G0 C3 Z
  5.     bzero(&servaddr , sizeof(servaddr));' E( ?# g* T" N" A$ I1 q9 D
  6.     servaddr.sin_family = AF_INET;
    5 y) t* t# \( L2 @
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);
    ) v8 [8 m& R4 C$ T/ D! W& ]8 O. h
  8.     servaddr.sin_port = htons(port);
    # T1 v* j; q, J* k6 P: B$ `
  9.     int ret;
    ' n8 J% T" Y* v* V+ `
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    4 L$ |2 Q! e+ [
  11.         {
    " I- O# ]0 X" k, l, W7 X6 ~, y- g( j0 ^
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);" \* M! i' j, S0 C9 x( I
  13.             return -1;! @; T: A* D  |. b& |( ?  M
  14.         }
    2 m5 O+ y9 D6 b
  15.     int on = 1;
    ) D/ D. Z- }6 j, J
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)9 @) `4 ]4 p7 s5 ^4 f" P3 h  O
  17.     {
    ( j( q' n- k" M- u! }
  18.         printf("setsockopt error\n");8 l5 {2 j7 v  @0 z
  19.     }* \1 r: S4 [' x) F7 X! d- s
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    1 v" V8 o$ Z& s. G
  21.     if(ret == -1)9 p$ H7 {+ U% y; R% v
  22.     {
    3 k% H- Y' m. [4 s) |. w! }2 R
  23.             printf("Tcp bind faiLED!\n");" p! A$ r5 o) z6 W
  24.             return -1;
    7 N" I, X- u3 s$ F  F2 W7 A0 s
  25.     }  A# D8 w; B2 ]+ K( N; [; M
  26.     if(listen(*socket_found , 5) == -1)
    7 W! p: W5 S" U% C
  27.     {
    8 L+ X. S) m# o3 M
  28.             printf("Listen failed!\n");. r1 X: i. ~4 n* y. O9 q
  29.             return -1;
    " ~& J' [$ J% h
  30.     }
    ! J) a; A& L+ U$ _
  31.     return 0;$ t$ r) k- v6 ^9 Q: y2 j. \$ 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);
    + ~. a% W3 p/ _
  2. void * Thread_TCP_Web_Recv(void *arg)+ o' `( Y: D+ m7 q
  3. {
    " r1 V" D2 }5 \' a9 @! k* g) G
  4. 。。。  S+ V; M7 ~" q+ T: |5 j
  5. while(1)9 b# L9 Y  |5 c
  6. {, R7 V7 y1 ~) A0 o% X
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);( W3 D2 h" {' s, ^$ u
  8.            printf("fd_socket_conn = accept()\n");0 n- c3 ^- u  s1 t! ]
  9.     。。。
    4 I+ D; ]. E8 Y! D
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    2 a+ y3 ~( g/ N, R9 l+ s9 k
  11. }
    / T) T& ~: j9 N% I: ^; A
  12. 。。。
    + H! U! S7 l1 T. Y$ e
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);1 ]9 l8 M* I7 n/ \
  2.     pic_tmpbuffer = pic.tmpbuffer;
      R( f9 q6 ~, e7 @- G
  3.     pic.tmpbytesused = buff.bytesused;% q" D# Z  k7 P! b, x( I( x2 n
  4.     pic_tmpbytesused = pic.tmpbytesused;
    7 o  H- {0 j2 C* `- @2 U* L' L
  5.     pthread_cond_broadcast(&pct);( G0 l* X/ ^, \9 }
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;2 y; w  F" Q8 u0 u9 t- q" p9 |" Q4 i
  2. pthread_cond_t pct;
    / g. y% Y6 B4 }3 D
  3. int main(int argc, char* argv[])
    % e% g4 }1 j0 F9 a: f9 A8 w/ H
  4. {
    7 {% u1 a: V7 Z& k+ w! [7 C1 g
  5. ...- Z; P% E3 P% X! x
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);
    / |5 s' y) ?/ a
  7. pthread_mutex_init(&pmt , NULL);
    7 I( Y; u0 c5 b! ^" s, Y; M7 h& c$ p
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);* I! A0 R9 E: s% c/ g8 b
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);4 `* w$ a, O' _' D5 B" N/ Z% U( g% J* z
  10. ...% s1 I( \/ r/ K9 ]$ ?
  11.     while(1)2 ]0 g/ h7 n, t9 j' O7 ~3 d% L- |
  12.     {% r3 P0 M+ x& }: ]
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    / v% V4 m/ F& E' H
  14. ...2 Y5 a6 I" B$ O2 @
  15.     }
      G( E2 l- f# H9 }3 l+ T
  16. ...
    7 Z' t  T1 T  v. q8 z
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    8 g0 i, A0 z7 S; z! \1 ?! ~8 A
  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" \
    + j  V( c( V* n& X7 j
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    ) M( y' N" c' t9 J  h# T/ u, V
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \4 N! G5 a3 J, Q7 l9 E  H
  4.     "Pragma: no-cache\r\n" \
    % G8 `% i4 V/ F/ y4 [+ ^& n0 R7 K; E
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    8 F; [' t7 r( E( f& \
  6. #define BOUNDARY "boundarydonotcross"0 Q$ P0 j! [* J6 e& F
  7.     printf("preparing header\n");
    8 V( P- l3 E: h9 t
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    , X; H. F$ D6 [! ^5 w
  9.             "Access-Control-Allow-Origin: *\r\n" \% x  ?4 z+ B% R* Z% k
  10.             STD_HEADER \- ?( F/ B# X, D) f
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \; z) I' ]. Q/ ?
  12.             "\r\n" \1 ]0 l, ]; k2 `5 A4 C  X
  13.             "--" BOUNDARY "\r\n");
    9 p8 K0 Z& @) @+ b9 {  a
  14.     if(write(fd, buffer, strlen(buffer)) < 0): c5 h8 V$ x4 g, o. V: h" d
  15.     {' {3 @! M' ], P
  16.         free(frame);
    / a7 Q& Z$ o, h
  17.         return;6 C, C  W; h9 p0 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" \
    & _) [7 D2 f% ?$ C2 H
  2.                 "Content-Length: %d\r\n" \6 ~8 }1 s8 \. L6 C  x( H. a8 I
  3.                 "X-Timestamp: %d.%06d\r\n" \
    7 W# }+ k4 F* N7 I) A5 {
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);- \& T/ N0 K7 ?6 q  R
  5.         printf("sending intemdiate header\n");
    ; V, U' j+ G3 G$ r2 W
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    9 g' k; t) o% J! y0 w
  7.             break;( Q- W7 M3 {0 s* Y# j
  8.         printf("sending frame\n");8 D) i  M2 v" ]5 Z2 k# T) \
  9.         if(write(fd, frame, frame_size) < 0)
    : k5 h0 P: q5 d, t- T2 r
  10.             break;; X6 T5 ?6 s+ \' c
  11.         printf("sending boundary\n");
    * q! R2 q! d/ V. k4 t1 P; C( Z
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");8 S' f5 {& R: R1 l- |2 O  d
  13.         if(write(fd, buffer, strlen(buffer)) < 0)6 y) w5 w2 ~. e  n
  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. w- T; z. h8 A

/ ?7 z- J. L+ ]$ A! R2 |
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:- c$ U+ p2 e2 H5 V9 S% |
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    8 R9 N6 k, o* C5 S
  2. {" x$ I) C: r4 X! r7 B
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);  ~% m- S, I1 c4 ^( ^1 ~, F: ~
  4.     if(*socket_found == (~0))' Q& n6 P3 u! e  e# O, `9 ?
  5.     {/ n4 B% a' j" A" u2 l% Y* K
  6.         printf("Create udp send socket failed!\n");& W% e, C/ S9 C
  7.         return -1;
    & g- z( z% F* _, B4 v, r
  8.     }
    8 G! |& \  H5 s7 w7 h
  9.     addr->sin_family = AF_INET;  q6 j! H: V+ R  W& H
  10.     addr->sin_addr.s_addr = inet_addr(ip);
    ( p) N) v& E7 [* k" |. J4 F" B
  11.     addr->sin_port = htons(port);
    7 U  E& ~2 a) n/ M$ v5 `& L
  12.     memset(addr->sin_zero, 0, 8);/ P& t; H' p- V
  13.     return 0;& k& V" }' S& w8 [, s) l
  14. }
复制代码
* C" f' ~, H0 k9 Q; ^

$ {5 T6 i) ^  J4 K( ^0 K而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:. C- Z) @3 I% N2 s( R
6 S4 v! {" y( J0 N. T- A$ J

, P2 ^8 u5 [6 i: U: e3 p
  1. while(fend > 0)" j) C7 N# w# `+ m% R
  2. {
      D8 R& Z; z; K( s8 |5 |& _# E
  3. memset(picture.data , 0 , sizeof(picture.data));& G/ p. X- o% K/ E! D- q! ^
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);( H2 G' F  k) ~* D! }
  5. if(fend >= UDP_FRAME_LEN)
    . R+ e+ ^" n8 I8 D4 R6 [5 r
  6. {
    # U5 ]. J! @# O4 }
  7. picture.length = UDP_FRAME_LEN;: Q& p3 p. y; E$ T7 m: p
  8. picture.fin = 0;" A. Y+ ]9 C! D4 e
  9. }% i' u$ |. D8 y
  10. else
    % U7 L1 m9 B, x9 `6 z' q1 E9 d
  11. {* Y' W& S" W/ I' j: b
  12. picture.length = fend;. K. f* j0 {! ], i0 D4 K
  13. picture.fin = 1;
    $ j9 ^+ a1 }8 d8 S7 M
  14. }. Y  r' z# ]  J! j
  15. //printf("sendbytes = %d \n",sendbytes);" X8 e+ Y2 {2 o% ^
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);+ [) U0 m& x8 b, S% a4 H! C
  17. if(sendbytes == -1)% P9 a. K. g, q! Z
  18. {
    & r( f* J# Q& O
  19. printf("Send Picture Failed!d\n");8 \# m& a+ y! w# C5 {
  20. return -1;
    3 b$ _& Z' e: I) y9 b* x1 i
  21. }
    / h* ]9 h! ?4 a! F1 S# n. R0 F
  22. else
    7 ~" q7 m7 B$ M% i
  23. {: |* X9 l8 _, P$ V7 T7 U: J, B; U. X
  24. fend -= UDP_FRAME_LEN;
    ) v! s- x  l) O8 R7 o4 U
  25. }
    $ G( M. a5 q2 H( z3 F
  26. }
复制代码
1 C' U# M0 S9 G* G3 i/ B* K

& u# g7 @+ ^2 k0 Q) ^

7 T4 j3 W3 x: F/ n; a( G# e- n) g

* p# O) Z6 c  m% g; P, Q1 P! IiMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-2-18 23:42

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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