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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码0 j- Z9 F% h. b) s4 K
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    7 `6 H9 T# a% y
  2. $client=array();# x& l6 @4 h: w) d4 G  \
  3. $serv->on("open",function($serv,$req)use($client){
    4 X1 {) V$ q& f7 I  }
  4.         //echo 'connect'.$req->fd;
    6 [9 M6 a/ L1 g. {% V" @
  5.         $client[]=$req;) |2 q5 m$ w, f) J5 p
  6.         //var_dump($client);
    9 z2 O8 r" i6 Z4 N
  7.         $serv->push($req->fd,'aa');+ n/ [/ k7 z' j4 F) y  F, \# ~
  8. });% d1 K3 I" ~: m" b+ q$ r& x

  9. , j" l) n" y7 b5 b9 E* J% h
  10. $serv->on("message",function($serv,$frame)use ($client){
    ' A. D/ o  U9 n$ K- ?1 g
  11.         /*var_dump($frame->data);6 s4 @6 c! v; ~+ _  ^* J
  12.         foreach($client as $key =>$val){
    9 Q5 I6 C; R, m. }) }2 {
  13.                 $serv->push($val->fd,'aa');4 D; d* ^, P: Y& u$ _
  14.         }*/; J7 Y( Y* M( E/ y0 e; M6 i- `2 D
  15.         $client=$serv->connection_list();
    " e2 b% z. X7 D. y) \% y% Q
  16.         var_dump($client);, d% m6 Z( w+ z9 w3 U; P6 T
  17.         foreach($client as $key =>$val){
    6 N- l: t! Z: ]% w2 _" k; O0 s
  18.                 if($val!=$frame->fd){5 F$ ?0 A( s9 Z& v4 O/ Q
  19.                         $serv->push($val,$frame->data);' ^/ c, N: Z9 g; P
  20.                 }, R$ R. n9 |& {7 }8 Q
  21.         }0 _+ K% M3 z; v
  22.         ( y  T) m* R; I
  23. });8 u3 v# _6 B. t6 d

  24. & a' c6 D& E; U! k) C% e7 U
  25. $serv->on("close",function($serv,$fd){
    $ w! U$ _$ |7 z8 d) b/ T
  26.         echo 'close';, h* [, R1 O2 ~+ o3 z$ ]5 n
  27. });
    7 E6 W2 B1 h8 O( x! d
  28. & G; n) y7 s6 d1 D/ \5 A; g
  29. $serv->start();; F$ y+ R8 G0 K: r8 N
  30. * a7 g' A, M6 T
