嵌入式爱好者

查看: 11920|回复: 1

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

[复制链接]

48

主题

55

帖子

305

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 9 O. W5 [) c- B

+ q* O" M* S5 N* P


( m1 e9 S, \. {- Z

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
6 P$ G0 E: q; Z6 O6 W& @) R( p  k$ x6 H3 O7 ~4 q# t

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

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


6 t6 S' F$ w( O" h


* E4 A7 M" z* v0 N

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

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

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


    0 F  ^( e! r- Z; {, m- ^3 A! R

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


6 F6 Q. {1 a) i( [. |9 m( E6 O5 O一、HTTP网页服务器
9 g5 P! [1 s4 u; E3 ?# Y& g

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    + Y6 K( K  z5 ^" c. @
  2. {
    9 s- Y. V  B- s% Y" ~6 y' F( v
  3.     struct sockaddr_in servaddr;
    % z* n9 }, V4 t; O/ s7 e
  4.     socklen_t addrsize = sizeof(struct sockaddr);
    2 K3 w9 F* M: P$ W) }
  5.     bzero(&servaddr , sizeof(servaddr));
    + l8 V; X% n# Y9 t  C0 M
  6.     servaddr.sin_family = AF_INET;
    - R, m2 E2 Q5 A- Z, {# v4 Q8 @$ j
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);0 Y# w" ~  n& T! o
  8.     servaddr.sin_port = htons(port);
    ) R( ~* e+ _( o# h4 z; }1 D
  9.     int ret;
    1 b# W) Z: t+ Z. V4 k+ ]! ^
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)2 ]+ ~$ }* h2 d3 q
  11.         {
    , M* i* i1 d# _- E7 i% C
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);0 N- [0 Q1 b* s  Z: f
  13.             return -1;) P! i: E- p1 D8 H9 x
  14.         }
    2 e% ?4 X) ], T$ d- P6 L
  15.     int on = 1;
    % c; J: F0 R2 B$ I# _
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
    7 A# a: ?! E: j5 J6 H1 r' Y# x
  17.     {
    # j8 @8 t9 w2 v$ }( V" D1 Q* i
  18.         printf("setsockopt error\n");
    3 c) D8 r1 d5 B+ z* k& t) |
  19.     }6 T" y3 u5 u7 u/ W
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    ; {9 P: _$ L4 H/ R, R
  21.     if(ret == -1)
    % L+ K1 Z7 M) ^7 S8 m
  22.     {
    % B, M2 ~) T3 b" b; N
  23.             printf("Tcp bind faiLED!\n");
    ! e7 A- V2 [0 d/ q
  24.             return -1;  a  Z$ N( h: l4 z& m' ~) O
  25.     }( `0 n1 f1 v. ]$ H9 M2 d- t4 S( i) t2 }
  26.     if(listen(*socket_found , 5) == -1)6 I: A! ~( x% P+ {; f6 V1 h
  27.     {
    * ^7 f7 z2 }1 e0 K" e& t& P1 c6 A
  28.             printf("Listen failed!\n");) ?  z% ]& r" l0 I; W% j
  29.             return -1;) L+ g4 W2 u; O! m& a, e; F
  30.     }$ s8 E' k$ Q  q1 L5 ?
  31.     return 0;3 x' y) `8 R  y. {+ U! 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);
    ' p: P/ B$ b; @% [% u
  2. void * Thread_TCP_Web_Recv(void *arg)
    " X' D( ?% k( X6 ~) T. [" J( C
  3. {
    ) h' f" i, s6 K5 F9 {( e) S
  4. 。。。
    & F% O; S6 I. m: u1 ?
  5. while(1)
    $ N: b% d) g7 m0 [1 p) {
  6. {
    3 k$ E+ P+ z6 E5 O5 T. E, K
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    9 J$ Y- F* F/ ~3 A8 Y' E' w/ O( i7 v
  8.            printf("fd_socket_conn = accept()\n");
    , T" q6 y6 c8 L: b# A
  9.     。。。
    % r+ K8 \- h9 w: p
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    . R0 `& I0 q2 ?# p5 s* |8 z' E1 S
  11. }3 Q# ^9 _+ x* c! E# C. g$ e6 W
  12. 。。。
    ' k0 ?: A! h! m+ R3 X2 U
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);
    # A  J2 {- c9 J1 p7 \4 X5 F' D
  2.     pic_tmpbuffer = pic.tmpbuffer;" \- P  R3 {6 J3 K5 @+ \
  3.     pic.tmpbytesused = buff.bytesused;
    9 {+ R* d: u& z8 h0 c
  4.     pic_tmpbytesused = pic.tmpbytesused;
    1 L) i( g; ?9 d# R9 V9 ~
  5.     pthread_cond_broadcast(&pct);& S, }0 C/ l: W/ D4 l6 |% W
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;5 ~' m& l8 P. H, G+ l, Y+ K# `
  2. pthread_cond_t pct;
    ) i7 t; \) ]2 q1 y$ n0 j) D1 N
  3. int main(int argc, char* argv[])
    9 r: V/ h5 ]/ @4 W* Z# _
  4. {
    * }) H4 E# u4 u5 P; @6 k3 K
  5. ...
    4 v; I8 f  {4 j! g! Q: A
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);9 R; V+ {" G( I% ^1 ~0 X7 D
  7. pthread_mutex_init(&pmt , NULL);- h; N  `/ ^* M. c/ f( F
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);$ o5 u# K6 a- y' c7 X
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
      y0 g6 D- @% O) H, C
  10. ...
    3 n4 F% ]+ ~" b" N2 |
  11.     while(1)
    " o& G: U- W1 Z* J
  12.     {
    ! O8 M, }/ ^8 h, ?$ @* p
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    " P1 |1 r7 \( j& J% K2 i$ `& \
  14. ...8 `8 f! X# f" T' q  K1 K
  15.     }: B5 l5 g; ^' T5 D% |) c& t: w/ v# D' S
  16. ...! Y: y* F* ?0 s
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">
    1 X9 ?3 i9 K% I/ ^( \( 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" \# F: r$ l0 ?, X; F; C% Z
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    " v) [. O" O( z$ \; h6 _
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
    1 z. ?# u6 T/ j- q! Z; ~
  4.     "Pragma: no-cache\r\n" \
    # J3 g/ c  a9 A# z
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    & D: ]( W; y3 w5 M- Z9 ^& X$ T" w
  6. #define BOUNDARY "boundarydonotcross"1 j3 i1 s) P( {
  7.     printf("preparing header\n");; P! k( n7 m: E9 b# p; V
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    ; x, i' Q  b. }) c3 \$ T
  9.             "Access-Control-Allow-Origin: *\r\n" \
    $ e. M7 g+ ~/ ]2 M8 b4 S
  10.             STD_HEADER \
    + s; R, K8 d8 a* h( Q
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \9 a1 Y9 D5 t; t1 C
  12.             "\r\n" \
    ( g! P; {; C2 {/ d6 g# l3 Z/ d
  13.             "--" BOUNDARY "\r\n");1 R' Z2 ?5 ]' ]8 K
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    8 y6 F  E' k* b) B
  15.     {
    ; k' H! Y5 P; Z7 M/ ]; f
  16.         free(frame);. k; K1 ~4 E. t5 |+ T' V
  17.         return;. k. u$ `& l2 t% `6 K$ 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" \8 {5 ]  `2 F7 T
  2.                 "Content-Length: %d\r\n" \2 g$ w* ]- P0 z
  3.                 "X-Timestamp: %d.%06d\r\n" \& `% R0 i6 {7 O) b$ L% j5 s
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);" \2 P3 o. o' R- k0 W" Y
  5.         printf("sending intemdiate header\n");
    * P0 |0 m2 p% n9 Q6 n5 h
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    . N6 a0 G# B  }1 z3 R* c0 B
  7.             break;- ^2 ^( _2 X; F2 m$ p+ D/ K
  8.         printf("sending frame\n");9 k- D, Z* e: D; E; j6 j: Z1 B
  9.         if(write(fd, frame, frame_size) < 0)
    6 D0 u  _. W# M+ E9 U' o+ I
  10.             break;
    ( f+ l1 F. H0 ?4 O- `
  11.         printf("sending boundary\n");  m3 g# P# Z  u! V1 b  @
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");: A9 d* ?4 [: j+ D
  13.         if(write(fd, buffer, strlen(buffer)) < 0)/ j: c6 D+ ~8 q# x
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。

