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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);0 k- Q+ t" H# ]7 Y
$client=array();) w+ X# f# w5 Z% J
$serv->on("open",function($serv,$req)use($client){
4 C0 K6 F# q4 Q; S' M! G
//echo 'connect'.$req->fd;
* J0 O0 s$ X1 f) c' u' F8 O I$ c6 T
$client[]=$req;; R. ^" X: x7 [3 c
//var_dump($client);
5 L) J" g% c0 w6 ^- @2 p/ h( \
$serv->push($req->fd,'aa');
# q( i( B. G& q: _
});$ p7 y# Y2 F6 R9 v) }
2 d3 ?: E% {0 q: o: k, z
$serv->on("message",function($serv,$frame)use ($client){
]" t' Y/ R) ?( ~% C. j
/*var_dump($frame->data);
3 E' b# D# b3 ^& a9 m( J
foreach($client as $key =>$val){
7 |, w/ g5 C5 i% D. t4 M
$serv->push($val->fd,'aa');5 p9 P2 W% b& Y' y; M0 o! X
}*/3 W8 l' J5 r1 t$ l: ~0 l/ Z' O
$client=$serv->connection_list(); n. @ N L0 e9 V; n% C
var_dump($client);" L% F0 p8 Y0 y$ c" \5 w; q
foreach($client as $key =>$val){
4 q8 Y9 p* W1 P. u
if($val!=$frame->fd){7 q' N1 C. L9 G0 W2 Y) a/ ^) f# |
$serv->push($val,$frame->data);
) g% X& ]4 }% N! D4 {% M! p
}) q& Y5 M: _7 Z
}
& p; @8 v- l$ W/ q8 p$ y# r) h
R6 u* K1 }& W
});
, k1 o: d2 @5 _" b# `
4 B) G0 Y4 p; `# Q$ k( x
$serv->on("close",function($serv,$fd){4 S) T" {/ E. z- g$ [! ~
echo 'close';
/ B- Y. O) D( }0 ]& n
});# R' p5 L1 W% y
, [: A4 e# |, ?
$serv->start();
2 w" |" M$ m2 o
( Q) o) J# h, a

复制代码

主播客户端

<!doctype html>, Y$ L1 ~" S5 \3 ~) D6 s# ^
<html>2 _! e. j4 C0 ], Y& Y/ s1 b
<head>
7 J" r/ Y) l# x f* z: R% B
<meta charset="utf-8">
5 c5 m+ k" }! }- d! u" Q7 a
' N) p% h. V: c1 x/ p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
% y. n6 o9 k1 t' L, Y
<title>404</title>! I' B: w- Q+ G$ Y V) F
<style>
" g; P# N1 B2 s% }4 p) M
body{
% J7 r1 X, ?! I1 V. @/ U
background-color:#444;/ \( Z* i5 r0 `; h J; L
font-size:14px;- c8 e8 z7 P: b3 d% {; z$ ~
}
% W% J" E* q( ^" e1 B
h3{
! V; y- d/ G; d2 u( ~# D- ?, c
font-size:60px;
# `" z* L, t' u3 H6 E
color:#eee;
7 l; E5 g+ N- e6 x+ J9 x# L
text-align:center;
4 K# s# S& I. y2 _2 U, M4 }8 J! f
padding-top:30px;7 g" k* ]! }6 \$ J7 O m( G
font-weight:normal;
2 o, J2 x8 S, U0 r! J
}
) Q" e; D3 G1 t* J( h) i; b
</style>8 }& t- l6 b9 M- @* ?
</head>
) `7 I1 q* ^" Q" I
# e6 `: n* N1 N1 u0 i3 E
<body>
, U( Q: D4 B0 G w5 f: C
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
- i. o( w9 T# z% @1 L0 f2 f* H
<canvas width="400" id="canvas" height="400" style="display:none"></canvas># T/ ~4 l. f& W
<canvas width="400" id="canvas2" height="400" ></canvas>9 a4 Y7 X: ^# {/ s0 w0 t! `0 }0 {
<script>9 J+ l0 k3 r( v0 k E$ {
var video=document.getElementById('video');2 }8 X/ Z$ D2 }2 r. n1 Y4 C
var canvas=document.getElementById('canvas');# a$ S. [- |' p$ c
var canvas2=document.getElementById('canvas2');' l3 M6 d0 G! Q/ p! `! w# x
var context=canvas.getContext('2d');) @! F. r- y2 o' p' h! X
var context2=canvas2.getContext('2d');
$ Z! S- g% }$ q, ?
function draw(){" `- b: o/ o$ T- A, G0 Y
context.drawImage(video,0,0,400,400);
+ U Z/ D) R S" Y! {
ws.send(canvas.toDataURL('image/jpeg',0.8));
r2 M1 t- B: r9 y
setTimeout(draw,800);
. z5 z/ f$ R P& A
}
7 F; i9 _ V4 ?9 W
& m- b+ Q8 a6 p' X. V' F& `
//客户端跟服务端通讯
- T8 U0 g- M$ ]- E* Z9 x
if (window.MozWebSocket)4 g) T! d" l6 v/ l' V- ~' m g3 {4 U
{; L T0 R7 S/ n0 l
ws = new MozWebSocket("ws://182.61.42.187:9501");
% K+ ~) l$ T$ x! K1 \
} else
1 r+ {3 I5 j; ^
{( [' z, Y6 t; z* Q: \
ws = new WebSocket("ws://182.61.42.187:9501");; F8 j( G7 N7 k/ W
}
9 t4 }- U2 I* J p3 S) q5 o
; j$ Q5 B% {8 `6 q: n
ws.onopen=function(event){2 Z+ z# R0 L) `( U0 q
alert('连接成功');
, v( u1 |+ j$ Z8 R" t, G/ F( x. S
ws.binaryType = 'arraybuffer';
: d9 k$ [( Y, r; |
draw();
9 X, h+ C: s c* ?. {
}! e% |2 h3 Z2 z! A. I
ws.onmessage=function(event){
: O M& Q: o1 H; k2 b$ i
//alert(event.data);
! K6 r) H+ d+ {* u, _
//ws.send(event.data+"client"); E4 {$ \# D6 Z* t* O
qrCodeImg = new Image();5 o k5 a+ q3 E+ i! M
qrCodeImg.src = event.data;
6 k% u: |6 k5 F1 _1 D
context2.drawImage(qrCodeImg, 0, 0, 400, 400);3 _: n( m2 k0 `8 G" p
0 d/ j, P4 R; t3 N- P. |
}
6 y3 L, J% O, K# D9 V0 j
ws.onclose=function(event){+ I' b) g, U( z/ Z* `$ ]
alert('close'); b9 B9 J& R$ K9 S" N
}
4 B. ^. ]& b( x# }
ws.onerror=function(event){* [, Y+ d/ c* [+ k7 b
alert('error');
" q. L- J/ a z. S
}
8 ?! J4 A- _* g' v* A
//video，标签模拟视频
9 h2 X2 p# H/ p. t1 @
5 b0 d+ ~) z9 @
</script>
' k% `' R) ]+ I* U. W
</body>
' R& ]2 a" _; r9 a1 i8 @4 e" t. `
</html>- w" V2 y1 f S6 E+ U7 @7 i
% H- B- T1 s% `$ v) E! ^

复制代码

客户端：

<html>: X- |* H& t' L
<head>
+ R; b0 Z' \; A; n8 q3 j
<meta http-equiv="content-type" content="text/html; charset=utf-8">3 c7 m% t& @2 l9 L! Y
<title>客户端直播页面</title>0 g; ~4 A2 d+ ~( s3 L
</head>/ x- F* V4 X4 E! j
<body>& Z7 \/ B0 g; P" x/ g/ O) e
<img id="receiver" style="width:720px;height:480px"> _+ r" R/ S: N2 \8 A
8 i3 b% o4 N7 S
<script type="text/javascript" charset="utf-8">1 d, Q) @9 R& H. x5 c" T! E
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
$ J2 g% z ?! ?6 ]7 v' }
var image = document.getElementById('receiver'); @ p; ~: T' U- H1 d; J( G, a" b$ C
receiver_socket.onmessage = function(data) {/ U+ O% x J7 l- P" J$ ^
console.log(data.data);
1 t: y9 p! M* b. ?
image.src = data.data;8 W7 r4 |8 i, j0 H$ U7 x! \
}
5 R8 h5 I$ \% q
</script>
- J8 y' J6 l1 F4 J
</body>
* ^8 F; `) A3 O& T
</html>
, w/ Z! Y5 _/ T1 M( X. Q9 v
2 g5 C5 Z" G6 y; K

复制代码

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

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

浏览过的版块

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

浏览过的版块

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