复制代码
主播客户端
, F' k. i  D/ n* h5 @
  1. <!doctype html>
    2 f* b/ X/ y7 y8 R$ \# R, q& O
  2. <html>
    ; t# l% g" J  F/ C) V$ F, a& u8 E
  3. <head>3 q0 z8 d9 h4 ]: {
  4. <meta charset="utf-8">
    3 g8 i; n% _8 w' k
  5. 8 G% }7 L% Y* F' W( Z7 y. Y5 C& ~2 z$ m
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    : Q( u7 v& J- ^& M4 C( B
  7. <title>404</title>
    4 G! W" X! I, [; q& b
  8. <style>1 I9 t( [2 s+ M& z1 y! f
  9.         body{
    8 i* ]% e8 D! v) q6 C9 u; l! j
  10.                 background-color:#444;' t5 ~. @! X  C/ i, K& `
  11.                 font-size:14px;
    & C. ^0 e1 e8 ]* v3 k7 p: h
  12.         }
    8 x) u6 u) r/ v, a
  13.         h3{" h, S# g% v8 B, O6 k# X
  14.                 font-size:60px;  b  {) S" |& I0 r' q' y( U
  15.                 color:#eee;# X4 y6 _0 _- ~5 ^
  16.                 text-align:center;) }0 M- A0 N4 p& a4 L3 Q
  17.                 padding-top:30px;
    9 n* e) B: e6 B# k9 s" A/ h7 p, y
  18.                 font-weight:normal;
    % @4 C1 a% H7 J5 G5 R  W+ [
  19.         }
    ! m& \% Z9 ?$ r( Y: l4 Z+ H
  20. </style>1 f* Q# U( G( |
  21. </head>4 W7 }) t  i2 H0 M
  22. ; @& ^& B/ w% R5 ^% B1 g
  23. <body>
    0 t2 ]" x6 Q3 z  G' D
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>' J; u% d& u4 H# ^, O
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    ! F: p# g& m2 r& J3 S% C
  26. <canvas width="400" id="canvas2" height="400" ></canvas>6 t  d3 R& O, |( L- v
  27. <script>% x. A. S/ ]- f- R2 u
  28. var video=document.getElementById('video');3 ^; `# ~5 F/ ~
  29. var canvas=document.getElementById('canvas');
    1 f  b: T* U( Q& C. E5 l- `. Z
  30. var canvas2=document.getElementById('canvas2');$ n' n! b4 R  l  J+ L
  31. var context=canvas.getContext('2d');
    8 s; K8 x* R* q% s7 V) j
  32. var context2=canvas2.getContext('2d');3 B! b, h3 ]: r, }$ y" `
  33. function draw(){
    ; \" [& m3 v- u' q
  34.         context.drawImage(video,0,0,400,400);' S+ T" D8 F8 V1 i5 f% O$ J3 ~
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));( F' w& Z( Q3 _4 r
  36.         setTimeout(draw,800);
    - b& S  o5 @$ n5 @, x
  37. }
    9 v7 l3 X3 H* H

  38. . u% I/ T# E/ v7 K2 D, a  v0 N) q& c
  39. //客户端跟服务端通讯! n) `; c. ?* L' c% [* L
  40. if (window.MozWebSocket), r" O+ A& x; m! D
  41. {7 g: i: K. y9 i0 i! l
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    % b2 G( z% Z1 I; \' f* W3 K* `
  43. } else7 W5 [1 Z% d5 Y
  44. {
    % t* M: n6 M' G* R( h1 v& N, W
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    : }% S- r- b. t  y# }" Z
  46. }8 S+ M  d& u0 a- T' W

  47. / ?- R9 I! r4 @4 U) H% U/ u
  48. ws.onopen=function(event){! |, e2 e# H  `- R. _
  49.         alert('连接成功');
    $ r# k* W/ J# q6 k  x4 S
  50.         ws.binaryType = 'arraybuffer';
    1 `' c# P8 H! s/ A: N/ }# E
  51.         draw();
    8 E6 V) u+ v$ o2 U
  52. }
    , ^* p" K4 v; ]4 }/ H. f# T5 [
  53. ws.onmessage=function(event){
    9 O% p8 h8 `3 K; h$ u. C9 Z% a
  54.         //alert(event.data);2 l" d, x. X4 e* H
  55.         //ws.send(event.data+"client");! a& ~0 L( v% ?3 H, g. }+ _
  56.         qrCodeImg = new Image();0 g( @: x4 i& P; m+ v
  57.         qrCodeImg.src = event.data;
    - l! Z: A9 v& L
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);: f( a  F! [9 o' B
  59.         ! g& }5 E& j; Y+ J) [
  60. }1 z( ]; i# m& g3 v
  61. ws.onclose=function(event){) b( t  I2 t- n6 d. B- v, u
  62.         alert('close');: \# N0 w# t) H4 B
  63. }
    # j, h& h8 y8 k5 \" z7 e, n$ E
  64. ws.onerror=function(event){
    ' a9 ~) |- q3 U' o) o
  65.         alert('error');
    1 O4 r5 t! I( b, K/ c4 ?
  66. }
    / U9 ?- ?% Q! a! P- I3 e
  67. //video,标签模拟视频  v( J& o7 j" M$ }3 \' n9 E

  68. 6 m5 X+ M5 a9 S/ s. ~, @- I
  69. </script>5 \$ p( D! l! V2 C
  70. </body>
    1 v- \- R+ s1 h5 k3 `
  71. </html>
    " ~* X' E# q' {6 C$ b& g3 L# m# o8 K

  72. 6 d" q! x; z$ b( S+ m  A6 u
复制代码
客户端:; a2 |: a/ W; }2 d: ^, X# n
  1. <html>% h" z7 ^' {" ?0 ^3 g6 Y1 p
  2. <head>
    4 i' C! y: l  Q! H$ }! e
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    - |0 F: D& n, j  X1 _- X! X
  4. <title>客户端直播页面</title>" W+ n! ^9 e+ s  k4 P
  5. </head>( ~; V# C8 Y- o; ]. I& U% H6 A& l
  6. <body>7 o- W: N4 {$ U: y: i2 G' A
  7. <img id="receiver" style="width:720px;height:480px">
    - F4 q% r* T% u% k# Q- x6 z

  8. 6 U- V! c) o. N/ `- p6 t. P
  9. <script type="text/javascript" charset="utf-8">. ?. x, x4 G, Q+ {
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    1 a  ^* T' i, y" n5 F
  11. var image = document.getElementById('receiver');
    % p  a8 S$ D6 v+ Z
  12. receiver_socket.onmessage = function(data) {0 i' C3 d6 L, L; q$ o$ z; S4 [
  13.         console.log(data.data);7 W9 X% K) L( {; K4 |
  14.         image.src = data.data;/ `* C4 }& Q; B- j
  15. }% b6 r9 R- c; ^8 @( c
  16. </script>$ c2 T9 M# H/ I  l+ M/ m
  17. </body>
    " O+ |. b5 O8 [
  18. </html>
    $ `" m; W- g: t

  19. ) a, T1 u5 F1 g# Y9 E
复制代码

2 k6 `1 U7 O* E: g( a$ {. R4 Z( z9 H5 y3 V+ @  u

( b, k# m/ T: j9 b; e, O" y
5 W& v/ `; H/ I1 l- m0 I$ ]: Q3 D! S7 E/ Y6 I

, x5 [& n/ l3 D1 C8 T+ P
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 11:39 , Processed in 0.054227 second(s), 20 queries .

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