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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);+ ~. n. U* o1 S; R
$client=array();
7 G* a3 f2 O3 |. B
$serv->on("open",function($serv,$req)use($client){- K, ^; {6 f0 a. u' W9 w( I9 P; }
//echo 'connect'.$req->fd;
) T: ^/ t1 N7 g. }
$client[]=$req;
' S% I2 q3 E l4 w. ^
//var_dump($client);
, c$ s1 V6 I+ x+ s9 W
$serv->push($req->fd,'aa');
6 @& { d0 c' d) P$ j5 Q
});
( `6 u& K# ~4 T6 G5 {' P
: ~( x( l) G: f5 H5 l& _
$serv->on("message",function($serv,$frame)use ($client){5 p, _5 t7 t, t+ X
/*var_dump($frame->data);
2 o8 {5 Z1 ?9 s
foreach($client as $key =>$val){
# K% l4 u+ T/ y( n8 |
$serv->push($val->fd,'aa');; t* v B" z4 V+ S( J3 h4 g' a, C
}*/
4 k$ Z# B2 Z3 A0 j* _: J8 Q
$client=$serv->connection_list();0 Z% f% a3 i. {: ?0 j2 L/ B- s. |6 _# b
var_dump($client);
, k, ?+ X2 x, J3 S! m& o) C
foreach($client as $key =>$val){
3 X& t0 T/ j! ~/ n
if($val!=$frame->fd){
- I- J8 D4 H# K' X/ q9 m3 q
$serv->push($val,$frame->data);# w6 c7 c% C4 s K, w1 D* Q I) E
}
, p4 j1 H& `4 |; B, e4 g& W
}
3 h$ ~ N7 ^+ Z3 d- y4 B
7 l3 U, h f0 U4 r- s
});. C6 K3 @, O% r9 U8 O, D
- d0 x2 K/ C# {6 `5 Z7 q* H& f
$serv->on("close",function($serv,$fd){
$ d# }6 J+ U+ w% e% g
echo 'close';
; ~( F# L7 h$ X& j5 p
});
- c( N: M/ q" G+ X5 Y/ t7 b$ F3 Y
( K; @8 e6 {) C# K6 u; s7 o
$serv->start();8 m# L3 F$ S7 h1 S9 g. V3 K9 I* y# X% B
1 q0 K+ X) P% g. ^4 O/ S) o9 z

复制代码

主播客户端

<!doctype html>& L9 D5 c1 D, Q5 Y* L2 }" h
<html>1 U V* Q! ?; C- }* P$ Y. l# E8 R
<head>+ v8 C# E% ?7 m1 @, i# ?" @* L: H
<meta charset="utf-8">
' I% |+ Z% _ \* t
7 a# @- y8 V" k6 H0 O
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">3 X" S Q: X; t% M/ f6 `
<title>404</title># e \# x+ p1 V( u( l' H7 h
<style>
3 {" u4 ?7 X% k$ x! O
body{
* d" f; Q3 A3 b( q# z" N# s! A" n ^
background-color:#444;$ f. D( f) d" N( C! |
font-size:14px;6 D( W; j; y" `; z
}
. `0 m; I6 e2 ]- f/ M. N
h3{
' u/ F ?* C5 y3 C8 a/ _/ d/ F. p
font-size:60px;- o+ _/ H* A2 y0 C* Z, S; { U, O
color:#eee;9 A* ?8 B& S' L8 J- X/ d9 `
text-align:center;
9 |& L% p: A4 A6 b5 }* B8 t
padding-top:30px;% z! @6 R$ W, Z' _& a4 N. w P; h
font-weight:normal;
1 l3 L0 I( n3 ?7 t* v
}
; z$ F: A3 C- I% F. k K# N
</style>/ n8 q [) d# Q. m7 ?
</head>* q0 b- k& l+ T! X. S; x; B
+ j* X- F1 y7 h2 A( V
<body> P6 ^- N [, S4 N1 L
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
) G) S4 z5 A5 q% x7 i" M: a
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
* [% h5 H* @9 _5 u1 G
<canvas width="400" id="canvas2" height="400" ></canvas>. Z' v3 a# W5 s8 r
<script>' F0 V6 x. C# j. c) X
var video=document.getElementById('video');. Z: O: b' W0 p
var canvas=document.getElementById('canvas');
% S2 N5 H2 d+ ]& a
var canvas2=document.getElementById('canvas2');/ u7 c) o2 h) S0 g' K
var context=canvas.getContext('2d');
* K/ r" ?, } e9 K, R
var context2=canvas2.getContext('2d');
& f6 m3 f( h- ^# s
function draw(){$ u' a% V1 ^- f9 G
context.drawImage(video,0,0,400,400);. h; I6 M6 q5 G" k, h0 v3 y7 Q
ws.send(canvas.toDataURL('image/jpeg',0.8));
/ ~, l4 P& I+ `6 M- W _
setTimeout(draw,800);# n0 J ^: D7 Q
}4 F2 K& m5 X5 o; P$ a0 ?
. C( B, S" A: s# E! O' j. X
//客户端跟服务端通讯& Q' D% Y6 E. H0 a
if (window.MozWebSocket)
. u" g8 P9 g/ g" V, |2 S0 f2 ~
{
$ w% s/ ?! C1 _7 h" M+ L
ws = new MozWebSocket("ws://182.61.42.187:9501");3 F8 E' @$ D$ ^4 Z3 \% n' h
} else
( n6 U/ B$ v" |# f
{
# b7 E5 J1 t4 j- ?( t: i
ws = new WebSocket("ws://182.61.42.187:9501");
- m9 K0 m/ i8 Y
}
: X- h }/ w7 x; Z; G
8 A& A% g; P6 W/ \
ws.onopen=function(event){
# _1 {: L- Y7 s3 \% z6 T
alert('连接成功');
7 H. f( W5 A! i+ J4 j Z
ws.binaryType = 'arraybuffer';4 L9 A; I, m5 |2 @. \! R
draw();( s# i* N6 F1 A+ \
}
% l7 A K1 O5 N0 N* |8 N
ws.onmessage=function(event){" {+ S: c$ x8 N, R! V( Z
//alert(event.data);! X! C) R1 X3 |
//ws.send(event.data+"client");! [0 y$ ~* x) D
qrCodeImg = new Image();
8 L3 b! B) q0 r. F0 |+ M& A0 [" N
qrCodeImg.src = event.data;- v: i; X8 J/ M
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
2 r; @! N$ w0 ?. R3 h# ~* j5 P; K6 ?
& w/ Y0 H; H; G! T/ `7 P
}
" g/ k6 ?6 E, O9 I5 m
ws.onclose=function(event){
( \9 o7 R A0 V
alert('close');
1 v- A- G% b/ \
}' }9 J# C, B/ R5 f
ws.onerror=function(event){
6 C. H& B/ A" w
alert('error');
5 U- }! R& R Y/ ~! D8 C
}. x7 N5 _& g. \! [
//video，标签模拟视频! |4 o; V! X* `. w
: l' ~3 B' K. i. ]) l5 g8 Z
</script>
" c! P; X- Y5 _* b* V j
</body>
$ ^0 I5 ]5 u8 [/ ^, n# m
</html>
2 ]- j, Y6 ]; L4 O% s7 H
5 g3 r5 e8 M& v0 M

