您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14516|回复: 0
打印 上一主题 下一主题

[swoole] swoole视频直播(记录用 未测试)

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码, O2 L/ [* p; M- i
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);* Y* {3 a# a8 F& m! M, K
  2. $client=array();
    ; g. o+ r3 C8 _% v& \1 a0 r
  3. $serv->on("open",function($serv,$req)use($client){& ^; M% r% Y3 V8 T
  4.         //echo 'connect'.$req->fd;) R# O0 L: U  h) B) R3 t9 f5 O
  5.         $client[]=$req;
    6 Z+ R/ G4 [2 K! E5 E4 r
  6.         //var_dump($client);
      U: v! I: w9 Q: ~/ q  ]" P' @0 g* `: I
  7.         $serv->push($req->fd,'aa');2 C6 B) ?" `# M% l1 l/ b
  8. });2 [4 C$ _$ y( a9 h5 y

  9. 8 Z5 e% D: T4 a9 t/ _
  10. $serv->on("message",function($serv,$frame)use ($client){# s2 E8 ]2 v3 a+ F
  11.         /*var_dump($frame->data);
    4 ^% X8 N* C% Z/ h/ W7 Q) O! y4 Z
  12.         foreach($client as $key =>$val){: ]2 t- M( b; o; Z9 J
  13.                 $serv->push($val->fd,'aa');" S+ h+ ^/ s, d5 t1 k
  14.         }*/! b: K2 b2 r' Y# K
  15.         $client=$serv->connection_list();1 K! ?8 I0 A9 t. I* a
  16.         var_dump($client);* T3 g$ ~$ H; h, q* Y# ?. \9 ^3 S
  17.         foreach($client as $key =>$val){! \1 ?- o+ x" [
  18.                 if($val!=$frame->fd){
    5 U7 _- s- G- ~6 ~3 d/ ~
  19.                         $serv->push($val,$frame->data);4 x$ Y: m, d8 @7 P. ^& O/ K. s
  20.                 }; k* C: \/ }7 Z1 i
  21.         }
    3 u3 z" B+ H5 ~5 H4 d
  22.         7 Q& l# E- c" \$ R
  23. });
    , S6 \) `- g4 @7 Q2 z8 ]. w
  24. & P& O& T$ D6 Q( j
  25. $serv->on("close",function($serv,$fd){/ V* z8 O& j5 B3 s7 ]5 `, ^
  26.         echo 'close';. K8 Y7 s9 l1 ?2 k, o
  27. });' B# w7 B$ P9 F, z9 E' c! m. d: P

  28. $ u$ J. R; R: p$ M5 i- B2 J
  29. $serv->start();& F, _% ]4 @5 d5 h6 i, C0 C

  30. $ h4 \7 l! R! j/ E! v
