嵌入式爱好者

查看: 10250|回复: 1

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

[复制链接]

46

主题

53

帖子

296

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 . g9 ~2 \* Z3 R- W! ~8 ]9 w2 k1 z
8 q% Y/ v6 i* X+ ?! a, `


; T0 l+ f7 g. L" \  ~+ q

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html7 ?8 N* f$ `% q8 I  q# [
6 S9 L6 g3 I9 Q- V0 }6 c( |/ {

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

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


# |( R4 D9 M/ v" V& }) ~6 J0 p

* n2 X' Q' f/ [$ o* U

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

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

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

    + P. N& U+ v$ i+ }

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

3 h' z: [: ^4 K
一、HTTP网页服务器) D$ n8 D% i& K% A- L( K. H: @8 N

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    5 p3 Y! [/ O2 Y& M2 T
  2. {
    - k: W  i9 h9 A# d$ k1 d' g
  3.     struct sockaddr_in servaddr;
    1 K- |: y2 H- z% i
  4.     socklen_t addrsize = sizeof(struct sockaddr);9 y! _6 i+ G: b* @
  5.     bzero(&servaddr , sizeof(servaddr));! S1 O! c: N& g* O
  6.     servaddr.sin_family = AF_INET;8 w/ \% A/ t" K
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);% r! ^7 B1 y% Q2 s/ {
  8.     servaddr.sin_port = htons(port);3 e5 ~$ m# Q1 F2 d( |
  9.     int ret;) O( h+ j0 u& l& Y: C1 g
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1)
    * t' B; U0 E% {* ?$ n6 N9 ]
  11.         {
    - U& t( e* @) `2 N, Z) Q
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);6 d# z! b8 i* F7 K, T+ ]
  13.             return -1;
    ; n, O; P# W( c* P- @
  14.         }
    & c8 A0 X  F8 S1 p+ d
  15.     int on = 1;
    2 M0 E% U3 q7 W
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)4 O( H/ i* Y6 `! ?, b/ {) d
  17.     {
      b# M; T+ |6 }* j% B7 b
  18.         printf("setsockopt error\n");) Z: H2 M4 ]6 N3 ~) {  o* }
  19.     }; U3 {( M% `7 L( S5 c# r# Y/ A
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);
    3 @6 n7 i, N* ?, {- E, b
  21.     if(ret == -1)0 j8 e; l4 e8 _: J$ V
  22.     {5 X6 {) T9 j& g" d
  23.             printf("Tcp bind faiLED!\n");: Q8 j; M$ ~! C- E  x3 [
  24.             return -1;
    , @+ J, z, _) @4 y
  25.     }5 t5 K( ]1 C$ U4 v. P; C
  26.     if(listen(*socket_found , 5) == -1)
    3 W% ^! B+ }; X* [6 X+ }: v; B
  27.     {* y0 A" _( t6 R# C; V. X8 Y
  28.             printf("Listen failed!\n");
    * z- e! C1 F3 A3 i3 k) q
  29.             return -1;
    / q* S( X. F* E9 b2 J. s, \: z# X3 q
  30.     }0 r+ r& ^& m: x6 L$ Q
  31.     return 0;
    " X# O: w( Z9 s6 Y0 G) ]7 {
  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);9 N' D+ H! `; l1 {  b5 q
  2. void * Thread_TCP_Web_Recv(void *arg)  ?8 B, B/ D  [% ]2 }$ U4 ~1 m
  3. {
    2 X8 A; D+ G, M4 o( a
  4. 。。。5 C0 h0 H. _) ?) F0 s! r+ |% a
  5. while(1)7 t8 N, }' V" a
  6. {
    / S" b$ D* m4 t- ]- e
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    * n$ K0 {% N$ w! H
  8.            printf("fd_socket_conn = accept()\n");
    0 ^+ s7 q" t  O6 p
  9.     。。。
    & Z0 x1 J7 x7 M& `$ b7 H& L0 W+ A
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    - R* q8 N5 X, V* K5 h# y* R
  11. }
    - w& ?% m% V6 E5 I" b( k. S! @
  12. 。。。9 z3 H2 e! s+ V0 N
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);- P- O) |* C) E
  2.     pic_tmpbuffer = pic.tmpbuffer;0 c' l9 `( t+ j8 J
  3.     pic.tmpbytesused = buff.bytesused;/ B5 T1 A7 k# S/ r8 m  `0 O( F
  4.     pic_tmpbytesused = pic.tmpbytesused;) i; M: ?9 S2 j, h' W& I
  5.     pthread_cond_broadcast(&pct);; x1 |4 r% K) \' A
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    0 }6 T* R& D* W
  2. pthread_cond_t pct;* _$ ~0 M$ o( Z, x+ I3 I& i
  3. int main(int argc, char* argv[])
    % G( h( y6 k  I
  4. {
    ' L+ o& y; B" `3 U8 R
  5. ..., l$ o! f/ q. E( ~
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);/ `0 E1 N& D: }8 O& }( }5 e' b
  7. pthread_mutex_init(&pmt , NULL);+ i. i1 U. d: N0 ^8 V( A( A
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);* p- @- K7 R- v# C7 a" U
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
      u+ o( u" @$ v; A4 V
  10. ...
      G& O* M, f: E4 y6 q9 h
  11.     while(1)& Y/ I! b! ?* l' W1 g' d
  12.     {
    ' t/ U1 G+ @  h) \, h0 m; l
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    7 M* [; {- h, m5 J6 c0 ]- Y# D4 D2 G
  14. ...
    ' x. R( p2 U3 G7 W
  15.     }. b/ c0 c4 ~" J( t6 ~7 j, m( z4 v
  16. ...7 s/ D! K" e) @+ r) \
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">3 k7 s/ B$ C  P8 K
  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" \
    4 H2 t0 u. P; u. [
  2.     "Server: MJPG-Streamer/0.2\r\n" \! ]8 H/ A" B+ |! A7 i
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \! R4 i1 O+ _& Q" H; T! L
  4.     "Pragma: no-cache\r\n" \
    . ?& `6 |( M0 j0 m9 t3 V
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"
    4 a$ V& K0 k& L, i5 B' |" |% q( a
  6. #define BOUNDARY "boundarydonotcross"
    * r8 V1 _6 v0 {, P/ U) K/ h, G5 R9 M
  7.     printf("preparing header\n");
    ! @8 X, D5 s6 W" c' y  y; G/ [
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
    - I5 O! r0 r! v$ V1 B
  9.             "Access-Control-Allow-Origin: *\r\n" \
    1 _! `5 Y/ O5 g/ m! K, S7 W9 _
  10.             STD_HEADER \
    0 ]  t9 O( \/ v* c7 Y! Q& W) \
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \% P% r- E' y) k. P; A
  12.             "\r\n" \7 t( f1 B0 e& l' e
  13.             "--" BOUNDARY "\r\n");
    - k9 H& [# Q  u6 ~8 B6 t
  14.     if(write(fd, buffer, strlen(buffer)) < 0): g" t8 j4 `$ x9 b3 `2 u+ ]
  15.     {
    + g. }# l$ z$ x* i
  16.         free(frame);7 `0 e$ \# Y6 x) Z& r
  17.         return;5 L, C, u* Y6 l0 k
  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" \
    9 u4 y8 L0 c' x0 N$ r
  2.                 "Content-Length: %d\r\n" \
    6 v( O0 P* I) ]0 j
  3.                 "X-Timestamp: %d.%06d\r\n" \
    0 R0 m1 Z1 \2 e4 s
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);+ E/ y3 x& S* z- D
  5.         printf("sending intemdiate header\n");+ m4 B. @+ Y7 f5 o) V3 A6 m
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    ' G+ ]7 Y. d/ m9 T" D4 @
  7.             break;
    ; N- ^* j- N8 o: Y5 |! Z) ]- E
  8.         printf("sending frame\n");
    * Y4 i/ k, t# O6 F
  9.         if(write(fd, frame, frame_size) < 0)& e. m4 {3 l, s& m1 h
  10.             break;3 t8 p* N- |3 F& @) n3 r  B7 q
  11.         printf("sending boundary\n");
    ; |% A8 K4 g/ R# c" u5 k
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");
    4 p" x# S$ M* d- H! Z# r
  13.         if(write(fd, buffer, strlen(buffer)) < 0); f" h9 T" @0 w6 ]1 [
  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) U9 n2 o) n' l3 f3 C6 f+ N* K

