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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
8 U3 F! @9 d6 u9 B7 `, l5 i7 Q
$client=array();
# x" m' g @$ B- R6 I
$serv->on("open",function($serv,$req)use($client){
0 y( z" @& A% w0 ]. d
//echo 'connect'.$req->fd;$ x$ F" t$ s' Y% @) d7 }9 L
$client[]=$req;
; H0 A: |* Q4 `
//var_dump($client);" v* z5 ~3 w4 E7 j; t C' }, {
$serv->push($req->fd,'aa');9 p8 L! x! l: g* O9 r* }$ C
});+ }3 u- q/ u) n; a) m
; s4 A, v& v0 ~. f
$serv->on("message",function($serv,$frame)use ($client){9 b- ]- c5 \- [
/*var_dump($frame->data);
7 T R! d- C5 Q: `; M8 j6 W
foreach($client as $key =>$val){: \# Y" ]" T( i; P% l3 ~
$serv->push($val->fd,'aa');' s) z; y& ^2 i0 r5 S1 R
}*/% F, [$ |( K; P7 Z
$client=$serv->connection_list();" I( O( o# m9 V. y5 Y7 J9 Y0 ]
var_dump($client);
5 C! n7 | F% @6 }
foreach($client as $key =>$val){' Z3 K2 q5 ~, _
if($val!=$frame->fd){' Z' T# I+ Y$ t, U1 r6 Y
$serv->push($val,$frame->data);
6 S" d+ ]% f7 Z6 v( v1 z
}
( e7 ^6 q. j) q5 z& t; x$ k
}
. U- g& C" T, q9 D/ U& U4 }" I7 \
* M& p* a J1 H: o0 O
});
% z# I+ J3 Q7 K! B0 |
# [: W8 W2 W! s% U, B8 |4 | T: V
$serv->on("close",function($serv,$fd){) ~& @. Q* \# U2 J
echo 'close';; Y- h" U4 x3 F
});
8 v3 X9 H: C+ _$ X
. ^2 C! F3 t& J. C+ N& {8 ?
$serv->start();3 R7 H/ E7 R- G m& j2 a% V7 ]
1 [8 z! A3 F5 r8 E# B, [- P

复制代码

主播客户端

<!doctype html>, K0 G' J. Y- y/ O& S% |6 c) u
<html>1 e) i! P. p2 w
<head>9 t- F' ~0 y# }
<meta charset="utf-8">' ]4 j* v: F2 e0 I3 I8 r, d
" h4 C! U/ B4 u; q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">( v% S' ^9 h" x- Q: R' }
<title>404</title>
# R+ u. y R+ J1 ~8 t
<style>5 V T4 f7 K+ L$ D+ _
body{
* N0 m7 `' I& p8 t
background-color:#444;
, q/ m. ]7 n `4 w* q1 A
font-size:14px;6 m) Z" b; q, x) H( k
}
6 r8 H! j5 D" W" J0 ]
h3{; r, g2 Z8 A' M. Z. W) Z5 A
font-size:60px;+ F7 o7 L5 o9 r4 |- Y$ b: w7 a; y' v
color:#eee;( R, `( v$ ?8 R2 n" Z4 P
text-align:center;: }/ f0 D. P* s+ O! h) H* t* O
padding-top:30px;
! b( Z" G, A% q1 e! h1 N
font-weight:normal;. {: ]9 P" n# I4 z
}+ A) i! E F: d9 r1 |
</style>
1 ~# T# s [! {& @
</head>
* E+ g R2 y1 V0 ?1 c# ~# X
6 c8 b9 }' w( s. s3 X
<body>; W6 J) M+ m/ k3 q$ _! R E% I
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
( ]8 Y E, C7 f2 h1 ^$ |
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>; K' C g/ G$ J6 I5 _3 w
<canvas width="400" id="canvas2" height="400" ></canvas>
% O+ p4 m' I( U5 h3 @
<script>3 i* b( L$ K8 s$ J" Z* Y
var video=document.getElementById('video');
) E+ R/ g, I' Q2 K" t7 m( ~* Y
var canvas=document.getElementById('canvas');5 X1 z8 O4 A6 F! n" g7 |
var canvas2=document.getElementById('canvas2');5 |8 i, J$ `% b
var context=canvas.getContext('2d');
K: O6 ~: [* Y
var context2=canvas2.getContext('2d');2 y# E9 w1 @. N+ e$ q- h
function draw(){" f& A! K9 u) j0 f3 `, C0 Z
context.drawImage(video,0,0,400,400);' u5 f3 f! l. `6 @( O+ j, P
ws.send(canvas.toDataURL('image/jpeg',0.8));
$ J: Y2 p- c5 ^: Z. _% |* s( {
setTimeout(draw,800);
# z6 Z* e3 @( @. Q: A' A `" d
}! [' ^, A1 L: P* ~. v
% Q- C7 ~" K8 s n
//客户端跟服务端通讯
# ^. J' x& Y& O2 z: }( q5 b h
if (window.MozWebSocket)
! |/ l" O6 S: E4 `
{
, P+ D, @% L% s) O2 Z! i1 Q
ws = new MozWebSocket("ws://182.61.42.187:9501");
+ ]" r: o. l2 h D; }3 N
} else4 V; F/ O/ T- c9 e! }6 C
{
' I. T! q( N9 {- F9 s l
ws = new WebSocket("ws://182.61.42.187:9501");
9 ^7 U+ x0 Z5 z1 P$ S/ H
}
7 ^6 b4 j: X; `' B3 |5 h- l7 E4 U
5 p0 @# O* ]/ \! u8 i) U
ws.onopen=function(event){
& V8 ~# W7 ~2 Z5 I% ?2 u
alert('连接成功');$ d X5 R3 u5 \1 w7 L6 g' ~
ws.binaryType = 'arraybuffer';5 X) c( ^- S6 `* f8 ]) ]" F
draw();
+ o4 V8 {* X+ a
}7 T) |3 Z4 a. P5 }
ws.onmessage=function(event){% b& q; G' m, q' b; l8 R L
//alert(event.data);. s0 E) b8 L$ e5 N
//ws.send(event.data+"client");3 ~- {2 a8 T+ Q4 v- F
qrCodeImg = new Image();1 _! }6 k& Z/ _+ h w
qrCodeImg.src = event.data;* B; j& y) N' m
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
: Z ]) H9 [5 ]7 W5 T7 b5 y
& [; }" C/ }: n( W
}$ Y2 F1 p& B5 w! Z- G, R. s2 _
ws.onclose=function(event){
2 S5 T% a' a! @
alert('close');4 j) Y0 H [. R+ t4 {( }8 v
}! l5 D& L- S2 J6 E' g; g
ws.onerror=function(event){
7 `* R! x2 U% @2 ^8 H @
alert('error');3 S3 v9 D5 ?! k- V9 D% Z+ D
}4 @5 {9 I9 W% Z" \; l) N6 L" }* _
//video，标签模拟视频; Y5 b/ v& u) w& i' e
7 \: K0 \0 v6 ]% F
</script>
# Q7 s( f$ {" V$ b' y
</body>5 y. t1 V' M @7 i% Z
</html>4 q3 G' i$ E' N& Z) _+ E
0 V: D4 ? k! a8 b2 n

复制代码

客户端：

<html>( f$ p% S8 L p* g5 S
<head>: s8 G3 b+ y2 j; ^5 a
<meta http-equiv="content-type" content="text/html; charset=utf-8">) H+ t& O" _2 R/ \& s
<title>客户端直播页面</title>; E+ Y/ l" Z3 C4 y- y+ f9 o
</head>. G! W) W& n+ W8 D
<body>
6 p7 f5 n G1 f- L- X
<img id="receiver" style="width:720px;height:480px">8 M8 u; t9 k/ M, ^
5 t- e: U$ J6 }% i; z3 Y
<script type="text/javascript" charset="utf-8">9 D. k% W `5 A1 [# w
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
' k( K; v& H! }
var image = document.getElementById('receiver');
. L: V/ O2 _5 u. J2 N! d4 F6 P
receiver_socket.onmessage = function(data) {: {- B; t+ q; m9 {; T& G7 t
console.log(data.data);/ J2 S& Q8 f7 ^- O u' Q! Z
image.src = data.data;0 Z( x) c* u" w! d
}. r7 J$ Y% w5 j8 E! O4 J' m
</script>" u# t, o: Q- Q4 ? Z+ v' ^
</body>! D- R* U# V1 k3 C/ m* g( a
</html>$ u* f& W! x0 G
# p& ] K2 j7 j9 l. [

复制代码

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

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

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