复制代码

客户端：

<html>6 U; C. U# O4 M3 y; ~
<head>8 g2 _ Q) {1 D/ J; ]6 u; o" x
<meta http-equiv="content-type" content="text/html; charset=utf-8">0 m$ v2 _9 ~0 w3 t
<title>客户端直播页面</title>
. M! ]# g( ]5 U3 i `4 ^
</head> E1 C& [4 L: ~# ~* ]$ i
<body>
$ T, t$ \5 G m% y, B
<img id="receiver" style="width:720px;height:480px">
/ `4 h- o! ~/ x% G
7 u$ }+ J+ V0 e/ N# A4 b; i
<script type="text/javascript" charset="utf-8">& j. q4 `% X5 }9 u. P) U# a
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");6 i! r) V" z" ^! \4 `6 ^) f
var image = document.getElementById('receiver');
& e; d: d( M1 v& G& }) C# g! }
receiver_socket.onmessage = function(data) {8 T, r% Y1 u4 l8 q- y
console.log(data.data);
' Z8 Y& Y- a4 j7 x& b! z- M7 M6 t
image.src = data.data;
* v' Z0 H& L% f m1 V
}
9 G9 x. o' b/ W E5 i5 m
</script>) q$ m0 E4 W: s1 ~( Q9 N- }
</body> ]% x# {/ q) _& L- U+ z3 q
</html>& H- _: _' S* m+ |! e
% O& P- T3 M) L

复制代码

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

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

浏览过的版块

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

浏览过的版块

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