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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);, S3 s& @: N0 ~# r6 Y
$client=array();
' s' |/ E+ k. Q' `' x) t* N3 N$ ]9 ?
$serv->on("open",function($serv,$req)use($client){1 ]0 f+ t5 E) A3 R
//echo 'connect'.$req->fd;. y: |- n) f) j) g& r
$client[]=$req;3 U0 _( H0 c0 Y3 m8 X2 i
//var_dump($client);
' f* x% h; t* I2 e2 v$ g: S
$serv->push($req->fd,'aa');
+ R( M! ]# \ F- h7 `
});* [# v+ a7 Z( F: ?! a
1 C6 u; x; B/ y
$serv->on("message",function($serv,$frame)use ($client){
7 Z! `/ e- C5 c; m$ t; d3 |4 c) Q
/*var_dump($frame->data);+ G* S5 F4 b4 o8 K
foreach($client as $key =>$val){
& {4 }8 A' F! B. K- z; B/ u
$serv->push($val->fd,'aa');! ^( Z4 K5 f) B, s0 V) r; x. f
}*// d: g( d' b4 A1 ~+ \- K
$client=$serv->connection_list();
6 w. A2 C& l3 p& S- U* f! Z: N
var_dump($client);; p- y* X7 _4 B$ J, L0 k
foreach($client as $key =>$val){) }; \' X0 u1 B1 S! N
if($val!=$frame->fd){! W! G5 P: g7 }- B" X# E7 |
$serv->push($val,$frame->data);+ a9 Z5 s- b, V3 Y
}
& S& U, \: o) c$ ]% X6 ~
}
0 e9 {8 z/ r" a5 d% I$ n
/ Z% L5 I9 ?' [ D
});
5 R7 d- R8 }8 {
4 V5 i5 a# b( y$ J$ T
$serv->on("close",function($serv,$fd){7 }& G7 L" }" C% ^* w( F
echo 'close';
9 _ ] h. Q5 k; V3 |7 n
});! Y, @( n6 v: d! Z: ~& A7 M
+ J0 [" d( t1 \: z: {( P$ G
$serv->start();
8 |/ \: r# B S7 V6 x7 @6 _
( c( W$ Z/ u) }1 p( J+ n+ a

复制代码

主播客户端

<!doctype html>! x# w, t0 I5 k" w/ h- s# D
<html>+ b) ^5 \2 V( u/ d5 ` m* R
<head>$ V& ?; [0 Q1 }$ |
<meta charset="utf-8">
1 G3 ~# @; {; ^, O3 B
, Z. f9 B& [% H+ `" P
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6 M$ A! e' j+ N& ~- _; p
<title>404</title>
; M( ]4 T }7 W! s
<style>
8 k4 T( R s4 I; B, m# I2 W
body{
y6 {9 w& I: X7 q( w8 h
background-color:#444;. H7 S' [& C+ m5 w
font-size:14px;
0 I* ?( a+ z8 G/ P
}
6 \( P1 q: C0 ^' x& C
h3{
$ p8 c' C0 Z+ N5 X
font-size:60px;
; |, P. r# ?$ h% S. \ i0 D0 k
color:#eee;# d7 s3 a, {0 O2 j4 I4 w
text-align:center;" o2 k1 g0 N6 @% e- Y
padding-top:30px;8 t& \' n8 @- n
font-weight:normal;1 f' k* U5 n+ V+ b- b& y) M& S
} e3 t- ^$ T) r/ u* D, w
</style>% M7 Q8 q3 x) r" Q
</head>
, P2 V0 Y3 p' |$ G& e! Y+ N
1 J" x: c8 I! _) T& D' C) r
<body>8 j- k0 K9 I, r) p
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
' U# s1 y; o6 \+ g: s
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>7 N: k, ]* |# k4 H" _8 h4 a
<canvas width="400" id="canvas2" height="400" ></canvas>
: ~# J4 X0 A7 p& s* d) {
<script>: V! @0 y5 Q/ N% {' ?" S
var video=document.getElementById('video');
2 Y: \$ a9 ^, X
var canvas=document.getElementById('canvas');9 z! \: {) D; \0 k6 ^( }7 [
var canvas2=document.getElementById('canvas2');
. E/ a7 N$ Z$ Q% }+ R- H% p
var context=canvas.getContext('2d');- f) l& O$ C. I
var context2=canvas2.getContext('2d');0 ^* z7 j& _4 w! Y
function draw(){, a8 a d. ~; Q1 U. `9 p
context.drawImage(video,0,0,400,400);
# ?& ^7 h5 b# x' u! y
ws.send(canvas.toDataURL('image/jpeg',0.8));
) K. j9 i7 L$ @/ f* Y1 u9 {
setTimeout(draw,800);
* t* K( ]- ~' P- G1 ?
}, R9 t i. C' b4 k3 q
" i' ~7 q$ @ Z( L& S: I# k* B) U. ]
//客户端跟服务端通讯
) {2 B9 K! s' `7 r
if (window.MozWebSocket)* R# x: W3 f) u+ I c( M/ |7 l
{
2 p/ C, P/ Z. Y' Q5 P% |6 K2 R
ws = new MozWebSocket("ws://182.61.42.187:9501");
& ?7 ~- v% E4 [) L6 P
} else
3 p0 Q" H, L7 {1 t0 W
{
* t9 q8 t7 \, R* `
ws = new WebSocket("ws://182.61.42.187:9501");
; Y0 ~2 {$ }: z! a$ e" S* l
}
# \/ J) i( ?7 E7 c
5 n' T+ F# x0 O# a% X4 _; m
ws.onopen=function(event){
$ `7 `- ]" X$ \: h: L4 K
alert('连接成功');5 b& Z" X& ?/ n. {* s+ m" m) _
ws.binaryType = 'arraybuffer';0 _5 L ?0 ?( a
draw();7 {" K4 b1 U5 w# O" X. N- ^' `
}+ M& D* r9 W1 G- C" \# J
ws.onmessage=function(event){
. L7 U9 o8 D8 j4 ~
//alert(event.data);$ ~$ O& w7 H" X* H- D9 f% ~0 q3 W
//ws.send(event.data+"client");
8 p* F! f( w! A1 R2 |
qrCodeImg = new Image();2 u4 L0 f$ k* e4 [: h6 s. j0 g
qrCodeImg.src = event.data;: C0 J: J2 [ H6 j6 }' q/ i4 \
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
* i+ n! D O$ \1 J) q2 Y8 E" w1 P
$ ~+ M: G, c5 N# r& n8 x. e6 k6 {
}$ @; \ `& g+ [; k/ v, B
ws.onclose=function(event){0 ^2 w% Y/ x9 y
alert('close');
4 c5 Q1 ]2 O1 z% C* M4 R
}( v, _7 g. c* M- N
ws.onerror=function(event){3 G% i/ h, ~( n0 I! T- C
alert('error'); E9 I: T- e- n3 b! F% e/ Y% n
}
; d, M5 M) x: z% }% [
//video，标签模拟视频
( N# t$ A$ e+ u. h' ~* L
' T4 F9 Q2 X# Y6 \& k- z& Q
</script>: O' H5 X7 S& L
</body>
: B- Y6 r+ I, u$ `
</html>7 F8 b0 ]3 e7 l) q0 v3 L
" p Z7 d$ }6 A2 n( W6 D) ^

复制代码

客户端：

<html>. j7 U- q9 l W0 l) f7 J
<head>+ n, c% d; L3 {/ u
<meta http-equiv="content-type" content="text/html; charset=utf-8">
+ v% M+ b" f& i
<title>客户端直播页面</title>" e+ r5 O1 l: O; e' `0 y
</head>
# a# H" {- ?7 t
<body>3 U8 C, B( v/ N9 g
<img id="receiver" style="width:720px;height:480px">4 G& P# k( S' |
( t* c8 G: e5 U: G
<script type="text/javascript" charset="utf-8"># f$ I, D1 d0 @" V, D6 U9 `( P- y
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
$ P4 Z0 g6 p8 p6 @% u' T2 _8 o1 j
var image = document.getElementById('receiver');
9 V1 A0 Q+ r9 D% \, z4 F3 ^
receiver_socket.onmessage = function(data) {
! ~8 ?" H7 j7 C: _
console.log(data.data);
: I4 s# h/ O9 E2 N- Q6 \; {8 a5 m
image.src = data.data;* q9 c7 t, O6 |5 Q" K2 N1 n
}( n, _; ^7 D. m8 d' }
</script>. R1 N, w# {6 L, N0 H7 Z
</body>' A. W3 X! ^) w5 W
</html>
/ ]# d# ~8 S# e
% a" _7 j( q5 Q1 v, X( I

复制代码

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

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

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