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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);5 P* p- e& L1 R& _( d0 W( F) D
$client=array();9 C1 v( Y$ J2 j$ _. C$ o9 ]
$serv->on("open",function($serv,$req)use($client){2 o M( R, b1 ]8 K [5 i. f' k. ]
//echo 'connect'.$req->fd;
6 E2 L: R& b- T$ W6 n3 V
$client[]=$req;2 E3 w: h0 L, P( Z) w: k
//var_dump($client);2 e. N# E% X+ `. }8 u$ v6 o0 f
$serv->push($req->fd,'aa');
+ [2 M7 f& V- }) c' {! q
});
: K" s. ^* y. U6 V
8 Z$ Y4 [! S0 {: v
$serv->on("message",function($serv,$frame)use ($client){
; l% t& Y2 ^+ J8 _% a
/*var_dump($frame->data);$ Q( I! H, r( O% Z
foreach($client as $key =>$val){- X# U* }7 a2 L! A; x) g
$serv->push($val->fd,'aa');
' A# ?) ~$ ^) F2 S
}*/ k9 U& p9 _1 n% Q8 e
$client=$serv->connection_list();
3 W! `" t& C7 q' I y
var_dump($client);3 I% S1 F8 ~, d/ n9 {' z
foreach($client as $key =>$val){
8 O* M& S/ q( h4 @
if($val!=$frame->fd){! }6 i1 Q. H# c; w
$serv->push($val,$frame->data);1 A/ E( ?7 F [6 l: }- u
}0 v2 f: U. P7 \: d
}
, c: f- G$ }- n
; M2 Y5 `) T+ D/ T8 s2 P8 @
});
# {- K$ |+ g* j% t0 {) I
# n' a2 D; w, k# P
$serv->on("close",function($serv,$fd){) u, l- X! Z: }. k5 Z& ], x
echo 'close';
9 E( z. N- ]: d% T" T2 r
});
2 O6 i4 P+ O4 d: x/ f
7 v" T2 S- l0 ^' ~ ^
$serv->start();) H5 Q4 D9 A- n# f
. o" c9 h1 N' g

复制代码

主播客户端

