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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);- M. C" i6 e7 A/ `: j( m/ y
$client=array();' V3 ] o2 i! @( ?( T) {$ k& I% l
$serv->on("open",function($serv,$req)use($client){: l2 ~+ A1 W, A8 m! v
//echo 'connect'.$req->fd;
6 _/ ?9 U9 h1 \6 m3 A0 y! S
$client[]=$req;( N# M# b" f5 I/ @1 t% g _
//var_dump($client);
3 h4 ^) d3 @1 C6 _- C0 i
$serv->push($req->fd,'aa');
2 Q. q9 ^6 f1 e, Y4 a( T
});
' {0 e2 }9 w9 g" Q7 H* a! p* T \
" H, }2 O2 ~$ z; Z2 c& I2 ^
$serv->on("message",function($serv,$frame)use ($client){* [! G P( A$ Z: X6 h# ]% D
/*var_dump($frame->data);8 b( [$ j0 B% p E
foreach($client as $key =>$val){
+ y4 W* T' G2 |; A" s1 g& i9 ^! }
$serv->push($val->fd,'aa');$ a7 ]2 V8 u$ n5 Y
}*/" Y; x4 d; N. f- s: y
$client=$serv->connection_list();$ T( e: D1 Y9 l/ Z
var_dump($client);* d" {& g* t- U# V0 P3 D5 X. ~" _
foreach($client as $key =>$val){
& M: T/ P2 J% r6 |, w
if($val!=$frame->fd){ K, z( m$ g* [
$serv->push($val,$frame->data);
) r, N2 C5 \6 N1 G" }
}
* i9 l2 C5 j/ Z+ y/ T+ S, R4 a
}9 i4 X5 {6 A3 L; ? z8 O9 }& s+ Q
9 b, h! a. h& ?, J3 A+ g# Y" E
});* W+ g; i1 O3 x/ O ^
: y. S" }1 ]6 w: i
$serv->on("close",function($serv,$fd){
0 s* @0 R& N1 H, T
echo 'close';
. @2 R1 K0 Q! H) E }/ n1 o7 S
});
! {6 p j- d( u
; X3 t* N& v! q
$serv->start();, v( Q9 u* A) K& c6 Y
2 W% b d* h# c+ \* g* d

复制代码

主播客户端

<!doctype html>, @7 I/ ?5 f" c) m E; y9 v: P
<html>) w/ z# d# c) m- n" n( ~
<head>1 Q6 U- S- k* F* h, v
<meta charset="utf-8">7 ^6 T8 d# E$ j& N# f! r
! R W( j0 q' d6 o; \
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">0 A! f( ]. h0 v- o4 t/ z9 U
<title>404</title>+ v7 e4 r- `2 J- w
<style>
+ U0 Q& X) o* l* O& p2 m9 T
body{
1 D3 D* X2 u F; H" J5 k/ A, M
background-color:#444;; q. w) a9 |8 n4 z( ^
font-size:14px;
" E3 t. r7 n5 p+ }, g _, I& H9 X) }
} j1 O8 g3 k! G7 N8 l( Y
h3{
& j6 M) w' m! O( g0 |
font-size:60px;2 e v5 ^9 O, t3 P, `& K" ?0 ?& E, s3 P
color:#eee;$ O" ?! o+ {4 p$ y) t+ P; H2 Y
text-align:center;
3 A! A8 m. j6 Y7 x% |
padding-top:30px;
) k* l! ]& I2 A4 I$ z. O
font-weight:normal;
2 X( o+ f! Z5 ^3 V6 w- {# j8 K8 ?0 O
}
( F0 F9 B. r& i1 E. d; D4 Y
</style>
8 `' D+ D {; P3 P) l6 `
</head>
4 y: |- p' H! }2 ~6 P! X, y
" L1 n6 N, G7 u3 e" Z+ a
<body>- C4 e, ?8 Z" ?
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
2 B4 x! w- I' N' r7 _, x
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
/ E6 D1 F8 U5 R
<canvas width="400" id="canvas2" height="400" ></canvas>
/ d, n( n6 M; f. j7 j
<script>' \7 u+ _6 A+ ^& s1 N0 D1 ^
var video=document.getElementById('video');+ Y9 L9 M( Z: {; a+ p" g- A8 U p
var canvas=document.getElementById('canvas');
. l+ J' [ I6 [) w6 p: i( ]6 y
var canvas2=document.getElementById('canvas2');
: H1 H1 C7 W$ ~
var context=canvas.getContext('2d');
: P( _* J( i) ]& Y, t& i
var context2=canvas2.getContext('2d');1 i. u D( I! p% Z
function draw(){2 U8 @" O9 R: G6 U( U
context.drawImage(video,0,0,400,400);
" l' Y* x) Q. x; i5 z) f( Y
ws.send(canvas.toDataURL('image/jpeg',0.8));; J7 I$ G) |7 M' |) S y$ V' L1 P! r
setTimeout(draw,800);. r8 ]$ Q8 f* m4 o8 a/ r- S
}
6 e% N8 F# w, r5 S* V1 z, B2 |
3 H+ I% m- E# b& A. b! P. K
//客户端跟服务端通讯
- s2 G3 K1 w* k& H9 n
if (window.MozWebSocket)% A# W9 X" s1 h* b! {
{* u9 g3 B4 ~/ ?9 B
ws = new MozWebSocket("ws://182.61.42.187:9501");
; a8 y0 ]5 C9 s/ ]7 r' H2 o
} else
# M& G1 {9 X4 }0 n9 C1 j
{8 g/ p, w! V/ H4 Z6 e- H7 I5 f
ws = new WebSocket("ws://182.61.42.187:9501");8 Y* m+ b Z2 g' V9 ^
}# N# ^: I) d5 m. W6 r
f6 b6 n- w* G8 z, X% h& f3 C
ws.onopen=function(event){
8 `1 S$ X% b5 N) g; e& m$ E
alert('连接成功');( D. I; Z5 C ?6 a5 m
ws.binaryType = 'arraybuffer';' i v0 B1 O% t. e- ]
draw();
4 V/ U \! D9 c/ }
}4 D M! e5 d$ W* x) l. B" O( S! P
ws.onmessage=function(event){
' s$ F8 v. y4 s" Y( Z/ O6 d
//alert(event.data);3 E5 [$ `3 x& U9 P2 i) z1 x
//ws.send(event.data+"client");. K5 r ]' ?& g6 l Y) E& p
qrCodeImg = new Image();( o, y6 _9 ~7 M- D9 ]8 l4 w
qrCodeImg.src = event.data;
. e2 B1 K/ c; s9 S3 I; z% I
context2.drawImage(qrCodeImg, 0, 0, 400, 400);6 I' \" f) w K5 U+ p9 I
2 X! F, ]# T! S$ I* x7 B
}8 q, ?- y) K0 P/ A: b2 P# y
ws.onclose=function(event){! u7 u j5 G. k
alert('close');
0 w6 \) o: L$ l* V4 ^9 E
}
' u( m# d7 g9 z0 Z; @ F
ws.onerror=function(event){6 O5 o! b# {5 T ?3 t* @( U6 p
alert('error');
8 G% p9 k# @7 M, P' L: q
}
3 ?: W! U% H' H8 |) H [3 P4 l
//video，标签模拟视频6 T. D8 y3 `+ r* Z( f
2 E, P0 P' K4 Q7 k
</script>
" `, E) K" j! C3 O* ~6 H
</body>
& ]2 _9 v. M+ w# v
</html>
$ Q% f8 X, I, ]% I7 }
3 k) l9 n" f4 t2 [8 k; k: p$ M

