swoole视频直播（记录用未测试）

admin · 发表于 2020-3-29 18:53:53

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. } u3 X8 C* J' k! K& K2 v
$client=array();
% e: h K8 T: Y* P" y1 x3 m N' I
$serv->on("open",function($serv,$req)use($client){# y- p7 x; n/ m; d# v. P! Z
//echo 'connect'.$req->fd;* J/ N) T& \ S% B: U. R1 f
$client[]=$req;# E- z# ~2 j9 r" f3 _# Z- i
//var_dump($client);" K. @" r/ y# O% p
$serv->push($req->fd,'aa');
* c+ o6 V+ f, r$ x9 r6 @9 _# w
});
! T% C* I" H' q8 ~2 G, ^
7 a$ T: l; X/ K8 D- ]
$serv->on("message",function($serv,$frame)use ($client){
7 F1 k; B* X$ }# X
/*var_dump($frame->data);/ Z' q5 s% L; `9 e
foreach($client as $key =>$val){! v/ V5 [- m9 n7 [) i% L
$serv->push($val->fd,'aa');
+ j' H6 C+ Z* J& v) K- ~# s
}*/
4 @+ C! e' O3 R" Q, Q
$client=$serv->connection_list();
: ]: n3 X8 U7 \5 d' i! n' t' T
var_dump($client);+ u6 I6 h. l7 O4 c9 O9 }- G
foreach($client as $key =>$val){
6 n5 ^% m" o% f9 a' l* y4 w
if($val!=$frame->fd){
' r6 j) ?/ a B0 t0 [6 F
$serv->push($val,$frame->data);& i3 }) d9 o" f4 L
}
, S! e* V% J8 ~: |! _( b
}
+ w( O' L- C4 Z; `4 T1 G
2 r5 Q' D( L% [4 s6 I; [
});
" v; L# L3 D( Y( f: X7 @
y0 A% O4 a. Z
$serv->on("close",function($serv,$fd){$ ?7 s/ B* O1 f1 X, w J2 U
echo 'close';
. u3 f4 E4 I# i+ U0 z5 V& Z. ?
});
$ f h1 s ~" ~& Y8 E1 e
# b9 C- Q7 p+ J
$serv->start();/ }" [" ?% Q3 h0 M1 \$ G" j
1 V& Y1 e) j4 G9 u

复制代码

主播客户端