0 Z+ c7 p+ p6 I3 u' c2 M
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
8 C4 b$ \; C$ N
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)0 q+ p: l4 ]5 N1 e7 O
  2. {
    3 @* ?+ f* M; E8 c& T- c% G
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);; H/ q! i$ F! I# w
  4.     if(*socket_found == (~0))
    * P1 F+ @4 ~" Z! i) H) f0 R" G- x
  5.     {
    - S1 ^, v! i& g
  6.         printf("Create udp send socket failed!\n");" T- e) a: w5 w4 N& r. O5 X6 `
  7.         return -1;5 q7 ?  p0 D' r0 P
  8.     }
    6 ]# B2 b" K% ?9 c
  9.     addr->sin_family = AF_INET;6 }. N* b* ~9 P  O0 h" j1 Z
  10.     addr->sin_addr.s_addr = inet_addr(ip);1 _1 `) h) ]  S1 Q! ~
  11.     addr->sin_port = htons(port);1 \% s& D/ G9 ?1 o  c" P  o
  12.     memset(addr->sin_zero, 0, 8);4 f1 a) t7 l# [- W3 D2 ^
  13.     return 0;/ j2 l* C' H' s6 ?% A
  14. }
复制代码

$ T( a9 M. h% `" V' [
0 |1 O- O% y" l$ {/ Q% }$ @而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:
; f& {7 K; V' y8 t: B' a
9 @4 K( C- V, U# N0 e/ r
5 N2 _9 J0 E! H9 R
  1. while(fend > 0)( B7 {& H  a. g' d
  2. {
    / l' D7 q4 g. {4 _. D" e
  3. memset(picture.data , 0 , sizeof(picture.data));3 [7 z: R2 \, z
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    ; J+ A8 _4 g7 D2 w, ~
  5. if(fend >= UDP_FRAME_LEN)
    1 z5 `3 b0 G% U3 r$ T
  6. {0 @; E% ?. C$ r  p0 V5 [) ^
  7. picture.length = UDP_FRAME_LEN;
    ) u* J5 m. A7 D  C
  8. picture.fin = 0;8 H$ V! _& L# t
  9. }
    8 n  d( b0 b3 n; N" k& u- _
  10. else' f* [: @% l" q! J9 B$ D1 p" T
  11. {
    & [1 E+ \& S! p1 D+ D5 L/ y
  12. picture.length = fend;3 O0 D, g# P* J. F$ x* L
  13. picture.fin = 1;& k% [3 P' s4 t
  14. }6 [' ]# m$ N$ y: p5 ]$ k" U1 w
  15. //printf("sendbytes = %d \n",sendbytes);  D5 l+ M% r+ @( [. T: I( ~
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);. \" ?1 B& [: y5 ^" h
  17. if(sendbytes == -1)& p/ K9 d6 {8 D! K6 a6 |: x
  18. {
    . f% b$ {# I/ k
  19. printf("Send Picture Failed!d\n");; {( n+ W6 x/ h, W9 S& C4 w$ E
  20. return -1;
    " [2 B6 t0 G" a" V1 }5 v+ W' L
  21. }7 Y6 W- t; F3 O: E- a
  22. else" ^7 U0 w  N2 F/ o4 D" q
  23. {
    " b" ~6 w/ ], z
  24. fend -= UDP_FRAME_LEN;  t2 k/ Y% D% N' B# ~: J  S2 B6 M- I0 x
  25. }. |, l' c& v) T
  26. }
复制代码

9 O2 R; {" R" E# M: Y, p
0 {  o9 R3 a' n3 L

- V7 v/ I5 {- Y) ]( m5 p( V
# M" v4 k( w7 @5 [! y0 a
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-11-23 02:53

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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