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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. z' n! G: T% @- m2 f3 \
$client=array();
, h5 g( t; I5 ?8 }) ]7 l# i2 L- ]
$serv->on("open",function($serv,$req)use($client){
8 j5 A( U$ }; f e! n
//echo 'connect'.$req->fd;
9 N4 m" e$ c `# j, q. e
$client[]=$req;5 Y8 e3 z/ I3 n+ _9 R) E
//var_dump($client);* H7 V8 I3 ^; U W8 \! W n% ?; Q2 u
$serv->push($req->fd,'aa');4 a3 o& A' t1 }+ a, ^% G2 Y1 P
});" T6 R' u: i# P9 x) |& y. C5 ~
( P8 e& J4 \: T9 i8 {/ B8 o5 ~
$serv->on("message",function($serv,$frame)use ($client){9 ^2 T/ Q6 D$ h7 ]0 ?; n4 V
/*var_dump($frame->data);
/ t% g% u1 g0 p- w0 b8 ^8 I
foreach($client as $key =>$val){0 U3 l# s4 F/ L5 M) F
$serv->push($val->fd,'aa');
" F2 y& k t9 C8 [/ o$ @
}*/3 f5 r5 E2 r& f
$client=$serv->connection_list();9 i" Y# d+ J3 I; v3 i
var_dump($client);: v+ h1 w$ \6 k' M# j. h
foreach($client as $key =>$val){* H" Q: p' ]1 Q
if($val!=$frame->fd){/ H( |# ]$ d) ]$ C
$serv->push($val,$frame->data);# d* A2 p3 y, p) D+ n7 S% ~
}
, J$ B6 S, t: E9 M" v% G
}- q( m6 O- L+ J; b; h* E
' k/ J! m1 e3 z2 c' W" z! M& S
});, v# s7 ]8 q S1 @
' b! V6 x9 L3 S' w: S
$serv->on("close",function($serv,$fd){
7 a$ T* a0 q6 A' x
echo 'close';* D. o" X' n( v! {
});
1 H, z$ x# Y4 V9 Z
8 r1 Q7 t# v% `# U& L
$serv->start();" U* Y+ V) K. B7 U5 E$ e
/ W5 g% t" v V/ j

复制代码

主播客户端

<!doctype html>+ z, @' g& L# U/ A
<html>' G. b4 g$ N' s( }. \5 N+ z
<head>
2 f; }3 d2 w9 E6 ~/ T
<meta charset="utf-8">
! g, n, W) _( T4 M* J6 P7 z
x5 `) h; u1 N
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
# @9 q$ N. ^3 G# N* R5 K9 Y
<title>404</title>" j7 Y% f' Q4 g- O
<style>& y* m, E4 C9 Q6 E5 k9 M5 x+ D
body{& ~9 Y6 K v' V, e# z
background-color:#444;4 T; e5 e4 q6 c
font-size:14px;3 j% _ [7 a5 P' i. R
}
" I: U4 n$ _8 X8 [) u' G, N6 Y1 U
h3{& U) ]. o+ q8 P
font-size:60px;
7 z% d: K' B! @3 T# _5 G0 H
color:#eee;* n! L' b# n" H
text-align:center;
7 h5 I* ]! x9 g1 z4 z
padding-top:30px;
; D4 e# S7 a6 F( U$ R! W p
font-weight:normal;
/ N0 D p0 |8 e$ m$ c- |
}, [- R3 A1 _1 n
</style>0 w) g; |/ @2 z& P2 C
</head>
* }8 a' v3 K! O
7 E# }1 Q% {! U
<body>
; f0 d r: y9 b/ _) C8 C; Z
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>; j l6 a- H$ b0 t
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
. J! T. @; r8 [% u% z& g
<canvas width="400" id="canvas2" height="400" ></canvas>* n4 y7 r/ ?) n% E2 U. b1 D9 [
<script>2 x& G. m" R7 j+ {$ q
var video=document.getElementById('video');
* o! g# P) S) c+ f2 c
var canvas=document.getElementById('canvas');& F+ }& q- }0 }! z6 l/ A
var canvas2=document.getElementById('canvas2');2 ^0 _ i5 d/ S; N
var context=canvas.getContext('2d');' M X) `2 E7 C9 Z
var context2=canvas2.getContext('2d');
& X7 I+ v% T/ d, p* U4 G; M
function draw(){( r1 ~9 b) O/ Z# O% Q- |" y" A) K5 }
context.drawImage(video,0,0,400,400);
& ~6 d9 x8 M3 Q2 l" U
ws.send(canvas.toDataURL('image/jpeg',0.8));
( [0 z" v- ~( |) ^8 W: Z
setTimeout(draw,800);' \7 a3 ?% s1 _: z
}6 I( r2 O/ X1 W X3 w' e/ \- j
9 w- w7 N. ]+ F: F# J6 ^: ^& j" D
//客户端跟服务端通讯, b* G B7 g! O; R
if (window.MozWebSocket)
! F/ M1 z0 @( Y. T, e+ c
{& Z1 }5 G/ l J
ws = new MozWebSocket("ws://182.61.42.187:9501");
# E8 ?: F4 R5 g1 n% X0 E8 m4 r
} else/ c7 T7 K; l& j- K
{
# W/ o4 Q# U# T8 u: }
ws = new WebSocket("ws://182.61.42.187:9501");
4 d$ y' @% v7 l5 f: y
}5 k( s1 W; i6 i) B2 l
, W" E! |0 \; `7 T+ C
ws.onopen=function(event){! N+ J3 q: d) i0 t3 h6 j" n7 k
alert('连接成功');7 {; j6 G9 \5 x; H. ?% ?6 T# k
ws.binaryType = 'arraybuffer';; i% P8 `% A- S8 h7 S
draw();
) Y! F; F. _6 N7 f0 T( j
}6 `8 u; x/ i5 T T
ws.onmessage=function(event){1 y% A; b) M) r/ A& i, P5 d- l
//alert(event.data);& a9 D7 e; `: _4 g& y- s5 p
//ws.send(event.data+"client");" s! B: |9 K( C2 X' P0 p1 d7 ^
qrCodeImg = new Image();
6 ?5 P' _# q% t% a( z* E( }
qrCodeImg.src = event.data;, l/ C" Y$ u$ r }
context2.drawImage(qrCodeImg, 0, 0, 400, 400);9 F: @# z; b% C
! `1 }6 X) d8 w
}1 h8 Y& j5 E0 ~4 J" H+ X' m" [6 L
ws.onclose=function(event){
7 }9 S2 y& p* f7 D- U
alert('close');
8 P# L$ T2 @) K4 v+ {9 @" L: O; l1 M
}
. j$ M: c0 Y+ x
ws.onerror=function(event){7 X1 H7 t6 X: N* U7 O0 ^
alert('error');
# g1 k4 ^* ^9 k5 z$ k
}
! Y" @$ @0 K8 F
//video，标签模拟视频
8 z9 W1 ]8 g6 ^3 Q4 w
1 e, [; j) J. t/ M$ }) p
</script>
2 O, }0 r% B2 |8 l
</body>/ B( t1 r8 j7 h& x N2 x& j
</html> l; c5 o" `. X& r
3 R! W! g# N: m9 G

复制代码

客户端：

<html>% S/ \; s9 S8 W) u$ V! u$ {
<head>
- e+ S/ e6 Z% I7 ~
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3 A1 J4 N0 a4 L1 A9 S
<title>客户端直播页面</title>
& i0 n# R+ G6 a# @1 v' f5 v6 J* w1 X( w
</head>5 K: v# J2 o) B$ G0 n* e
<body>- b, `1 S6 P( s! X8 P; b7 L# {6 g7 K
<img id="receiver" style="width:720px;height:480px">
( C/ Y" v$ w5 y: M9 t! T& N
1 H, N: M/ s! o0 Y5 A4 s5 @3 w, [
<script type="text/javascript" charset="utf-8">
9 |4 Z; P) b( }" T7 J; D/ x
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
8 D$ o7 C' e2 M/ P. C' d
var image = document.getElementById('receiver');
/ s) W, s( T F& d, Y% a
receiver_socket.onmessage = function(data) {
" l6 m, a( w# j; I2 J
console.log(data.data);3 q8 z6 s q' P1 ^: U, }2 G5 C
image.src = data.data;7 U# U4 s: k9 k& F6 N- R, |: R7 T
}
' D. L3 U7 N; C6 ^! X
</script>" e2 s/ `. m4 @. T
</body>" Z ?9 N1 | ]1 z
</html>
: l% r* A; E! a! v7 I
$ v" K$ N$ ]& ^ x& W

复制代码

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

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

浏览过的版块

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

浏览过的版块

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