<!doctype html>
/ B- I+ x+ o7 ^. X E
<html>
5 z8 }7 x; w0 f9 b6 }! @ A J3 R
<head>1 Q$ x- K" u( `. d' t# |3 L
<meta charset="utf-8">
O3 ~ ?8 Y9 m! u5 t6 s
, G `+ I) E! b% O) T; u' h* S
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
. X) j! C& W4 W
<title>404</title>9 Y! K( C! u4 `" Q! h' o
<style>8 X8 e+ z% N3 l( @6 Z* b( c
body{ q* D! f: V" \+ F9 v+ j1 i
background-color:#444;
' U( a- ]) \" q* s: a' r
font-size:14px;
, A3 F: u. S7 c0 ~, n/ e1 \
}
( S6 N' k2 f8 C9 P9 L: ]
h3{
2 C( c; C5 U- o% \( V
font-size:60px;
5 j7 x; P- q0 D& D
color:#eee;
' A2 ~! ]5 J; Q: `) Z) N
text-align:center;" z" Q3 U% g2 S9 t
padding-top:30px;
m7 f0 ]* m% M4 A3 P; m1 m: z
font-weight:normal;( v* v2 }* _& y
}- i1 q9 s1 M, E' Z L. }
</style>
O! G3 @: M9 f
</head>9 Z( }3 M. C, \' C3 Q8 Y
+ y; ^+ X o. c
<body>
" `5 S5 C- `& ` a
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 J7 f# E. F: t7 V9 K
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>& e p1 b- A9 E" q+ [
<canvas width="400" id="canvas2" height="400" ></canvas>: t/ ^4 P' Z4 p$ A. K: V
<script>5 G" Z: L/ \7 `+ b
var video=document.getElementById('video');2 W2 q1 d9 u: ]* k, u+ W
var canvas=document.getElementById('canvas');
- F' W7 i0 \: p1 G
var canvas2=document.getElementById('canvas2');
; x/ A: a' ^; C6 ^& E, z* ]; k
var context=canvas.getContext('2d');
0 c: ]: {1 A1 L6 b5 r
var context2=canvas2.getContext('2d');2 S h, s" z- F# A1 Z5 o
function draw(){
4 m M3 D& E$ {, N( x
context.drawImage(video,0,0,400,400);
3 K4 d) {" r$ @- f9 P
ws.send(canvas.toDataURL('image/jpeg',0.8));4 j" s, T' i4 Y
setTimeout(draw,800);
+ n/ B- M! X; x
}
9 s& B, s3 C6 k
! f6 ], Y' h" k/ Q" ]+ ~6 W; X
//客户端跟服务端通讯+ S$ b6 F) w) u. k
if (window.MozWebSocket)7 E p/ n' v6 q" S
{
4 | ~; L+ x5 ?( e% L
ws = new MozWebSocket("ws://182.61.42.187:9501");* b, J; u# D+ U! `
} else
: c0 ]8 U7 @) b7 g+ J1 q: X3 \' U
{
$ { K- p( l0 g( [
ws = new WebSocket("ws://182.61.42.187:9501");
, p9 M7 _& Y% l1 ^0 y
}) W/ f! f- f0 C( f
) [. V+ e2 r1 x
ws.onopen=function(event){$ ]/ N, q" P& P/ d( e1 e2 |; i2 r7 I
alert('连接成功');
\2 D* ?0 U) N: r: q w3 v
ws.binaryType = 'arraybuffer';
. n l9 x1 M% f
draw();
& H5 s- S( V/ h) U
}( ^& X, f" S0 L$ {7 e8 t
ws.onmessage=function(event){
) y1 ^( ?8 l0 C% z; Q# h
//alert(event.data);
& w$ @$ g8 y! D, R9 F
//ws.send(event.data+"client");+ h! a8 @- F2 Y2 K$ x7 y, |4 Y
qrCodeImg = new Image();4 u7 Y0 S8 Y4 N- `5 f j
qrCodeImg.src = event.data;
) J# f9 \# y8 o8 x/ d! a0 z
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
2 u6 |4 \7 r! K6 {9 M/ P# ~- g2 {$ g/ ?
7 y; G# @. ~: ?7 O e0 b4 c* O
}
$ o. U& \& B2 F3 d6 L5 f
ws.onclose=function(event){
! @5 U9 ~6 w' B( i) O( c
alert('close');
9 q) e/ J8 n+ P$ n
}4 d& V8 E$ \$ g! y% V
ws.onerror=function(event){/ K9 j' G6 J7 k" W% }# o/ ?
alert('error');
( x7 V/ w( X5 }7 c! U+ ?
}
8 r4 F; K q* ^. B
//video，标签模拟视频
" F, N1 ?6 C$ C' H4 i! m
1 g" v5 y9 m' p
</script>- t7 U4 u8 r) J$ B' F
</body>
9 h9 V! \- H2 R& k2 }$ E1 L
</html>. {' R" X; s& g! B
6 n1 e% W4 s! b7 z& {, D8 K/ T

复制代码

客户端：

<html>9 @: I; \& @9 s/ ]# d! n
<head>7 F9 p- c9 a8 `
<meta http-equiv="content-type" content="text/html; charset=utf-8">3 @: g- ^4 n+ _! z! p. w
<title>客户端直播页面</title>
; M' Q$ }: D2 O
</head>
, W; m/ Z8 Z! z& ]' b" j
<body>
0 d# @# d$ x+ I0 s# f! J( _
<img id="receiver" style="width:720px;height:480px">
. @, K$ s, f5 v, S% l
1 p! f* \4 c4 l
<script type="text/javascript" charset="utf-8">' ~4 a& F) D# v% r4 g# }1 X
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
8 N, m& [/ }3 S, u6 |7 W9 U. w
var image = document.getElementById('receiver');
5 g6 K# D6 z9 f4 `
receiver_socket.onmessage = function(data) {
" l) `0 g" c* s/ r6 N
console.log(data.data);
0 J7 u) Y q3 X0 ^2 {0 h$ W" c
image.src = data.data;
5 ?- ^6 v9 n6 s% O _8 C- ]
}( a, R1 x G! G: r) ~) h; S
</script>' ]1 ]* j" F5 F! T3 i
</body>: S7 K+ S. `! O! K c! p5 B' G0 i# V
</html>
0 O& H. l& R! S& A+ C
( m# ?: p t2 W

复制代码

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

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

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