<!doctype html>. E% c6 o k2 S
<html>
0 ^* N3 Y5 Y2 Q* K$ p& H& f
<head>$ V6 H( }! [0 V& N* i
<meta charset="utf-8">
* v9 x6 o3 ]) t: _! Z
& X3 O( h# {/ T* c
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">& V5 R) ?$ W" {/ r3 H
<title>404</title>/ {1 m8 u* g7 X0 J# w# [1 v3 X
<style>
0 \ P+ `% v0 s
body{
% D. j' b; X+ j3 @
background-color:#444;
# }5 A8 I& k7 r) h+ E) C
font-size:14px;" K( V7 S9 c' `
}
$ p7 T; X0 Z8 p$ Z8 o
h3{
+ X k; O/ x& s, H( }
font-size:60px;& z3 t* x x4 Z+ Y: r$ O9 H% u: n
color:#eee;% j/ r0 r( v" m. I3 S
text-align:center;' a8 T/ h. x. d6 D8 d' _
padding-top:30px;* |/ L9 s& e) v. n& ^
font-weight:normal;
; b2 A+ W+ \% k) [6 G1 K3 L
}7 H( F/ h! o# G# U. \9 Z# k
</style>( k/ x1 A5 _ h' O% q1 C
</head>, U! H* L- C( R
- t, h4 a7 a9 _& T7 p
<body>
, ~1 J- t8 T8 v5 ^
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
9 i8 \5 ]3 n1 H
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
5 c H# Q: v$ j) E( N5 l
<canvas width="400" id="canvas2" height="400" ></canvas>! t4 e( A* X U* N& M
<script>
: _ l# C; _9 q" ]/ @, I! H% X2 @
var video=document.getElementById('video');
% k+ l9 Q4 B' }' W! L0 W
var canvas=document.getElementById('canvas');* Z/ H1 _+ `5 ^8 a7 X
var canvas2=document.getElementById('canvas2');# s* q( E D0 z
var context=canvas.getContext('2d');; _5 x; E/ e; F
var context2=canvas2.getContext('2d');
! W, g4 O9 f8 E7 u8 `
function draw(){' C4 H4 K3 `5 w1 Z" m5 _. @- I
context.drawImage(video,0,0,400,400);! d1 }3 A5 M7 M! g
ws.send(canvas.toDataURL('image/jpeg',0.8));& R" d: r/ t! H I' o
setTimeout(draw,800);
2 X' b7 T2 C n" ]& l& q- @
}# I* m9 j+ [ @+ q, V
9 G, R5 C' X) {/ K0 y D. q
//客户端跟服务端通讯0 S6 m# f, b# T
if (window.MozWebSocket)" ]5 M, K& a5 E9 Z/ z6 G
{4 }% q( h+ ?# Q6 }7 F- k4 {
ws = new MozWebSocket("ws://182.61.42.187:9501");+ H, P% o& l! t' u2 h6 k
} else/ Z" a1 i% E5 b) D# h& o0 w
{. S {" w6 `7 {9 h
ws = new WebSocket("ws://182.61.42.187:9501");# O# ?8 e1 K) d5 E( z" i0 C
}/ D9 _* g0 `2 q# J
- K* q: ^% T, W5 _4 [
ws.onopen=function(event){
) M( H( S5 ^1 K8 V# ^! t) a% T. @, _
alert('连接成功');
) h) j+ V5 e, o
ws.binaryType = 'arraybuffer';/ `& Y2 |! C1 |8 p
draw();+ V H% s- t% e6 e* W
}
" G& k9 ]: o# }- P5 @' w/ s2 R( W
ws.onmessage=function(event){9 r [' n- C' e& e
//alert(event.data);% D5 V6 Q1 m/ D J9 i5 d
//ws.send(event.data+"client");# N8 W& U& _) `. J/ G4 F- m' I3 _
qrCodeImg = new Image();
" J% M6 b9 N4 I- w4 R9 y
qrCodeImg.src = event.data;* U) l+ Q9 U9 C) F
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
/ y/ ~" U* q; H8 Z* ?; v* Y# n
6 H- C8 a* m- N1 x6 r* v8 a
}
2 o: y: A5 r- ^9 A( Q- |8 y3 f1 a
ws.onclose=function(event){! Y, ~2 _' S- R
alert('close');. ]3 W( k, ]( w, H0 `
}
9 |7 P( m7 x M. }& p
ws.onerror=function(event){2 I; U/ ?5 t0 f9 x+ N8 ]1 t* ` J
alert('error');
9 _/ i5 `$ m: E1 H0 y1 z
}
; P/ ^1 V+ U" M- s
//video，标签模拟视频
* Y; r6 N5 t) O$ H& l; x8 `# D: A, D
! k& \, E7 [7 w/ k
</script>8 I+ i8 Q! i# Y' b" J2 u R0 A
</body>. L# ?1 @2 \0 t
</html>, z. F/ K: M; q) e9 \1 o/ f, U
, ~- @. @- i# p/ k1 v

复制代码

客户端：

<html>7 E* S$ [" X f
<head>
3 l# I$ z/ Y7 Y% E2 N7 U
<meta http-equiv="content-type" content="text/html; charset=utf-8">! h% u6 Y h' u+ _ M9 Y8 e( a
<title>客户端直播页面</title>4 u t1 E6 ~9 v2 \0 f% j5 M9 j0 I
</head>3 e Y4 H7 i1 q7 z. S- Y
<body>9 }; U+ N& l8 M$ {9 u3 E2 p A
<img id="receiver" style="width:720px;height:480px">, r$ S4 u/ [) j& ~2 M7 O0 I( |. T# q
( N: s, H+ Y5 U+ H$ E* G7 o$ {
<script type="text/javascript" charset="utf-8">
) Q5 |, J* D$ v
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
2 H5 M. O& t1 J6 M
var image = document.getElementById('receiver');* ~4 s4 v7 p% }# G
receiver_socket.onmessage = function(data) {
+ K1 Q! j* @2 e
console.log(data.data);
# h* I3 r( K+ L
image.src = data.data;
" ]% h5 O7 ^; s; g
}: X$ N2 ^4 M2 T8 v! I. l$ ^
</script>; F }6 B7 _+ q4 l: S
</body>4 D) f) ^1 T4 k6 k1 Q
</html>. i3 k: v( e+ U5 g
/ B( x8 b0 x5 a) y% r! e/ B

复制代码

帐号		自动登录	找回密码
密码			立即注册

[swoole] swoole视频直播（记录用 未测试）

[swoole] swoole视频直播（记录用未测试）