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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
5 \+ p7 s/ Q4 e" y1 G
$client=array();
1 g% ~! _ O# A
$serv->on("open",function($serv,$req)use($client){
) |7 z% X# i, t4 f9 P# ?( p
//echo 'connect'.$req->fd;, f# B6 X& C6 [3 B2 N
$client[]=$req;4 e$ m3 J! e$ [" m# i# t
//var_dump($client);
! C- |5 J5 |* X. E
$serv->push($req->fd,'aa');
/ X) C( J5 Y9 O! t. S+ U3 X
});
7 Q) i I4 {, W
8 M5 S" R( t. ^$ p
$serv->on("message",function($serv,$frame)use ($client){
" r. R& i+ G: S4 z" B
/*var_dump($frame->data);+ ?/ K. x! ~) t$ t' k6 A1 k+ l
foreach($client as $key =>$val){7 w$ K$ A: S/ z
$serv->push($val->fd,'aa');
}*/8 L" F/ p: W1 i: M% F) {5 R
$client=$serv->connection_list();9 }' D4 c% R- M0 Q/ c3 A
var_dump($client);
5 j7 `4 J4 F4 N. Q& |/ f2 m
foreach($client as $key =>$val){- K# s! O4 J- d& I1 J) Y& U3 i6 x5 a
if($val!=$frame->fd){
0 R* L3 W; {* M v. ~+ z, {
$serv->push($val,$frame->data);" q% W2 Z9 U8 s
}7 p7 S! Y# z: N6 _
}" R' o* d$ q& @
2 U+ b( ^1 K4 Q7 W* Z1 V
});) ] t k- z* v$ m* [* m
$ |- @( G/ s3 u4 \
$serv->on("close",function($serv,$fd){+ X2 f; q2 l1 |/ ?- h G! K! m3 Q
echo 'close';
; H1 g, I" F+ b0 `
});& h4 i, N; S/ @
! c- F/ H% X$ p: H! ]9 f7 F
$serv->start();
1 v; T+ |! H& A
9 v7 X! \% ~; z8 x) p" L3 [

复制代码

主播客户端