4 J& w9 n7 {3 D* ~/ D

) @9 ^4 |6 M8 a6 T4 s
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
2 }. }& X! g4 r
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    6 Z+ ?$ ^& _9 B2 F2 u8 Y/ N: L
  2. {# t) q2 c. A$ _) k
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);3 o5 z7 _. @9 H, M* m, T( a2 p7 P+ T
  4.     if(*socket_found == (~0))" g* D1 y* N7 |; P1 I' P
  5.     {! j6 B/ @+ L" T) p& e
  6.         printf("Create udp send socket failed!\n");
    % K2 j: `2 o" f  k0 W
  7.         return -1;) G8 n8 s9 l4 Q# ~) O
  8.     }' W) N+ V+ P$ `- @, Q7 ^
  9.     addr->sin_family = AF_INET;& z! y1 r6 i+ h' L# s$ r" t: S
  10.     addr->sin_addr.s_addr = inet_addr(ip);, e* n0 J; {: y
  11.     addr->sin_port = htons(port);; C# A# E8 V1 T0 _4 Z4 {
  12.     memset(addr->sin_zero, 0, 8);
    * M( ]2 T% f6 d# N4 X% y+ P
  13.     return 0;
    % [7 Q5 u+ K0 n4 }* A
  14. }
复制代码
; j  P; b; B/ N/ m9 ~: U) u' J
4 B: {# W+ i1 g6 l: k
而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
: Q, F$ J! Q3 `# s2 X3 }" ^; o" U2 z$ E) U+ l* I, l

1 }8 e% x1 Z% l7 v. `) N$ V3 y8 Q
  1. while(fend > 0)
    3 G1 O* r( K+ R5 P
  2. {
    " _7 D# _2 [3 @  c, _2 m5 e) p
  3. memset(picture.data , 0 , sizeof(picture.data));- i1 r5 c0 @" i5 a& k1 A% W
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);$ H0 I- ]4 {) O* M' z. I+ e) o
  5. if(fend >= UDP_FRAME_LEN)
    ' V% a! y" m; w+ A& a5 {
  6. {
    3 z* v$ Z% L$ F% D
  7. picture.length = UDP_FRAME_LEN;
    ; b' q/ z; m7 k$ m; r) V1 O* M- n
  8. picture.fin = 0;$ M; O! {: ]7 P8 f6 r8 \6 \
  9. }. z9 z$ u. u1 X$ i% {- A8 L
  10. else. N( x3 p$ N, s: w" ?8 u2 ^
  11. {+ b+ y# s% E6 N$ D
  12. picture.length = fend;! V( M$ I2 M% V( I
  13. picture.fin = 1;, P0 o; p& b" @, k  o
  14. }
    . w/ R* p- O9 Z, c! o4 ]8 k
  15. //printf("sendbytes = %d \n",sendbytes);
    4 x8 \- n7 m, }+ L
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);" I' z7 n2 W" e! {$ _, H. y
  17. if(sendbytes == -1)* H! u+ }  F, c" I( t* @+ X6 ^
  18. {. W6 c& U4 g1 I
  19. printf("Send Picture Failed!d\n");$ O1 Y, x" m; M$ }
  20. return -1;- R; ]& F! y7 v
  21. }
    % o7 m) Y" Q1 h3 x" {7 I% W% Y
  22. else: @" \" `7 a; c9 V4 c7 C+ r9 ^
  23. {
    $ S' ?! t6 O( l
  24. fend -= UDP_FRAME_LEN;- ^9 D$ v- V2 K& E! N
  25. }
    % C/ e9 y) W* ]: z( Q
  26. }
复制代码
, {- a9 Y  S' @0 D% Z) y2 ]

! v& s' M# G1 E1 C$ r) F# o& q

5 a0 A" D/ k1 m# R' f+ H

& |9 }/ E" Q# p/ j: XiMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-4-28 04:06

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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