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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
5 }0 L9 }% a! g d' G# \7 A
$client=array();5 ]- ^; U* d S$ l9 e7 B2 V% y
$serv->on("open",function($serv,$req)use($client){
2 g) m$ O, L4 ]- A
//echo 'connect'.$req->fd;! L$ H- X. Q& O. C
$client[]=$req;
4 N- B* S6 w' b% u
//var_dump($client);
; `* h4 J# S2 w
$serv->push($req->fd,'aa');3 I3 I" a& D x% q" o5 A
});
% n6 J3 R& A. @2 S
% R+ Y3 `" d, F. n3 W
$serv->on("message",function($serv,$frame)use ($client){
. F/ W$ T7 m! `; W& }8 w( z9 A
/*var_dump($frame->data);: t2 \# B9 l. ~) v# g& ~; z
foreach($client as $key =>$val){' ~" P/ X* z: ~$ x+ m
$serv->push($val->fd,'aa');$ u8 j- D9 Q3 K4 t3 v0 b2 L
}*/2 c/ p0 P7 `, O$ h" _
$client=$serv->connection_list();1 |3 @' z* K4 ^
var_dump($client);$ d7 N: t. }% J9 w3 G7 i
foreach($client as $key =>$val){9 C1 P1 G3 v5 m
if($val!=$frame->fd){0 n5 H) @8 Z( i
$serv->push($val,$frame->data);" U( w* w+ d1 Z7 B. i
}1 i. T! _) Z0 K0 C
}
, B( }( X- S1 \# \
. X- p# F( E' O' _' {( ~- m9 q1 R
});- F. A" X5 X0 ~" B" ~; A; j& R
8 z. e3 Z! h% m% B' G' |
$serv->on("close",function($serv,$fd){1 `) w9 t$ k9 ]2 v
echo 'close';9 V$ r- m- B$ w9 A. [9 K8 `
});% b* I! g0 v/ A) A6 x. z$ \& k, X
8 K) |4 L5 I. r/ y: e
$serv->start();. Z- M& b; {5 l" ?( U
! H* u& g; t& h# n

复制代码

主播客户端

<!doctype html>
' F% s2 o$ r0 M7 K: ^+ x
<html>& T& k: t4 x. l/ A+ D/ d: I
<head>
3 |9 h# M6 {4 i2 w
<meta charset="utf-8">
+ ~. M' S; H! a# U
5 s) m6 d: S3 M+ s
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">) Q. k) b' v1 Q5 _# b1 J- e' {; a8 D
<title>404</title>
9 S7 f. g$ e6 U! ~; S, L
<style>* B) f% B$ F: b1 e
body{# V: f% B M" q. {0 S/ U" G
background-color:#444;
9 ~5 V1 W4 |1 x" p! M6 c& P# T9 |
font-size:14px;
. y( E! y2 n, C1 T* c
}
1 X. R, ?0 G6 u3 r/ S! t
h3{
( G, e6 f) o& P2 x S
font-size:60px;% v7 d. m4 H& z1 O' c
color:#eee;
9 U; _5 I/ @1 Y/ v5 q! m" A- x
text-align:center;
: w$ ?% Z/ A- z! j3 q; h
padding-top:30px;
4 [8 B+ N" a( H1 M( t
font-weight:normal;
7 }' E7 E/ c+ J( K0 \7 c7 |' _ m. }
}: V5 S( A3 V' j* o
</style>: u( ~! Q* t4 k7 a. r8 y. u3 j% [% q
</head>. j9 }+ K) \; C9 z& F/ C& W$ q
2 M% g1 [/ o- f+ a3 b/ u
<body>
" t# ]2 i# V2 f1 }( W3 T+ j0 ^
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
t6 O9 P" {# k/ S( n5 i! `
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
2 @- z Z: k8 E4 B i2 u4 H
<canvas width="400" id="canvas2" height="400" ></canvas>; X. ]! p, E! [0 s" s% E% o
<script>
+ q C/ y# Y1 n2 p: B5 D9 F3 U3 p
var video=document.getElementById('video');2 D7 u. [3 X8 Q9 J W: i
var canvas=document.getElementById('canvas');
: p" y. h- ^# ~9 g+ s5 y
var canvas2=document.getElementById('canvas2');
9 ]2 O8 }1 Q- b& b: g
var context=canvas.getContext('2d');
; Q3 G- w0 k7 A) K
var context2=canvas2.getContext('2d');
( R2 F$ H; p4 Y4 }% S3 E
function draw(){9 D9 G9 I' {9 R# O
context.drawImage(video,0,0,400,400);
4 p# h1 g# y" t$ X7 A; t4 e" A
ws.send(canvas.toDataURL('image/jpeg',0.8));
& q/ G9 a6 I4 N# u2 [" B
setTimeout(draw,800);8 `" {! G3 k9 v* B( I1 ]! u+ Q5 L
}5 X U9 }) q) p; \1 R
8 e/ Y: C: G5 @9 _
//客户端跟服务端通讯; D5 ?% T7 n" t; a; ~; Y* S
if (window.MozWebSocket), @! A0 h2 z& r5 B7 U% V4 ^+ L J
{- a5 ^! s, W6 A, _# v
ws = new MozWebSocket("ws://182.61.42.187:9501");
5 w, U1 D& `& U. {1 e
} else
1 r5 t5 f" j! A& H
{. C8 N2 c. f, s
ws = new WebSocket("ws://182.61.42.187:9501");
+ f0 r* w7 b z2 _* r
}3 b2 f* F! v+ o
: U' u7 \' {# O
ws.onopen=function(event){
+ k: P e* c1 Z; K( A/ e
alert('连接成功');3 g. {3 N$ m6 n% c
ws.binaryType = 'arraybuffer';
% {4 F+ n' }% [; y3 g8 x' ^- S
draw();
1 }7 Q0 @" p0 Q' T
} ^4 t* p4 v- y1 x
ws.onmessage=function(event){, i" U. w: r$ R
//alert(event.data);
2 z# b9 d, _' y. p/ D9 R
//ws.send(event.data+"client");7 M4 n6 p: @8 p4 _/ N3 b$ q% V
qrCodeImg = new Image();
$ O6 Z$ D- \& { o
qrCodeImg.src = event.data;' g% g1 |5 O7 H, N* X+ q, h7 J
context2.drawImage(qrCodeImg, 0, 0, 400, 400);4 R. D0 }1 }3 f( [
# h* J* r" Z( y j7 U
}
8 a+ j( l/ E6 g7 c0 y! Y
ws.onclose=function(event){
1 Y& ?4 P6 n) a1 z* }5 o
alert('close');
: z* @% {$ M+ ?" \! J2 _6 u3 D# ^2 w+ B
}' |" \4 P8 r. e; c9 L# i; m
ws.onerror=function(event){; C& R/ c$ c0 V6 a
alert('error');
; L' J1 `4 s7 G" I, n; M* T" _
}
2 r0 }2 q$ _' _: }1 z! n
//video，标签模拟视频/ _& z4 X8 Q# B) y' }' d% J
4 a# g& @* G$ [
</script>3 s7 H9 E$ j8 c" d
</body>
0 y V5 W6 x# G3 P
</html> D/ |1 Z& P2 c: Y' O+ {
$ M0 y/ ~# v# ~& |; [

复制代码

客户端：

<html>
/ s' \( b3 Z; O# a/ M8 Y
<head>
- y# S; O( R/ ]0 \( `# Z+ s' D
<meta http-equiv="content-type" content="text/html; charset=utf-8">: @$ W/ H4 _( H' [
<title>客户端直播页面</title>
/ m+ t: @1 ^6 O% ^+ g6 V
</head>
8 ~0 Q! S* h+ a
<body>1 h2 i& I* L! x5 p
<img id="receiver" style="width:720px;height:480px">( e( \, P8 W: Y7 J
; l2 x. z6 R! y
<script type="text/javascript" charset="utf-8">3 f" X3 W, `& n; V- k! S
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
# w% L% S, }5 R& O
var image = document.getElementById('receiver');( n' f3 G/ r$ i8 X5 z8 Q% z
receiver_socket.onmessage = function(data) {
& k# g0 F* L" d- H
console.log(data.data);$ Q" v6 [+ j: g. a
image.src = data.data;
$ D6 s E+ r% k1 i8 Y8 H8 g7 \+ I
}
8 s9 ^4 t: m3 R/ e
</script>
( B, l8 V# k* s% a, n4 s2 Z
</body>6 L( T2 D; V0 Z( a+ d1 g/ R4 p
</html>
m6 F6 y5 c! @3 o. p
2 s4 }9 V, E. J2 ~

复制代码

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

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

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