<!doctype html>/ H5 s, b4 l# n) _$ k* Y9 T
<html> B9 U2 v" Y8 q* Z! K. s
<head>
, o7 i$ C9 F( p& q
<meta charset="utf-8">
6 G$ c b U" M
( \ T [! F$ H" f% K( V% |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">( v- P, C( M" R8 k G$ c- ?
<title>404</title>: A. A w7 A- I5 o( J
<style>% u0 J5 _4 n2 I
body{
. F: {2 ]! {2 w% J3 D# n
background-color:#444;: \8 R2 Q6 @6 m, c# C7 X' c
font-size:14px;' W! z& z- _+ I9 N; {) ]$ L
}
4 P! i. y6 s7 ]) j: D. D
h3{* l, J- d, t# S" z4 E3 j
font-size:60px;1 x% X f- h1 t5 O+ {9 T4 m* Y3 h
color:#eee;) L x! \: y% y* a" w, k0 `
text-align:center;
4 V$ o' J6 X* p& [. D7 B' Q7 D5 l0 t
padding-top:30px;
# P- H9 C# f! h7 h0 W7 C' P1 y$ O
font-weight:normal;$ d. Z& {: p) M4 ~+ j9 K: Z
}( x( [+ g8 x) e) L" l4 [: \
</style>- R% I- o6 Y U0 ^8 C/ h
</head>
# o3 U, }3 S, O/ r
" o- }" e0 ~: Q% ~) ~. S
<body> @- ] s5 [7 {- ]* ?( S
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>2 b4 t" X. [' a9 W
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>& _; l S/ ^- w+ }* w( k5 A, k8 t, x
<canvas width="400" id="canvas2" height="400" ></canvas>! Q; d0 k: u1 W9 v
<script>
* |" v( T" Q, _" p
var video=document.getElementById('video');* U) R2 l' h+ j9 s1 l
var canvas=document.getElementById('canvas');* D% x$ g1 {7 {
var canvas2=document.getElementById('canvas2');' f3 G- X& B& X# u) F( d9 c
var context=canvas.getContext('2d');7 S4 Z/ X# g+ m: I1 g K& |4 y% ~
var context2=canvas2.getContext('2d');3 I, `7 u% r: l8 [: P
function draw(){
) f% E( a# R9 I8 ^8 p/ b
context.drawImage(video,0,0,400,400);' `9 W- h. F) ]- B: S0 Q! [4 _8 l
ws.send(canvas.toDataURL('image/jpeg',0.8));
setTimeout(draw,800);
) q9 F5 f: e1 Q, d; B! h
}
( j9 A$ |% c3 \9 H4 B
* \5 v* U" y1 Z" i: |3 L
//客户端跟服务端通讯6 g4 c' ?2 z- @; B+ s/ E; Z- Y! M
if (window.MozWebSocket)
- k# _3 q% j$ { d( i
{6 Z3 e& r4 e! G1 U2 q
ws = new MozWebSocket("ws://182.61.42.187:9501");8 V9 z) n4 \4 U$ ]# t6 D, B6 u
} else
# ~- @ Y5 ^. B$ D
{
1 P' e, K$ O, K/ t
ws = new WebSocket("ws://182.61.42.187:9501");: g0 N& W) D7 ]- \# A
}
+ x8 J9 l, r2 S7 {0 r, {
4 @9 h! z3 r( U8 u; @
ws.onopen=function(event){+ e# U! d' F! @: i
alert('连接成功');2 M' W* p$ o6 T- Q
ws.binaryType = 'arraybuffer'; x1 o8 M2 r6 P! n; v
draw();4 {9 k( Y7 L! g* h
}, e1 a! P$ T- H, q
ws.onmessage=function(event){
) ~, `* ^3 h, g0 m
//alert(event.data);
7 Q: O. ~) P# i' W8 R& m k/ C& G
//ws.send(event.data+"client");' |& X3 H6 k( L7 u1 f8 N ?
qrCodeImg = new Image();
( p6 x1 d8 g# h
qrCodeImg.src = event.data;# A& y% A( o0 p: S& Z% n6 M; Y
context2.drawImage(qrCodeImg, 0, 0, 400, 400);) ~( k! \' v9 ? w' `+ l
, M( i# A% d! ?: `8 x0 Z5 y0 o
}
$ J) ]4 d" M j* _
ws.onclose=function(event){
2 E! B: G9 I' X- s0 s% m3 H( A2 q
alert('close');
, N" M' \6 k O& V& j0 M
}7 B: `1 }4 U! l) n" n+ t
ws.onerror=function(event){$ k0 g* ^6 _4 f T
alert('error');% `1 g0 W1 g' y* I. B
}
0 k9 T" D* C* a9 Y3 E X% R* P$ Q
//video，标签模拟视频
) a, h, Z8 u2 A$ T/ g
" m) r# E N R) R6 ^8 A
</script>, u. Y5 ^0 s% }3 K. i2 ]
</body>
3 M$ @6 n2 m' H, b& j
</html>
& L# W3 @# P" i _
6 A( M0 n9 v+ |' Y& W+ q" u

复制代码

客户端：

<html>
$ W5 V. r }2 {: Z4 ]/ Z) P
<head>
# j" t6 J8 b# y G& v
<meta http-equiv="content-type" content="text/html; charset=utf-8">* ?& ^8 A( w& C, s
<title>客户端直播页面</title>
( ]. K9 H' Y, e! m8 k
</head>
. v1 N! c: I1 f/ O% }
<body>4 Q$ A r1 W. g, `2 V! q2 R) S
<img id="receiver" style="width:720px;height:480px">$ K( Z6 x; w5 E7 D/ U; }
/ J a ?% F6 Z9 V
<script type="text/javascript" charset="utf-8">( z+ D( i+ y" ^+ U
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
2 v+ O# {* \/ n
var image = document.getElementById('receiver');$ }7 z8 E( U4 I) |8 ?
receiver_socket.onmessage = function(data) {# u4 q' g+ ~5 @, I( S
console.log(data.data);+ i7 W" h% M: ?% x+ }9 Z0 o8 B
image.src = data.data;- M% T' G- Q9 G$ b1 D- l) ?* ?
}8 H# @; g1 L) S% B6 }0 B/ |& k( m
</script>
* Y7 j& j0 d. L* V
</body>0 r2 ~' L# I& ]! B% n" ~8 r
</html>* o+ W1 Y: H: a* L
/ i J3 S# y9 d* o/ l% J

复制代码

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

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

浏览过的版块

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

浏览过的版块

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