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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
- @2 M# e1 P; g! }6 ?3 M7 a
$client=array();
& N8 ?0 B- b! i' h4 Q, N! b* x& G
$serv->on("open",function($serv,$req)use($client){
" ^4 F, ^; j% n+ ?& U
//echo 'connect'.$req->fd;9 P8 G" Q3 I+ _
$client[]=$req;
1 M( `) p# E* y( t$ l0 K
//var_dump($client);1 j. K( s( d8 m2 a2 D- q
$serv->push($req->fd,'aa');9 e) b+ j- i4 f& w0 o; W) p& W
});
6 H K% N0 F! E6 I
0 e# T' T& M, ^$ K7 p% D4 T9 L$ q
$serv->on("message",function($serv,$frame)use ($client){
2 L+ \3 K" d s# G- ?
/*var_dump($frame->data);
7 Q4 o, j& D& G# C) i+ f
foreach($client as $key =>$val){
' i |# E* f6 C
$serv->push($val->fd,'aa');
6 ~- K; |# L+ A* y" o4 J
}*/
2 L5 g* M8 |5 o2 ~4 b4 x# J8 d6 Z
$client=$serv->connection_list();
! i7 V9 E! W! s% d. z# _" [. @
var_dump($client);
& A" e4 j' ?! S' y' z- e$ g
foreach($client as $key =>$val){
2 _5 w6 t+ O& D% A" V
if($val!=$frame->fd){
) f4 d. w% Y+ t3 s
$serv->push($val,$frame->data);
3 q9 ]: ^' _( ]9 u
}$ j- K. i" z2 M4 t# I+ {
}2 p' W5 H3 M; O- _
& V( U2 H' C3 p- M
});
4 y' k) i! i: i0 R6 K
$ R; ^* } g6 t7 ^' S+ H
$serv->on("close",function($serv,$fd){. B' D3 C: g9 `0 K) r
echo 'close';
& T: M7 J5 p) U+ \
});; d" ^$ j/ h. @' H
) {( ?. G8 J+ G
$serv->start();2 M* u) L! y. k( `# g6 Y$ T+ J
+ |2 x6 Y+ [4 ^9 f

复制代码

主播客户端

<!doctype html>
" f3 p7 P9 D$ ?: r. Z; g
<html>
7 q6 h/ Y3 _3 a$ l0 d
<head>$ W/ A! d5 U0 T
<meta charset="utf-8">% W: P* f5 ~/ r; D
2 y& o" }% k" W. |0 K# v) U
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">( R' S h1 X; w. G5 W1 D' q* i' p9 h3 Q
<title>404</title>
" _9 f; _* J c3 O6 |) x' u
<style>
~5 L! p ?) W: d! I8 n$ ~ r
body{4 S9 G% M) G4 _
background-color:#444;5 H0 Q8 n$ F# O$ y2 `& t
font-size:14px;
; @/ e5 f5 q h% ]: j% p# G4 d, X4 A
}9 c+ Y% e4 t8 e6 k
h3{' P6 Z6 i7 X2 M9 l
font-size:60px;2 Y! a" H' N5 F$ ]$ }
color:#eee;# p# L5 o6 e4 M! |# g" ~
text-align:center;
+ d7 C- ]# g& x; R- q, g
padding-top:30px;
3 p0 c" H6 n: r% I$ ~) w) a
font-weight:normal;
2 P! z! Z( q7 x( S6 W
}
: g' E" V. p) m J
</style>0 l- J9 {+ ]2 h! o0 B6 L
</head>! m% D/ K& _: M5 C7 Z
6 u$ ?" h' a1 e1 P
<body>8 x. f9 Z6 I4 h% r* U/ u, Q2 c
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
4 r- D2 b( |5 @' f+ D
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>/ q' n B f" r- s
<canvas width="400" id="canvas2" height="400" ></canvas>" G4 ^. [0 A8 B; b# C
<script>4 Y5 m% {9 N* z
var video=document.getElementById('video');
% ]. s* w4 C* b; ~9 i) V! Z+ M% h
var canvas=document.getElementById('canvas');; Z' W) f* g; j$ ~8 ~9 K2 b- r
var canvas2=document.getElementById('canvas2');2 V% G U G! b; E( l, ?+ \' b
var context=canvas.getContext('2d');
: y' x; G6 ~0 M# ]6 I' L
var context2=canvas2.getContext('2d');
+ ?& l3 I" ]- V. [
function draw(){
+ [6 G0 r+ g8 {
context.drawImage(video,0,0,400,400);
" g( p6 e0 \- F
ws.send(canvas.toDataURL('image/jpeg',0.8));
~& m4 I( ?! m" [& P& S8 N7 Y
setTimeout(draw,800);
8 D$ j1 C( A! }5 I. B
}
5 F1 R6 [& S4 _, d. q
7 t+ o% T- I+ z' ]5 D
//客户端跟服务端通讯# e$ s! c6 {& M* C- E. }
if (window.MozWebSocket)
3 s: K* n e' ] d# T) S6 J
{
/ f2 u4 n& f/ _
ws = new MozWebSocket("ws://182.61.42.187:9501");
) ` l6 T( E, v& Q
} else
1 k9 h. }' v/ g) e6 y+ @
{- \5 |" Q; w# x
ws = new WebSocket("ws://182.61.42.187:9501");
u" y" g6 q+ K9 j4 @
}
8 w2 l4 o! d. c6 ~$ i- f
: z t, G C, W
ws.onopen=function(event){
0 L6 e9 s8 N1 r
alert('连接成功');7 R. A5 }3 ]) G" i0 g d
ws.binaryType = 'arraybuffer';5 |) K, N: Y. ?% p
draw();! u$ T: R& h: R$ `- [
}# ]; W- H. S: T& u+ H1 }
ws.onmessage=function(event){( w* n3 r, h6 B. B" ?+ ]
//alert(event.data);; h2 `# @5 E) o$ m( D! |1 o- C, p7 o0 _
//ws.send(event.data+"client");
6 w$ U8 A; e% h/ O, a- A2 B8 G) v) e
qrCodeImg = new Image();
: K7 `6 u H+ x P+ Q; }
qrCodeImg.src = event.data;1 B' Q6 Q/ i& l2 C& D; T# U
context2.drawImage(qrCodeImg, 0, 0, 400, 400);- i" F$ K: Y5 W% ~$ ]
: D% n/ U& M% x5 x6 M1 ]1 `( g
}
! D* P1 ^& m, `! G" G
ws.onclose=function(event){9 r2 |% ~* X. c- M8 h; f+ W [
alert('close');
2 Z! F' ]4 Z0 w# u
}+ Q/ \3 |& R2 p) p( ~2 x$ R
ws.onerror=function(event){9 q7 H% S) _% i- q& o" J8 F
alert('error');
' Y% m2 `& G8 s
}
! i. Y5 `" b2 t5 w
//video，标签模拟视频
) @; z+ }" H* n
2 H G2 r1 Q( O! e, A- h
</script>
/ ]( h+ C& P% Q0 W+ b
</body>
" e# u( e! W6 C+ m. a. c
</html>7 O- o9 Z7 M& }5 D6 B6 T- ^" o
# @' Q7 j5 H5 A

复制代码

客户端：

<html>/ _- v8 K0 u& K% w
<head>0 i% ]: ]$ \1 P) Z5 G/ u/ G
<meta http-equiv="content-type" content="text/html; charset=utf-8">
$ C3 Y" N- X' ^- r; X' E
<title>客户端直播页面</title>
4 l2 y& q( C9 j' O+ O& n
</head>+ `3 {" ^5 B( o
<body>9 B+ l4 I( _4 p* |% q. P5 R
<img id="receiver" style="width:720px;height:480px">6 z3 o7 }) j8 V' B* n2 R. H Y
# ?$ t8 b$ S: s) }! I; h* M
<script type="text/javascript" charset="utf-8">0 G$ e5 n8 c- p9 U
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");4 ~: P1 Z7 j. ]% y& Y* i) F2 v
var image = document.getElementById('receiver');
) ^/ N; c' O: P" ~& L& E
receiver_socket.onmessage = function(data) {
C+ C2 ]# b: ?( b$ u2 W
console.log(data.data);
' a$ ~/ C5 \/ t& S
image.src = data.data;) G& D! `8 v" p7 X3 N. d; J+ W
}5 n7 Z: @) }3 f" D0 b
</script>
# p# m( ~+ k: I! R% z. h: `
</body>; [7 `9 d5 J9 t8 R5 x
</html>
+ K" u3 Y G2 d2 `, I+ s
9 X: [9 Y% U+ H. v0 z

复制代码

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

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

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