复制代码

客户端：

<html>2 U# Q" F" N5 U! p2 i. D8 Q
<head>% Y. v/ I, O' F$ w/ m' K7 k( h
<meta http-equiv="content-type" content="text/html; charset=utf-8">+ s6 O: D; C0 H$ ]9 c) h
<title>客户端直播页面</title>5 v5 y. X. H! D! G' Y0 O
</head>
# d- H H v/ t* f% z
<body>
7 l/ l6 a) H3 K" E7 G% H+ S; D5 U
<img id="receiver" style="width:720px;height:480px">0 ^. o/ q! ?# S8 g" x
6 K2 z/ G1 n! H, i5 r7 J2 S
<script type="text/javascript" charset="utf-8">
, l/ E: \$ P7 d% i U3 E
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
* C+ Y8 U% K) m" e, B, R( W. Y
var image = document.getElementById('receiver');- ~* G6 v! _* H5 R3 n, z+ k& O2 }
receiver_socket.onmessage = function(data) {
7 B# Z5 \$ g* W6 x
console.log(data.data);) {. }8 [+ W! |
image.src = data.data;( J# b) j; V0 V {3 T
}3 g+ {- k' k* Z! w- ^
</script>
2 q! L/ s" K( \; i6 x
</body>
</html>
* N I+ I1 x" p- f J& w
$ m. d/ _$ z2 O# d

复制代码

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

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

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