嵌入式爱好者

查看: 11835|回复: 1

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

[复制链接]

48

主题

55

帖子

304

积分

扫一扫,手机访问本帖
发表于 2022-1-27 10:54:18 | 显示全部楼层 |阅读模式
本帖最后由 飞凌-marketing 于 2022-1-27 11:00 编辑 $ c' u2 k$ g2 {6 w% Q5 B- n

8 j! \2 F. Y; u1 `/ m


0 m2 `: L* F2 A9 z% J/ H: R

作者|donatello1996

来源 | 电子发烧友

题图|飞凌嵌入式

iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
0 O( p2 D. q6 S3 d- i7 l2 m6 Z* z9 R( b6 D

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

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

: T- w. w* a! B* C9 |

$ @9 `! {' j- C# d+ a4 ^' Y* G

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

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

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

    & `5 A0 S$ R7 Y! q5 B5 o% X* P

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

: y3 }5 m9 m# c7 B! B! L+ q& Q
一、HTTP网页服务器* H1 G( N; U: D

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

  1. int TCP_Server_Found(socklen_t* socket_found , char* ip , int port)
    - q; E, v8 P6 x! }1 |) _, ~
  2. {) i" Q$ H' i9 M: j7 f
  3.     struct sockaddr_in servaddr;7 j. v; `/ Q9 O' X6 Z3 I
  4.     socklen_t addrsize = sizeof(struct sockaddr);! s4 ?% q6 Y* {, n
  5.     bzero(&servaddr , sizeof(servaddr));
    % `& h* C& o- }& q8 L2 X
  6.     servaddr.sin_family = AF_INET;
    % r6 d7 D9 B+ v. C: }
  7.     servaddr.sin_addr.s_addr = inet_addr(ip);- f4 H& Q8 _( O0 Q6 F
  8.     servaddr.sin_port = htons(port);6 g' A. d/ H1 r% k4 p6 a, {
  9.     int ret;
    - [; m! g: o7 H% q
  10.     IF( (*socket_found = socket(AF_INET , SOCK_STREAM , 0)) == -1), a. i% y6 P/ }7 T1 d
  11.         {
    . H7 ~$ @2 z4 q/ s0 d8 g, F! P
  12.             printf("Create socket error: %s (errno :%d)\n",strerror(errno),errno);3 K! V0 b3 [. U$ E# A# m: [8 a# E
  13.             return -1;
    . R7 N  U  D1 y1 F" y
  14.         }
    " \- j# y6 l  Z* J) w6 \6 l# c3 J  T
  15.     int on = 1;( n, n/ \" z( {4 q! C* [
  16.     if(setsockopt(*socket_found , SOL_SOCKET, SO_REUSEADDR, &on, sizeof(on)) < 0)
    ! c6 b8 t& M* l! v
  17.     {
    8 V+ _6 H2 ~& E$ v
  18.         printf("setsockopt error\n");3 u* `7 T5 o6 L$ k  ]) t
  19.     }
    8 Z% l0 p+ \2 U/ {
  20.     ret = bind(*socket_found , (struct sockaddr *)&servaddr , addrsize);& i3 G- x& p  f: ?; U
  21.     if(ret == -1)
    + ^  o; A1 j: ~+ l3 j4 ~  P
  22.     {
    ; q: \8 B0 B" k: i9 Y
  23.             printf("Tcp bind faiLED!\n");
    6 b, i, N/ [( q5 ?( e
  24.             return -1;6 J: t: p% s) m& `' U
  25.     }
    * o- k+ H' _% B3 j
  26.     if(listen(*socket_found , 5) == -1): Q/ l0 V6 W" q, i6 s+ [/ {
  27.     {; p* o% }. h: L& s
  28.             printf("Listen failed!\n");( n1 u( e0 Z2 T
  29.             return -1;
    $ N7 R( G. F) K9 [6 V5 t
  30.     }
    " L# B4 B  L, n  j; T/ W
  31.     return 0;
    + [& e4 F9 @  n6 \
  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);
    ' n+ W) u" C3 @" ~9 U
  2. void * Thread_TCP_Web_Recv(void *arg)
    ) b! i# |! w0 Q7 T! A
  3. {
    % {( L4 B( x) ~! L) I
  4. 。。。3 d- b: i4 B. R2 R
  5. while(1)# W+ L2 v$ ?( G
  6. {3 u4 W3 b7 w5 M0 E
  7.             fd_socket_conn = accept(socket_web_server , (struct sockaddr *)&sockaddr_in_conn , &addrsize);
    % i  k9 i, J9 c
  8.            printf("fd_socket_conn = accept()\n");$ o) Z% `" S3 Q, y: @
  9.     。。。" }- U: ]* Q6 F3 p' u: `+ [
  10.     recv(fd_socket_conn , recvbuf , 1000 , 0);
    / N0 R$ {4 g4 W3 h
  11. }
    8 s6 j3 a, s5 |9 R( o
  12. 。。。
    7 t! D2 I, _/ E0 X* t3 S
  13. }
复制代码

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

  1. pthread_mutex_lock(&pmt);& s0 n3 P9 M% e9 W
  2.     pic_tmpbuffer = pic.tmpbuffer;# [) [) H% f) z. X! [
  3.     pic.tmpbytesused = buff.bytesused;( k4 Z" V1 ~% C- M1 ]
  4.     pic_tmpbytesused = pic.tmpbytesused;" R! F( }' i, X5 F
  5.     pthread_cond_broadcast(&pct);) z/ ~# X: z8 L7 E9 s+ k! P
  6.     pthread_mutex_unlock(&pmt);
复制代码

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

  1. pthread_mutex_t pmt;
    3 h* L, X  q, N) E( f: S6 L
  2. pthread_cond_t pct;
    8 E: K. N" N0 P% ]4 B% l/ I! B
  3. int main(int argc, char* argv[])) _* {  m% P$ J* w) a  Q. \7 @4 k; u
  4. {/ k/ U' p) s; V* Q
  5. ...
    6 p! U4 |. a; I1 D# \1 ^, w% S' @
  6. TCP_Server_Found(&socket_web_server , (char*)argv[2] , PORT_TCP);0 L) q  X) N* E/ ]
  7. pthread_mutex_init(&pmt , NULL);
    . b$ c6 t% P. Q$ u
  8.     pthread_create(&tid_tcp_web_recv , NULL , Thread_TCP_Web_Recv , NULL);8 _5 x& Q2 C; d
  9.     pthread_create(&tid_tcp_web_send , NULL , Thread_TCP_Web_Send , NULL);
    ) v) b' y1 x- W' n/ `% Z( R
  10. ...  p: N: V/ `9 M
  11.     while(1)3 U1 U# O3 T/ l6 {7 `
  12.     {
    6 _/ v/ z' A2 r8 e" g4 L
  13.         V4l2_Grab_Mjpeg(false , MJPEG_FILE_NAME);
    + ?/ f; \1 {( s" q! A9 \/ f, Q
  14. ...  H# e: Y$ }+ R. |% f
  15.     }
    $ P9 G5 C' w  ]/ T6 j/ C- s( k$ a  O
  16. ...
    ( x. l: ^# u6 [- R! Z) P
  17. }
复制代码

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

  1. <p style="box-sizing: border-box; border: 0px; vertical-align: baseline; line-height: 26px;"><span style="text-indent: 32px;">' [: z6 U5 G$ s" Z  t6 b* a. b
  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" \, k( B' `' J" ?- ]. _( X8 ]: k: G2 G
  2.     "Server: MJPG-Streamer/0.2\r\n" \
    4 s' k9 o4 G5 l' d
  3.     "Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \  t, g0 L: |9 j  W6 h, U4 v; d
  4.     "Pragma: no-cache\r\n" \3 Y' q! S6 ]0 d+ B4 a  c+ P6 P
  5.     "Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"- {8 M# @7 b/ y
  6. #define BOUNDARY "boundarydonotcross"
    - |4 {# ?  I% K+ Y3 g5 Q4 v9 O
  7.     printf("preparing header\n");; Y% q, ?. V$ j
  8.     sprintf(buffer, "HTTP/1.0 200 OK\r\n" \8 C- ]% J2 |1 @; i% o% G4 v! Z8 p
  9.             "Access-Control-Allow-Origin: *\r\n" \
    / B3 q* \7 J7 C, ]
  10.             STD_HEADER \
    ! r3 g+ _, }0 W1 u2 E' c# g
  11.             "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
    5 v# H3 a& b4 |8 Q
  12.             "\r\n" \
    0 F: R5 t0 t( b8 y0 l/ e
  13.             "--" BOUNDARY "\r\n");  H8 b1 V" Z  q* S7 l
  14.     if(write(fd, buffer, strlen(buffer)) < 0)
    7 u7 \8 w( }% Z2 L
  15.     {
    ) U$ ]: |& Z! `' S; |
  16.         free(frame);
    * q% |, W8 [, D
  17.         return;/ [$ L3 A% J$ H, x0 Q$ I4 h
  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 u6 y/ T) _# y& R
  2.                 "Content-Length: %d\r\n" \$ T% `, g0 f) t) ]
  3.                 "X-Timestamp: %d.%06d\r\n" \# Y* n" _! q8 N
  4.                 "\r\n", frame_size, (int)timestamp.tv_sec, (int)timestamp.tv_usec);; G' U9 P0 y' `: |
  5.         printf("sending intemdiate header\n");
    - k2 `3 {$ F0 [% w
  6.         if(write(fd, buffer, strlen(buffer)) < 0)
    9 S, O" O' m7 L) c1 @. ]
  7.             break;
    % C4 U( \) Y3 f7 X
  8.         printf("sending frame\n");: U/ r3 Q/ t; t. S/ N
  9.         if(write(fd, frame, frame_size) < 0)
    . l8 o: }& G# d- y3 C) ?" v- \
  10.             break;
    0 X( I1 e+ J0 q1 P0 j. w; s
  11.         printf("sending boundary\n");1 y' q5 @: v- |: V" p$ Z5 O2 `
  12.         sprintf(buffer, "\r\n--" BOUNDARY "\r\n");+ B4 @& [5 e' o+ ?
  13.         if(write(fd, buffer, strlen(buffer)) < 0)
    4 U2 P! u' R/ C6 I
  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指令,从客户端使用者角度来看的效果就是网页一直在等待。


9 @) q/ [: ?7 u* `$ f" F* K0 T

' G% \! C) V& ?7 H
二、UDP上位机UDP发送操作,同样需要先建立UDP Socket:
6 X' ~/ x" w% G
  1. int UDP_Send_Found(socklen_t* socket_found , struct sockaddr_in *addr , char* ip , int port)
    8 ], H, R5 a& m) {
  2. {
    1 B4 I" I& o+ f* l6 g9 r8 Q/ y8 ~
  3.     *socket_found = socket(AF_INET, SOCK_DGRAM, 0);
    7 H0 k; Y% Z* E
  4.     if(*socket_found == (~0))
    % v* C" q/ c# G0 L0 K( a
  5.     {. t& N  p& Q( W' J3 Q
  6.         printf("Create udp send socket failed!\n");
    & }/ p# p3 G; a6 K/ `6 a( b/ C
  7.         return -1;* k* U0 |1 ]/ F/ T  G$ [
  8.     }% t7 f# `- @% \5 @
  9.     addr->sin_family = AF_INET;
    6 f; \: U' C/ I
  10.     addr->sin_addr.s_addr = inet_addr(ip);/ I9 ^8 M" I) E0 o) W; h% ]1 y
  11.     addr->sin_port = htons(port);( k* C7 P# ?% e5 S: P1 T/ Q1 W
  12.     memset(addr->sin_zero, 0, 8);$ x* h8 e: H3 }3 i, P
  13.     return 0;! h; g" k( X) K4 v
  14. }
复制代码
3 X& B$ y& O! O3 }  [4 {( W

) \' L5 b- A) D2 n$ ]2 d' C* ?而UDP文件发送则要比HTTP发送简单得多,只需要将文件切片,每一片为固定长度的UDP帧长度,逐帧发送即可:4 B7 O/ k" G# {7 }. `; t

2 v( {: q+ H: ]3 e' `) @! z2 `; y7 Z3 D: C
  1. while(fend > 0)# M8 P5 K  s% ]4 H- D& ?
  2. {+ w7 {" }- ]2 M% i
  3. memset(picture.data , 0 , sizeof(picture.data));: [! \2 [* C0 J+ x5 }8 e
  4. fread(picture.data , UDP_FRAME_LEN , 1, fp);
    $ Z; @; H, T2 w% }" ]
  5. if(fend >= UDP_FRAME_LEN)+ P% r: A/ O7 f$ Z, D& R
  6. {
    : w3 E& m& R; M) o0 H
  7. picture.length = UDP_FRAME_LEN;0 H4 Y+ e9 T; M! i" P* A
  8. picture.fin = 0;0 h( Q, D: X% l/ E' }# R! g) a
  9. }9 J- C7 n9 l% l8 I, ]
  10. else
    4 @' s8 R6 }' f3 Y! X6 j! L) o
  11. {$ M, s* f& e/ M/ i  t
  12. picture.length = fend;
    9 |- |) ^' f) m
  13. picture.fin = 1;  f( r0 `5 c6 K" j! ]) R+ \
  14. }
    ' \2 i3 u7 k' p$ ^
  15. //printf("sendbytes = %d \n",sendbytes);
    $ X2 F1 O/ c  d0 u
  16. sendbytes = sendto(socket_send, (char *)&picture, sizeof(struct Package), 0, (struct sockaddr*)&addr,addr_len);, y/ `) _5 u) y9 G+ y2 F
  17. if(sendbytes == -1)
    : N2 _% M0 P1 t$ t% D2 J* H
  18. {
    ; T# B' b; d" U6 C/ ]  ^
  19. printf("Send Picture Failed!d\n");
    ( X( }0 R7 {# x0 B# y
  20. return -1;7 D$ k! L5 M& d) A
  21. }
    4 n& N1 L7 ]( N( n  L% S
  22. else) [" Q4 E8 o3 p9 e8 g
  23. {# e; ?- F  B" A. R5 t2 l% ], X( x3 R6 j1 ^
  24. fend -= UDP_FRAME_LEN;1 ~, @7 t* T+ B1 ~5 H
  25. }
    8 l# ?) L! j8 X7 `! w- b
  26. }
复制代码

; S9 y/ W0 k# G
" |8 f' \& z" B' j) J. V' w! H


7 w" b% Y6 q) L" w( _, R2 g* c+ E: \: s/ C- n) L8 D
iMX8MPlus 核心板: https://www.forlinx.com/product/136.html
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2026-4-20 09:13

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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