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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);, g& d0 N8 {' F5 J$ w% _& O: d
$client=array();3 I2 c, V4 g# a5 L3 l$ G7 i
$serv->on("open",function($serv,$req)use($client){9 x* C# M6 O. r4 M& N' Y
//echo 'connect'.$req->fd;
: F) ?" |; ?! g' J
$client[]=$req;
, w s: \: O+ Z! j* e
//var_dump($client);
# f) i9 N3 g A, ?# n
$serv->push($req->fd,'aa');! \' `8 ?0 l( C1 ]4 d4 |! z
});
/ X) B/ f5 I- e5 }1 l" s9 v2 H
2 D: f% U# T, D9 x5 f2 D! }
$serv->on("message",function($serv,$frame)use ($client){5 B6 X1 R6 x: p }* f& i1 j
/*var_dump($frame->data);
' U5 |; k4 C! A" {) w
foreach($client as $key =>$val){6 q2 w3 B: ]* ^& D5 |- l- v
$serv->push($val->fd,'aa');
* T( n1 x- o0 t) G
}*/
! A& Y/ C) y! R1 n$ G
$client=$serv->connection_list();
8 a& i* N7 O1 a
var_dump($client);" |, v' K0 `8 p% f5 W! V$ J
foreach($client as $key =>$val){) {! V9 o' h7 a& ]
if($val!=$frame->fd){
. y2 L" a) k9 t0 j7 x
$serv->push($val,$frame->data);# [+ y% X. Q, x+ P6 w
}4 \: M) j+ t4 R4 L, B0 ?! `1 l0 {
}
_0 D4 ]8 ?, j2 I# s
+ R7 K- y% x& H9 I. f
});3 ~ d: O u# c1 q0 w5 l0 s
0 k0 ^* ?3 l7 F3 a. x* h
$serv->on("close",function($serv,$fd){# S0 o. S3 w; \; O5 b
echo 'close';; ]' |6 v' m) ]
});
9 u! Y3 [ k% \) k8 _3 P1 u# g1 e
) x$ c( T( k3 ^6 @
$serv->start();
0 W' V/ B( M3 E3 f. ~2 i5 ?
* T3 q7 g p5 t/ w

复制代码

主播客户端

<!doctype html>
3 k% H; f- V; r& ^. l
<html>
( O8 e" W L. }8 K+ `" X8 g0 K
<head>( J9 y! e, @% \9 b- D3 O
<meta charset="utf-8">
& o6 ?: I6 h, g2 I6 z
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> s8 o( \, w+ j
<title>404</title>
4 |6 B4 z0 d$ x1 G' \; a
<style>
, [! I" _# E+ k. A& K
body{, Z- ~8 o- g- J' k$ ^4 f. o
background-color:#444;3 [% v o8 @: O" P. x$ O
font-size:14px;
d* g/ Q3 o8 \6 \9 e1 @4 Y. ?
}" Z6 m4 K. r5 w$ J/ L0 m( f4 r
h3{2 [% G; p: h O: |: c, \: c
font-size:60px;
& k/ G: o* `0 I& v6 E1 o9 ^- x
color:#eee;3 o1 Z, S; o: T: P6 { \* ]! ?
text-align:center;
" R k2 l( g- Y. H5 |, @
padding-top:30px;
3 K7 d/ d" I+ F. B" V
font-weight:normal;; ~1 ~. n+ _, i9 ?
}4 A/ ?6 j9 s+ Z/ a, q$ R- d
</style>
' I2 H- `; `8 N+ X! d C/ v
</head>& N4 D3 G: V; C6 M! y
6 M8 V% ~) b S& ^4 [8 B. A7 c
<body>0 p' _3 s5 V) P0 {$ }( X
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>4 D- O5 d, ^( s* E$ r1 I. J
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
' Q, [! U F: X+ l
<canvas width="400" id="canvas2" height="400" ></canvas>
6 p" I1 _& [# v4 b6 o4 ^/ d7 @
<script>
, `6 p) i, C1 T% X
var video=document.getElementById('video');) j: Z5 l8 z" p5 l2 [
var canvas=document.getElementById('canvas');
8 k7 y+ H( Z b! V/ f m
var canvas2=document.getElementById('canvas2');
$ _- X) h3 _4 z+ M! l9 R8 o2 v
var context=canvas.getContext('2d');
8 y r. a" g- R6 }+ g- \
var context2=canvas2.getContext('2d');' q4 w6 k; a! h% h: R. A3 _' K
function draw(){
, `; F# B3 _2 @# R1 j
context.drawImage(video,0,0,400,400);% w! @2 H f& e0 |& r3 Y
ws.send(canvas.toDataURL('image/jpeg',0.8));
6 T+ z Y; K }: e. v, S: m! y
setTimeout(draw,800);! v& `& w* E- B8 x) }1 W9 [! l
}
, b- E, G( a6 e c% O
9 y; W6 R9 ] h2 ~0 p R! e
//客户端跟服务端通讯
9 d' |( O8 ^3 m& T: w
if (window.MozWebSocket)
- _% ]! X3 R: i8 W/ ~9 o/ o
{
5 p' T# @3 y' ?" }2 S0 r) R b
ws = new MozWebSocket("ws://182.61.42.187:9501");
; w- E2 Z2 ^; C4 S, J* k- f: L
} else% K8 F1 ~+ @$ o/ M
{
5 z& O! O' P# T
ws = new WebSocket("ws://182.61.42.187:9501");
. D- k" L$ e, N0 ^5 O" q
}
: f0 p! Q/ C: `3 `/ R# P
) e6 f4 R4 e. C! W& _& m
ws.onopen=function(event){
/ c0 o& O m) [; e
alert('连接成功');
$ n+ s) `' H C0 n/ u
ws.binaryType = 'arraybuffer';0 D: @' F3 q2 b% j9 a }
draw();+ [6 A2 w& |1 T
}
: |/ L2 a: l, I7 M, S- p# z# @" }
ws.onmessage=function(event){
6 c9 W5 v$ I. P- r
//alert(event.data);3 X- B" o8 B6 k" v" ]' p- ?
//ws.send(event.data+"client");
5 ]. @: T/ H4 H; b
qrCodeImg = new Image();
) A2 X1 c* _% q5 ?1 r' h4 P& q
qrCodeImg.src = event.data;
# Y1 r6 N5 k7 c$ d* H5 W
context2.drawImage(qrCodeImg, 0, 0, 400, 400);* `# l$ l# [2 Q7 W' b
6 t2 J% ]" x9 [9 C2 ?
}8 ]4 \6 @0 Q" E) u
ws.onclose=function(event){( `! O8 k. W, |( d) e
alert('close');
( p* W; d% W- `& O) j9 _* [* l
}5 G( H' ?1 w( d. T
ws.onerror=function(event){' H( _5 P; W; K; U M0 Z
alert('error');9 S" @2 n5 M- r+ Q$ e
}
7 C9 R8 @; E1 b; r; N! v# D+ i
//video，标签模拟视频
. ~/ p9 B5 Q0 M" [0 O
0 i1 T O6 X' M8 a, ^. k+ Z) Q
</script>
2 ]) d; }0 E1 p* Q3 ^ K
</body>) {2 m$ q, l# |# \
</html>2 B' t' y3 k5 T
! t9 Z U. [0 f

复制代码

客户端：

<html>
$ Y5 `' K% L1 U& z9 X7 d* e
<head>1 ~* ~3 T) p4 {
<meta http-equiv="content-type" content="text/html; charset=utf-8">5 V9 C5 {6 N! F" h, i! U- L
<title>客户端直播页面</title>
( H0 X; p \0 @% `8 Z
</head>
# H( m. \4 F! X, d8 Y& M
<body>
4 n% \* ?+ i3 Y& R* P( X6 t& D
<img id="receiver" style="width:720px;height:480px">
) g8 B0 Y3 O9 p, k) j. |1 I. q4 ~
$ n* ]- b$ s! o
<script type="text/javascript" charset="utf-8">2 V5 q1 ^$ {3 e/ F
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");# W m: d# O: N; j$ R d
var image = document.getElementById('receiver');, {4 _& K' y, O- D U& @
receiver_socket.onmessage = function(data) {9 l! @: R7 L% X
console.log(data.data);1 Z+ d( D8 A# X% H- Q0 |% l
image.src = data.data;
$ l8 D6 N: R _* V+ B$ J
}
U( W7 W, M1 T! [$ N- |1 g4 S; ^
</script>
9 T( G$ u1 I" Z- i+ O" [
</body>
. w* @; ]: R: g4 t7 b
</html>
& D3 l# I+ ?. e% Y; o* d
- Y8 F2 E9 b" o

复制代码

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

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

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