复制代码
主播客户端
" X  k0 j1 J* L
  1. <!doctype html>
    6 `4 q) P+ G6 S5 s0 [. Y
  2. <html>
    / x: S3 F  @# d* T/ S8 X
  3. <head>
    " A# k; `. L9 N: E  _% c; c  ^7 M
  4. <meta charset="utf-8">
    & j" N* L3 B; E) [" n4 Z
  5. 1 D& U$ V7 i; R6 _. U& z
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. f4 p- g' E! R
  7. <title>404</title># u: N% z  L7 C' M" B  |% L
  8. <style>4 c! a4 p6 V. z: _% B5 L8 D" o+ P/ _5 L) W
  9.         body{
    $ |3 ?9 w# {9 \0 n0 n; P0 T
  10.                 background-color:#444;
    / T6 K9 \6 j# a# B& U% ]
  11.                 font-size:14px;( K) |# [- Y- n) h2 `: V6 p
  12.         }6 S3 K9 r5 j, E+ \: K
  13.         h3{- H% P8 C4 c) M( E+ e3 a
  14.                 font-size:60px;; I) o" o- P6 O& ~
  15.                 color:#eee;
    % N- q/ b# e3 f" z; v
  16.                 text-align:center;
    6 m) O1 v5 z( l6 {, z
  17.                 padding-top:30px;! C' w0 O: C* o: X
  18.                 font-weight:normal;
    ' r8 g( P* K- X+ V
  19.         }
    & ?- q' N" E0 D0 l
  20. </style>. N. _4 Q' W7 A
  21. </head>
    * _, h* U. n2 f0 e8 I
  22. + `) t4 p& i. z$ {/ y) K$ x
  23. <body>
    * t" ~" k# M- G' ~- p
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    5 w2 k2 x' }! X# t. R
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>3 [2 }/ P9 n, P# z7 P' Q8 S; h3 h
  26. <canvas width="400" id="canvas2" height="400" ></canvas>, n7 l1 o! Z% j! A/ p/ k- Z3 j
  27. <script>& V) _) ?# ]  d+ ^- j- Y$ j+ t1 u3 R
  28. var video=document.getElementById('video');
    4 D$ x/ z/ C$ E4 n( s
  29. var canvas=document.getElementById('canvas');
    0 h7 T% w( f; U( z; k" U
  30. var canvas2=document.getElementById('canvas2');: R) m" e9 d5 E6 q  O
  31. var context=canvas.getContext('2d');
    ) V6 M+ }1 o' `+ D* F1 q: w
  32. var context2=canvas2.getContext('2d');
    2 \% v) |- F5 d' P- t
  33. function draw(){
    % ~5 V, s1 E- e7 J! P4 A) R2 c) X) W
  34.         context.drawImage(video,0,0,400,400);5 Q* l# n" V+ M  ~
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    7 L2 R2 E* t3 Y; U) Y
  36.         setTimeout(draw,800);, U6 M) C: W  v# R( D2 w; ?- z
  37. }
    $ a: Y# z  c3 H: z! S8 p

  38. , U/ L, I2 L' n3 X  I
  39. //客户端跟服务端通讯
    / j2 T. ~# E8 T
  40. if (window.MozWebSocket)9 O' Q0 F' `$ W; n9 E6 u) n0 S
  41. {
    - R4 u6 a" U2 m2 N; l
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    - T& {4 O5 n$ t, n6 E' Z/ S
  43. } else) L! V5 v* ]; Q; Y+ h/ g  x, x$ w
  44. {
    # y' ~$ T+ @) i. \! v7 l
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    7 Q& b& Q% R5 V
  46. }
    0 A- Y. j  P/ T
  47. . G% E1 L- E" \" f+ b" H/ w
  48. ws.onopen=function(event){7 O6 e! p0 q! D* f# ?6 b; K9 W1 ?
  49.         alert('连接成功');
    $ w9 k# T1 O" H. n2 N
  50.         ws.binaryType = 'arraybuffer';& @4 r  e" a4 X5 T) v2 ^6 b
  51.         draw();  R7 B3 M- Z, S! ^
  52. }
    6 T  P" i/ T1 W8 d
  53. ws.onmessage=function(event){( y6 o2 C% H3 j- z$ Z( A- H
  54.         //alert(event.data);( D8 h! E* u7 M+ j) {
  55.         //ws.send(event.data+"client");
    & c* B( O* B) }2 l6 s9 X
  56.         qrCodeImg = new Image();1 l/ [, J, o# q( Q) b
  57.         qrCodeImg.src = event.data;
    8 h0 e: v- B5 @4 Y. q5 c; m( ^
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    % H5 b/ W% E. F1 F- d5 w6 _5 T# E
  59.         
    / t7 X8 H! r! x+ F/ c, A
  60. }
    1 _6 K0 X$ s/ m% a$ D% ^
  61. ws.onclose=function(event){$ _& X- r/ j. g- m
  62.         alert('close');
    3 c. M! G# _3 Z( G
  63. }8 M+ _7 |  U6 L2 R( d
  64. ws.onerror=function(event){% U8 w( m- ]. _) E0 S2 m  w8 }* _
  65.         alert('error');9 T& Z, |( F7 l, W4 Y
  66. }3 U# @7 V0 K( Z; g: ]! J# d4 B/ O
  67. //video,标签模拟视频) B5 A$ a8 B1 j0 T2 P5 B3 ?# D/ ]

  68. 9 b5 K/ n$ p' m. c( U+ i
  69. </script>
    % L/ g, u& V' V1 C  x% @' S
  70. </body>3 ^8 Y3 }* o, h" d
  71. </html>5 y2 k! f: I/ @! `( |

  72. 2 x$ c0 @, o2 r1 ?, t7 {" s- }
复制代码
客户端:2 V8 p8 B- N- F7 K
  1. <html>6 c$ X& S+ {+ g/ a
  2. <head>6 w0 b8 ?( m+ A) i
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">* s- F) e0 r# s& Z- b
  4. <title>客户端直播页面</title>6 c# F2 P& L: E* N5 B5 a; I" |
  5. </head>+ o. ~, C# v/ d
  6. <body>: B% R% d. S9 m) N0 H
  7. <img id="receiver" style="width:720px;height:480px">
    ! ]: y4 b2 M( |) [1 k
  8. ; E8 D6 n4 B) y# h) r  |  J
  9. <script type="text/javascript" charset="utf-8">, J# O& ]  X7 ?9 w# G2 C3 A1 I
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 h8 C7 P0 V! x2 x! s: m8 o5 l
  11. var image = document.getElementById('receiver');8 o2 }  T% L1 D% y& L+ k; n; s  b" D
  12. receiver_socket.onmessage = function(data) {
    ; d2 s" X  X/ c3 a
  13.         console.log(data.data);0 C4 N, c" D3 I) u
  14.         image.src = data.data;+ r( O5 [2 B. v# U. q1 w' J
  15. }4 f% M# I  ]. j5 B; I+ i  @
  16. </script>4 P' f6 `; {2 Y
  17. </body>1 G/ @+ F. C6 n. {
  18. </html>0 f! m  J  ~0 }1 X) o- y
  19. 0 L- \! ?& H7 }" q/ \: A! M' R2 X
复制代码

: p1 e2 E# \( {& B
4 P4 ^* A1 C5 S4 i: Z6 S4 j8 v, k5 [  X! h% _2 d
; V4 ?! o, q- Y0 |- ?9 @
1 R: b7 d7 B! l4 F

# T8 c& h% L3 q" Y7 \6 M
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-19 22:32 , Processed in 0.056674 second(s), 19 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!