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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
, [+ N' S; A+ q$ C' u6 a
$client=array();/ T& R ~8 b1 J6 C5 \
$serv->on("open",function($serv,$req)use($client){
1 @( ]1 X7 L8 U; f
//echo 'connect'.$req->fd;" L/ |$ s/ R+ l- L6 P6 A6 ]
$client[]=$req;
0 N8 @3 a+ R# X. Q: @; c2 |' u
//var_dump($client);1 Q7 `0 q- }! ?2 Y; ~; A5 V1 B
$serv->push($req->fd,'aa');1 ?8 w( b0 B; t5 @3 `0 y8 y
});. n% y. i3 Y* }7 n8 B+ E3 C, S
: S+ O) I- o3 L
$serv->on("message",function($serv,$frame)use ($client){1 O6 v8 q4 Y2 m' S4 W
/*var_dump($frame->data);
5 n: {3 @' b4 [7 t
foreach($client as $key =>$val){5 }& x; A' g. ?" d% P
$serv->push($val->fd,'aa');0 x6 v# e' a0 ^/ N, C7 ~! o
}*/
# o m) c6 Q9 l1 o5 h
$client=$serv->connection_list();
9 Y# |# P& C! u9 S3 N1 ^0 l2 u
var_dump($client);
4 Y/ e+ t" ~ G" M5 o3 B7 k% `) [
foreach($client as $key =>$val){
8 t. O# s$ T f+ R/ x1 r7 L3 v
if($val!=$frame->fd){; R, h! b) ?; l m6 ?
$serv->push($val,$frame->data);# x% j$ |% p9 P+ x# \4 V& r& n
}
, G2 N* U N/ q8 g. x6 U
}: G& x9 A% h+ L+ W# Q* H( N5 b* R
& L* [6 ?7 d g
});
0 \* ?. t" F8 D4 B9 d0 i$ u
$ B6 V T( B. n2 t# _" V& o" f: W
$serv->on("close",function($serv,$fd){
, F) k& F1 |2 q0 G: p' A
echo 'close';& G! ~% Y8 ~- r7 k+ M$ K
});
- J7 ]0 w$ z6 W
' A/ |) _& c" _# _
$serv->start();
& _% q, o6 {9 j
5 O. s0 H2 [9 W

复制代码

主播客户端

<!doctype html>5 T7 Z) [* ^# y( x
<html>4 l& k+ k4 X# B" Q6 {+ @
<head>4 Y) }6 P& X- { X0 y% {! k
<meta charset="utf-8">
3 `- ~: @: a+ ?$ y9 C, D
g X" F8 M# k' {
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
# @5 a3 f5 k: F* v6 P% t2 Y! K9 \1 U
<title>404</title>- |2 T: o) Q; s p
<style>* G( ^8 Q- Q5 I J, y. W
body{
. I+ }; }9 j- ]
background-color:#444;
P7 j5 r. w2 p. x! G
font-size:14px;% A% Y( d; [- _ z, u8 @1 Y
} U9 Y$ t( m9 U+ i: N7 W
h3{
9 P, }6 O& i; A! V: q
font-size:60px;
: i/ x+ L: X) g# w' J: D/ ?
color:#eee;
* V7 ]6 ?+ p: @
text-align:center;
8 V) K+ Z- p- D8 {' M
padding-top:30px;
0 k& F6 A6 [8 K' G/ q
font-weight:normal;4 N% i* \4 d3 [- l& ~
}
( F0 u* Y% i' u8 ^4 h# t8 N& y0 Q
</style>
! W0 u) V, D1 a2 q, A9 `- e/ M
</head>
- [- ~. D$ `* F0 ~4 k
4 W( G" A- W: J. a# s( |% \/ k
<body>* O5 b( ?6 l5 ?2 ~4 G$ j# |8 P
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>+ |7 I! n y- f; W7 J' q; x" M. w
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
, {/ V3 b5 ^% U; m
<canvas width="400" id="canvas2" height="400" ></canvas>4 i2 L( w- N, s! H3 g
<script>$ C4 [, `% m# O
var video=document.getElementById('video');
6 {( W" z2 [7 O/ }+ H
var canvas=document.getElementById('canvas');7 s; K1 D) f& O( A4 K
var canvas2=document.getElementById('canvas2');
; v' T7 A& v( V" O
var context=canvas.getContext('2d');
2 O. h3 n0 C! t8 O% Q' h. p
var context2=canvas2.getContext('2d');: F& f) d( N l0 v5 f
function draw(){2 A; ~* @* n0 H2 V! Z
context.drawImage(video,0,0,400,400);
ws.send(canvas.toDataURL('image/jpeg',0.8));4 _# b! e* J4 A+ M3 e
setTimeout(draw,800);
( m! _2 Z- }% W) A3 J! ]
}: |# @ B9 o8 `5 V% C7 @( q2 v, q
* X7 j/ ]5 z- `- z/ S
//客户端跟服务端通讯
! i- z* P! j! {& g
if (window.MozWebSocket)
. x, Z- `8 x1 K
{6 L' A3 R' q0 x: _4 \
ws = new MozWebSocket("ws://182.61.42.187:9501");
* y8 U& Z( _. U( y' y: |5 q6 f' u
} else( ]+ p* N! I0 j* I& i
{& C, [0 S1 Z0 Q# o9 G* _5 M7 W2 F/ e+ M
ws = new WebSocket("ws://182.61.42.187:9501");
. @# ~' ~2 L- G" @. [8 c2 s$ n
}
+ H2 H$ }. `' [# M
' {/ F( K& r3 c4 T2 }
ws.onopen=function(event){9 p# y# Z& _& V; n, F5 b/ \0 ?1 m
alert('连接成功');/ g K" D5 |& V
ws.binaryType = 'arraybuffer';
( p" Y7 K, G- u6 n1 Q& Q
draw();
b2 z4 Y$ ], x& g: Z3 K0 j% N
}
1 o# N0 |# l0 i
ws.onmessage=function(event){
# X1 {7 w$ b' A& m
//alert(event.data);& J% f; v% g, i z! o
//ws.send(event.data+"client");
: J) s8 {' b) N! J. S% O7 D9 G: |
qrCodeImg = new Image();! S" G$ |' }$ W; k
qrCodeImg.src = event.data;+ E$ r9 \- K# ~& L- ~8 W
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
4 `) p8 ^$ V- r
R. @& X/ N' |
}
% E6 X3 ?5 I& k- f8 L9 p3 y
ws.onclose=function(event){
5 `6 d$ y' K2 Y8 t# h& k% J9 X5 F
alert('close');6 E# M, G! }. m1 Z: c- m
}
( k' n( X5 P, ~2 r
ws.onerror=function(event){
$ a7 y4 Z# U" i+ C8 V; k" d( D
alert('error');! `8 u8 E# f* |% ]3 I+ [- s
}
# U1 A2 E' K: v( H* u
//video，标签模拟视频0 T) \& e. v7 a j* }3 Q0 ~9 K/ S
. x. g- D/ r& G0 c
</script>
, K4 {) A6 W+ q- b L
</body>
0 ^8 m3 C7 r" o; e3 ~$ P
</html>
0 ^3 |8 T) j" D3 W1 l3 h. z: G+ r) F0 `
( f3 R& t6 A1 V

复制代码

客户端：

<html>7 O* j1 t; q3 w& x1 C
<head>
# E" O3 c! P4 g) C9 ~( h+ u
<meta http-equiv="content-type" content="text/html; charset=utf-8">, I1 }$ N, k% z/ u$ G3 t0 s
<title>客户端直播页面</title>
+ \- C: l+ N. k3 Z2 s% S4 R
</head>! `4 \" L6 ]9 {9 b8 Z* m
<body>
" K5 Q. {0 U- Z+ f: g- [. i
<img id="receiver" style="width:720px;height:480px">
" V9 U3 {, `9 H( b! D! I
i1 O+ w7 J! ^( \; v
<script type="text/javascript" charset="utf-8">
: e" i% `% w$ ?% f, f. ^
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
& w5 {( X' |6 @- k- j5 W
var image = document.getElementById('receiver');( ^: c# W3 ?) y t; S# u
receiver_socket.onmessage = function(data) {
6 y* t* H2 ]" @* _. A
console.log(data.data);( L, t0 ~" ?- E8 w& W7 q6 I
image.src = data.data;
: N; O+ J6 g/ V0 ^. D/ S8 B
}* K: ] X/ s0 u- h J) k2 Y. a0 F
</script>
: N- F4 O/ k y$ @. k' p! h' Y
</body>
$ E' T! V7 Y% G! E6 X
</html>, N, _& @5 J9 v1 @
3 j' G5 v' j- v/ z( I" B; C/ G/ o

复制代码

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

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

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