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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码( _, ~5 R( g' i* _3 n) |/ r
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    2 Z! l# t, [, E* U0 ?  r! I
  2. $client=array();
    ) \# u; b. ~% l1 O# v
  3. $serv->on("open",function($serv,$req)use($client){9 J8 z2 I* i# c
  4.         //echo 'connect'.$req->fd;; h, `7 Q. H1 K; g
  5.         $client[]=$req;' Y& Q% c* T, v5 ]
  6.         //var_dump($client);
    % \) y& {, H! P; `: D
  7.         $serv->push($req->fd,'aa');" E# z9 N! N6 _; z. b' x0 t$ @6 M( h
  8. });  ~6 d$ I0 l- Y/ @) H: f

  9. 1 t! |( E3 @- M
  10. $serv->on("message",function($serv,$frame)use ($client){
    5 N: w& }1 B5 V# {9 Z1 K
  11.         /*var_dump($frame->data);3 b5 g% Y, J& I! ~: S. n! C$ g: s
  12.         foreach($client as $key =>$val){+ b  h( u& ~: k" Q& ?
  13.                 $serv->push($val->fd,'aa');
    8 W6 w/ M1 V: i/ @' @9 U
  14.         }*/
    8 L) J/ t6 U$ Q$ w: T
  15.         $client=$serv->connection_list();
    / ~4 j6 v0 ]+ ~# q3 V
  16.         var_dump($client);
    ' ?5 x8 p) J: v
  17.         foreach($client as $key =>$val){: b* P/ N! g2 o" Z
  18.                 if($val!=$frame->fd){" v8 e* t8 D# U
  19.                         $serv->push($val,$frame->data);
    ! z9 n& g0 ]% G( F* U
  20.                 }. ~2 X$ t6 C" _
  21.         }
    3 \$ G+ ^  h; F
  22.         
    ; f) P3 R$ V- i( M- p% J! B
  23. });1 r4 X5 n# Z. G8 z2 k# r- m

  24. 7 u# A! w. f0 A! f. L$ m
  25. $serv->on("close",function($serv,$fd){7 [6 P, G4 [7 M
  26.         echo 'close';
    - n) [# w! x/ y: z$ G
  27. });9 s6 M3 }# R7 b5 P1 X
  28. ( h$ |! e5 l3 v( R) [
  29. $serv->start();' v5 \- n# Z" W' y; E. ?7 [
  30. ! |# Y! E, h. a% ]  ]% _
复制代码
主播客户端
5 p! q! g/ t, N* g- E
  1. <!doctype html>
    6 d( G; ^! M0 f9 P- H6 ?2 p1 f
  2. <html>5 H; m% u1 n8 T# w9 s, q$ v& X+ u
  3. <head>
    2 x- Z! n7 ?' [, l6 W
  4. <meta charset="utf-8">
    ; V. D: Q8 [* W6 j2 D% P
  5. 0 E6 d! U) Z3 w: |: j
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    . Y( _/ F% W, r" Z
  7. <title>404</title>
    # c6 V7 W; t, n" O! J6 `8 \5 F
  8. <style>, E2 b$ S1 l! s( G
  9.         body{
    , t- `6 K% i% J9 ~" B0 i8 e. ~
  10.                 background-color:#444;
    7 B4 d# D) f- `$ K9 F  P7 y( w
  11.                 font-size:14px;  D- D1 d. f, f* G& D
  12.         }1 y: m6 `& q+ ^  v' z2 Y6 x/ s4 P
  13.         h3{
    7 i% P- |3 K4 T' q
  14.                 font-size:60px;. m! O9 S, D' L( z
  15.                 color:#eee;3 Z3 i5 I9 M, g  E; y1 B2 K
  16.                 text-align:center;
    - U# D6 R$ E3 F4 `3 i: B6 [: P8 T/ v
  17.                 padding-top:30px;
    $ E5 u' s9 A' e
  18.                 font-weight:normal;0 `9 p0 N) a2 ~' I
  19.         }
      f/ u. u3 p. W3 n' T& I* H
  20. </style>
    1 b* O) J1 |' _, A/ n3 j) ^% L
  21. </head>
      \5 G# k5 f4 K# U  m
  22. 1 C/ {2 B7 I$ [9 L0 J. v& N
  23. <body>" P  J& S( F  ^; s. ^
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 `" j) f$ C# `& j( T* r0 ~2 M) C
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>. `" A/ F& b: F, J, {* h
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    ) E7 P; f9 T2 h& g" z! W4 n7 u
  27. <script>7 L! z+ W" k+ r' K; I0 n( t
  28. var video=document.getElementById('video');5 u' T$ G+ h+ c+ R1 z& N: [
  29. var canvas=document.getElementById('canvas');, l+ {( k" x. `$ ^' d
  30. var canvas2=document.getElementById('canvas2');6 l6 f: E3 ~6 c3 l  T
  31. var context=canvas.getContext('2d');1 ^# {8 N! N( K6 m2 d
  32. var context2=canvas2.getContext('2d');# M, R. D  r6 h4 B
  33. function draw(){
    6 i5 n* f  Z4 ^1 L1 d1 {
  34.         context.drawImage(video,0,0,400,400);; U0 c6 i7 i* b, J& F
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    0 l, b1 A& d7 I4 X# H: p
  36.         setTimeout(draw,800);
    ! `! U1 v: z/ z- C& z
  37. }
    2 l- G% @2 P$ z, Z6 L2 x5 [) o

  38. 5 z% p4 k& t/ E' K/ ?
  39. //客户端跟服务端通讯: ]! X1 T5 K9 U. d5 u  g
  40. if (window.MozWebSocket)4 \; f! \8 O3 J; Z- s, L4 u- l( u
  41. {
    1 c7 J) `7 ~. E8 z
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    4 M, B( e5 s- `* q2 T4 }/ S
  43. } else# S. m+ ^- }8 ^  z; e1 c
  44. {, W- q  D, x1 n( [. S4 P
  45.         ws = new WebSocket("ws://182.61.42.187:9501");0 x+ @- a6 H& h$ p% ~2 {1 h9 U
  46. }
    5 r' v& \/ Q  F9 h( J
  47. 3 a; T! N3 X. P4 R2 C
  48. ws.onopen=function(event){
    3 d0 N& C/ P. V# ~' C. v( M
  49.         alert('连接成功');1 d3 L) ?( ^% ^' x
  50.         ws.binaryType = 'arraybuffer';
    * Z! I$ V7 J+ B
  51.         draw();
    ! Z; G" Z, k. q
  52. }
    * @  o& X9 b- ~- j9 W1 }
  53. ws.onmessage=function(event){
    * }3 e% `! A+ i" B
  54.         //alert(event.data);) a( `% D7 @0 R* [) u
  55.         //ws.send(event.data+"client");; @$ }: s# \; y$ B
  56.         qrCodeImg = new Image();
    ' \3 m* Z# g( M/ `5 G+ Y
  57.         qrCodeImg.src = event.data;
    : \7 e. g4 k! j4 c" e) [' F
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);4 P; n$ `) {- i( j
  59.         3 ]9 c, o* a! I& o/ B# z1 o
  60. }2 T- |0 [- _8 E" \
  61. ws.onclose=function(event){! \; E$ w" N2 F7 V+ g  j
  62.         alert('close');
    5 z/ q: o5 n, Q" Z3 C1 j/ l3 I5 n( K
  63. }
    ; B5 z: v9 c7 h% l0 m9 P
  64. ws.onerror=function(event){
    . b% V7 r: p0 s! _! X. T5 ]4 U
  65.         alert('error');  f$ ~  C. c4 D; [& K* T
  66. }% Z# A+ z, o8 ?7 ?+ w" r: N
  67. //video,标签模拟视频
    6 y% }  C& o# c. H
  68. 4 l) R3 q7 m% x, T: ]9 m. V- @$ [  N
  69. </script>
    # K. f/ d; U0 i6 L0 Y8 M0 M9 Z
  70. </body>
    & ]7 \3 a+ A9 w) x$ x- N$ e
  71. </html>
    . S" M' K! n, J: @3 _& a' C

  72. 4 F1 b% Z  M$ M. V
复制代码
客户端:& Z) E2 [  k' S+ g8 L7 ^
  1. <html>! e3 t; V: u. D: P
  2. <head>
    4 U; ?  O7 N( t' p0 D4 [
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    0 F7 `" U5 R2 x
  4. <title>客户端直播页面</title>$ [; ]3 g; ~8 g) q* ?% ^! J
  5. </head>
    . c8 l3 j) R7 {$ ]% U! e
  6. <body>
    # r6 K" d9 Z4 N5 R2 q, L
  7. <img id="receiver" style="width:720px;height:480px">' q+ U; e" [6 Y3 i9 m: q
  8. ; q* H& T5 ?2 e6 c( s
  9. <script type="text/javascript" charset="utf-8">* H9 w& f- E8 N4 ~
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    5 H9 [' q$ j3 ?0 M
  11. var image = document.getElementById('receiver');
    ) k4 J; b, r5 E' `+ {8 Z) \  n
  12. receiver_socket.onmessage = function(data) {
    ( f3 s  A! h4 w9 c2 U
  13.         console.log(data.data);: Q9 w/ b" N. V! ?/ d4 B# u
  14.         image.src = data.data;
    6 M3 U3 c  d3 f& k; a' \& {3 U
  15. }' V0 Q  V, x5 a+ f
  16. </script>* Z* C. ?. d1 r8 f2 X  P. y
  17. </body>
    . x+ r7 s5 m/ O+ z5 _
  18. </html>& X4 T3 o7 f, _8 I# {  }+ f7 p

  19. . v" h8 l3 @9 [) A
复制代码
  C# K" \9 j9 A! j3 `* W) W
7 M$ q4 e* V! L' C! W" ~
& J5 U' F  W& `6 _
& X) A- [1 u- S  ~6 w

+ k) X  A7 E6 r
! w/ z' E! E6 B0 y! i6 y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 08:15 , Processed in 0.053346 second(s), 19 queries .

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