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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
' q/ I9 u) T) F4 ~4 U
$client=array();
& y6 a. e3 a" g4 T6 L' i) [' \% |
$serv->on("open",function($serv,$req)use($client){7 P! ~: q o* S) @
//echo 'connect'.$req->fd;* S- h8 o2 z) F7 p Z% z' t
$client[]=$req;
% s; T3 ?% v- X- d! K. J3 g" {6 M
//var_dump($client);: ], ]; D) U: L8 K
$serv->push($req->fd,'aa');4 Q6 U2 h) Y! Y* K/ J/ s) M
});
6 @& n5 S: |7 s1 q Q- g
/ [- O: _% P3 g% l) a6 f2 _" Q
$serv->on("message",function($serv,$frame)use ($client){$ R) B/ P4 x' d
/*var_dump($frame->data);1 o6 L( p( T3 S1 w, u" K- N
foreach($client as $key =>$val){5 Z% z: |2 D4 q8 Z2 h# Y
$serv->push($val->fd,'aa');! v) _ ?3 p8 I) _7 m, i& x/ {
}*/
% Q9 [- ]2 f6 G6 e" I, t
$client=$serv->connection_list();
3 s1 r6 I) C- S" h9 @7 F# W
var_dump($client);8 ]4 Q5 v: H. l' z' U
foreach($client as $key =>$val){9 Q( \) Q9 m0 k+ z" T5 Y
if($val!=$frame->fd){
4 V) h% A1 `; [$ j6 b
$serv->push($val,$frame->data);
! g8 l+ T5 H$ j
}0 W; @2 I/ ~# B4 U* U& E
}
0 z% `. u5 ~6 ~: {7 O, K% R
) Y9 D5 n8 z& R7 K8 J" q7 l
});: V& N% W) n$ ^) P _ u! w1 m
/ ^. L N- A. a0 P# y5 n
$serv->on("close",function($serv,$fd){
0 {$ J( n; V5 O. m. T
echo 'close';
1 k/ a5 [8 C% X4 O
});: e" n: U; ?4 C, }
4 r: L9 r# D( a; ?
$serv->start();
7 Q l" Z! R; K
# ~ e' q/ s$ m; |* U5 r

复制代码

主播客户端

<!doctype html>
) M, d% I1 e0 h
<html>
1 R4 G, x6 J( v8 K. \- B5 A& `/ Q
<head>% n+ Q6 \7 j- D7 }7 Q. G
<meta charset="utf-8"># G# f. @) K: z/ x0 z5 V& A- M$ z; R+ P- m
" @6 Z2 {, l7 `6 J) _3 {* B
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6 J/ M8 v0 h! j9 k9 t" M
<title>404</title>
% x* X8 s6 G. s8 x/ r. B" R
<style>1 s7 A% U) n; D: o# f
body{
0 q7 N; Y6 X M% S8 b
background-color:#444;: ?. g, L5 q0 m0 e# ]* S8 n. _
font-size:14px;
- U3 v3 K7 S' l. n6 N0 y3 w
}
. [, r* X% n, G( _+ c* o7 ]
h3{/ I: U9 I# V& M \4 E4 q z: ~4 ?
font-size:60px;; F3 V9 p5 y+ Z1 ^) ]4 O' f! L/ R
color:#eee;
a. W7 p/ `$ M4 g/ N& t$ e$ v* m( C
text-align:center;
, @! d& z( O3 J1 r
padding-top:30px;
& i: N9 y1 Y3 } t) x/ K6 q
font-weight:normal;
# \3 j6 `# ]) q3 R7 G+ \
}
% {; H. x1 ]9 l1 M% r* L' ]- h: s
</style>
( K: @8 Q' Y6 m- e2 T9 _
</head>
^- R `9 V( c; e1 ], K
* ~ \- S' n1 n/ v9 \7 Y) H1 ?7 [& @
<body>
% u! C+ s/ a8 `$ c
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>- `7 V( g3 x" T9 T
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>, x! u9 d+ v& x, P6 j3 B
<canvas width="400" id="canvas2" height="400" ></canvas>
& x5 C( O* c1 y0 n; _+ @
<script>
: [7 u W) Q! G, k1 U
var video=document.getElementById('video');
3 j* _6 c+ a5 ?8 A, _) r: b3 q
var canvas=document.getElementById('canvas');0 C) g5 C( K# _) b* R1 K
var canvas2=document.getElementById('canvas2');
4 u! u1 U( y9 q; p& a
var context=canvas.getContext('2d');; k7 K% _; v3 V- J& s' j
var context2=canvas2.getContext('2d');
' y, K) m' U# i3 J8 N
function draw(){
* Y& I& \3 C0 E8 F$ \
context.drawImage(video,0,0,400,400);
# }( {2 }7 K5 n% f3 m. I
ws.send(canvas.toDataURL('image/jpeg',0.8));1 C5 f2 m8 Y0 z7 ~
setTimeout(draw,800);% b% l7 |0 r$ R0 _
}' _7 R3 j; o' X
. {; T3 R5 d% C7 t1 J; Q
//客户端跟服务端通讯/ i( b. x' @' T7 M- v. [8 l
if (window.MozWebSocket)$ t- H$ Y( f2 _9 A3 j
{
' R# n2 D* c6 d0 s4 d9 w
ws = new MozWebSocket("ws://182.61.42.187:9501");( _7 P+ S: n- O9 u: m$ _" N
} else( D9 }1 \& E% b3 n5 \4 [! B
{# b8 u" _2 _/ ^ m
ws = new WebSocket("ws://182.61.42.187:9501");4 N- s( m) w) _2 y: V$ ]% ?/ ^
}
! S4 C* d* y& k7 J2 I/ x
, `( w& m# q- H# a
ws.onopen=function(event){
0 N, |3 S8 v+ G* x5 l; e
alert('连接成功');
K9 \2 d, u' V' _* l
ws.binaryType = 'arraybuffer';: f: ^# b$ j+ P# { ~
draw();
" A( n" c7 `; M; F
}
" A6 Y, e9 e) y. }, H/ ]
ws.onmessage=function(event){
% p; B( a9 U& A1 j8 ?
//alert(event.data);& h. l5 \9 G- h$ ?+ C
//ws.send(event.data+"client");
1 Y3 b. a! z- u$ f+ F0 q
qrCodeImg = new Image();6 a. o$ f9 u8 z( w
qrCodeImg.src = event.data;- L9 k4 a' n$ X, Y5 g, s2 Q
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
z8 ?5 _7 E. i9 x9 Y4 x" j) k* N
# X1 H2 X( f5 k$ p' U( M
}
! k6 H- _/ U1 @2 {: e$ Q) D
ws.onclose=function(event){
' B1 O- q3 y4 F8 c7 M3 `8 {6 v
alert('close');
1 |4 K- P i# {. A M, u) T
}
7 c" R0 Y% j' d1 }
ws.onerror=function(event){
" e' y. N3 v2 Z L; b0 Z2 H* F
alert('error');
! ~" k2 |7 B; B4 e" ~! i
}
, i/ Y0 y9 C% \
//video，标签模拟视频; T6 ^4 E9 {5 J! N
8 E3 P7 j$ ^6 u% P D1 b q4 L7 C
</script>
* E: y; I+ }3 B u; y# F$ Z. z
</body>
" t2 p" v. J C9 U- g; [& ^
</html>- [' Q; |$ f0 U- x5 h, c5 H8 v
1 S$ u* k8 D$ q& i8 y5 {6 [" |

复制代码

客户端：

<html># U6 C2 v( Q" `( y
<head>* q( F) S) Y$ d$ w& E/ D# o# k x
<meta http-equiv="content-type" content="text/html; charset=utf-8">
! |! b+ q$ W# r
<title>客户端直播页面</title>5 J. M/ h1 Q& |0 q2 F7 \
</head>, T& M; B. d H6 u) x/ q
<body>
. a; {7 {5 w/ {$ [: ?# z
<img id="receiver" style="width:720px;height:480px">
. H& P- I& \: v# R% M$ G
5 U- E* b0 B1 c7 |5 R8 F
<script type="text/javascript" charset="utf-8"> J- u0 n" h7 P. _0 y( |
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
$ P2 \! _3 y( F5 }( h: @
var image = document.getElementById('receiver');1 a* l4 g9 _+ c' d- F9 V! I+ U M
receiver_socket.onmessage = function(data) {
! e0 L9 W% M" t2 b
console.log(data.data);
8 W( K s; g) n5 P$ ^
image.src = data.data;/ U1 d& A7 l6 B9 g
}
2 ?* z0 i8 ?. b/ X l
</script>- K0 Q6 ~" N }- N! V. I" N
</body>
( J! U! S$ i# X5 s6 k4 O. w$ V
</html>
! X! k( R5 y6 V3 _ _
3 Y0 T2 \ p$ g

复制代码

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

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

浏览过的版块

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

浏览过的版块

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