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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
/ x- B7 u; D% Q/ T) e
$client=array();
& ?6 U7 h5 j: a! p; p
$serv->on("open",function($serv,$req)use($client){
6 x$ Y# c! }' r. s! B; Q
//echo 'connect'.$req->fd;, d* f; r4 W" v" t2 Q; y o( u
$client[]=$req;
( |( z$ a1 V% }& y+ ]& ^) w
//var_dump($client);- t: _9 ^* b+ t( W, ~( l7 p
$serv->push($req->fd,'aa');1 o5 u: [" P2 T; o; ?" d1 o* |
});) T3 Z& i8 j' g% c
4 E! k( U" J0 a; C0 S' Z2 i
$serv->on("message",function($serv,$frame)use ($client){# g! X2 m! G( e4 p- i
/*var_dump($frame->data);
7 U' R+ K& ~' F& }) L
foreach($client as $key =>$val){/ `* a- u4 l. B% R, ^
$serv->push($val->fd,'aa');
' w+ R T5 z7 Z4 v- `* Q
}*/: A6 O& ~7 t3 n6 C
$client=$serv->connection_list();; i% G$ k$ I8 A9 i P
var_dump($client);9 W6 y: E+ H* Y0 {3 |& ^8 ]- S
foreach($client as $key =>$val){! M* U# k- D8 G$ B
if($val!=$frame->fd){
) _% p4 y9 a3 X' u. `: s
$serv->push($val,$frame->data);- [4 e o+ m5 w& r5 f* q) n5 @; y* F
}
+ _% f+ N5 U6 u( b0 v! c" l) Y
}
" q* _( i4 }0 k3 L! B
! K5 {* T6 v2 v8 H$ D2 w( n% w! a
});
2 M# G0 r* U2 ^* s* h9 ?
9 k) X4 X5 q. W# m0 I* k7 V
$serv->on("close",function($serv,$fd){
0 t3 u0 E. c" K3 T; _ I% X
echo 'close';
' f1 f) l, z' ^+ j
});" t/ G& J1 v5 d8 Q
" H) c2 R9 {: p8 A6 v! j8 }
$serv->start();" A: l2 H: y6 a( a% E: M6 u
+ t3 z- V0 M& s0 [3 Y3 e! Y; k

复制代码

主播客户端

<!doctype html>. ~9 ?+ M& n H
<html>
% J$ h4 l; A4 h: ^
<head># I9 o3 |' n" j: ?, V6 U
<meta charset="utf-8">5 U: [) B ^( N
: q! ~3 G2 i2 L: x- x% m' @
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">" x' Z. }# `, I6 r3 s
<title>404</title>: [9 a: e5 E0 M: e, I) R
<style>* F) D+ d+ N7 T! H! G
body{
+ C. \* h! T* P- O. M1 T: t9 b! e
background-color:#444;6 c+ P6 P: u, {7 X* ~
font-size:14px;& M- a* k8 P8 P) s A& Y
}1 K- E: p) C+ a% `& l9 q) I
h3{
! A/ M4 ]8 B) n% @3 Q1 h
font-size:60px;
9 s& H" h- C) y
color:#eee;
/ J/ \* [& z# y; z3 ]
text-align:center;0 s+ |! F4 ]; ^5 z5 l9 K
padding-top:30px;! m! I0 Y$ c# m+ h- A7 Z
font-weight:normal;
8 ^# j' v6 ~9 m x
}: A; g! |. l1 }: D/ ^$ X) j
</style>
( L1 l; G& \% }. e
</head>4 o/ Q+ H3 I) `: D2 V# C
c! o3 w3 c- W* }$ G8 g
<body>
5 T7 S( ]0 {: T
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
/ F8 v% K, [! D4 z+ ^3 [' K3 G
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
( y" k/ F1 W3 t2 V/ r6 l+ |
<canvas width="400" id="canvas2" height="400" ></canvas>7 ]- v* h8 n [( j/ N
<script>
* P1 T# t" R& F3 d# `/ }; ~3 D
var video=document.getElementById('video');# w8 |% \9 {" E/ u7 V, M) Z9 n* s( b
var canvas=document.getElementById('canvas');
+ ^1 g9 R R9 @/ k0 q# ]
var canvas2=document.getElementById('canvas2');
6 m) d+ Q- W# T9 ?3 Y* X3 p4 }, C
var context=canvas.getContext('2d');8 x8 g4 g8 R; q# E$ [ {, H
var context2=canvas2.getContext('2d');+ _9 k7 T) B; @
function draw(){
( y1 d: \+ e; J* R
context.drawImage(video,0,0,400,400);
* Q/ M: k) G {" ~! g
ws.send(canvas.toDataURL('image/jpeg',0.8));7 @& R4 E: g2 s7 ~3 m
setTimeout(draw,800);
7 M/ x4 r* j- ^! f G; i5 v
}/ K/ z6 Z6 |9 p! R& k$ Z& t
- i7 O9 c5 N8 G4 ~$ s5 z5 A* v4 Y
//客户端跟服务端通讯
7 y, n/ I$ q0 l% T+ b" _+ H7 m
if (window.MozWebSocket)- X( ?4 K- U, A* i' z
{: c1 g& t9 ~. U* t& m+ s
ws = new MozWebSocket("ws://182.61.42.187:9501");4 G6 d" c& [" K E0 m+ X! |4 Y$ A
} else9 z* p6 d: F* N+ }+ A7 h
{6 \/ @/ `& v6 r) J" ~4 c
ws = new WebSocket("ws://182.61.42.187:9501");
' J- a$ s+ m: \+ Q( C- A' C" y
}
* x! h9 Z* p# o6 q7 c: g' D+ s
& ]( s8 w9 X0 ?6 f" { V( w5 C/ j6 J5 u
ws.onopen=function(event){' H' ?8 O4 |. x5 V' B9 C% ]+ i! w
alert('连接成功');
. l) X' W- ~7 b0 R1 d
ws.binaryType = 'arraybuffer';
9 h6 q" {% c7 k- ?8 @; W4 q! j
draw();& C; S0 m: D' L1 W7 m
}
0 s0 O5 T F" L0 r
ws.onmessage=function(event){1 j& c; G: y9 X* s8 G0 O
//alert(event.data);
2 y }* i' ]! e
//ws.send(event.data+"client");
4 W0 R- w8 M3 g
qrCodeImg = new Image();& T/ ]& ^9 s5 T& `9 v, P" {( F& j
qrCodeImg.src = event.data;2 @/ n' i( h, g0 [
context2.drawImage(qrCodeImg, 0, 0, 400, 400);8 e& G1 N! f& `; C, D E% y
# p* D: ~( n( u
}. l+ `% P. F, m0 v9 C) n+ Y; d
ws.onclose=function(event){
8 H( y- x Y4 Z# D
alert('close');- T, [& ~ w7 C8 q
}
9 [! j, X2 u* P9 k! J+ i) T
ws.onerror=function(event){
4 K7 l K }* v# e5 K! M
alert('error'); U$ @6 b( u' C/ ?
}
9 w& u5 G6 Y; K& ?4 v
//video，标签模拟视频
O' ~6 X- F: ]1 A; I; |( Q
: z0 t+ E+ R+ M- p
</script>) d; e! O5 ]' I- y$ [- k) V
</body>
1 C( q# D4 R" l. z! T% d5 ]
</html>! @: L: I* U% D8 { ~8 x
5 m$ k7 h5 C0 b& K0 `/ H- x' p

复制代码

客户端：

<html>
" l5 d9 B# ]6 d6 u, c/ C- I
<head>( d, Q% `( u. S! N" C& u: f) @
<meta http-equiv="content-type" content="text/html; charset=utf-8">- D$ V# d! l2 T2 J" u
<title>客户端直播页面</title>
2 F0 o7 ?1 z" S8 {
</head>8 h3 t, \! A5 ^9 Q" f9 l
<body># a- Z; j! v" V$ N
<img id="receiver" style="width:720px;height:480px">. l( T& S0 }; D) g( o) s
! V& w0 K* {3 N
<script type="text/javascript" charset="utf-8">
; [% ]% s* Z& U1 v
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");5 g7 z; X8 ]! d- P
var image = document.getElementById('receiver');8 Y% C, E9 R- T, b6 J
receiver_socket.onmessage = function(data) {
( i$ j: h: V1 R& M: B7 H Q
console.log(data.data);
8 U/ t' @" V. X+ T X8 ^" @
image.src = data.data;
E! @3 Y2 y5 i- f/ m: v
}
+ U4 z1 T7 N1 c: i
</script>
U- x J# b/ v8 l5 f, Y
</body>
3 q3 g' J: Q+ [5 f
</html>. P5 S3 ]5 C& A, {3 n4 {
" e1 `3 S# C1 P$ [ ]# n5 l! G B

复制代码

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

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

浏览过的版块

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

浏览过的版块

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