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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);- v3 \* V, Q- x, H, ?
$client=array();3 B7 ?# t/ X' _1 ] q/ B
$serv->on("open",function($serv,$req)use($client){
( d3 z$ z- f" @' @3 u( H
//echo 'connect'.$req->fd;
2 _" E# {! @( D9 Y" R
$client[]=$req;+ G5 \; D7 ^6 ]5 @, c& q6 q, i! e, q
//var_dump($client);
' B! H1 O6 @5 [0 H. k
$serv->push($req->fd,'aa');$ I; }1 f% @$ x( Q8 g% N/ y) }, [
});8 b' G; M3 W1 d
1 F% K' E1 w5 m/ O0 x$ l
$serv->on("message",function($serv,$frame)use ($client){5 V$ Y* t* E- \/ H+ o% F
/*var_dump($frame->data);7 x ^ _8 I p: {
foreach($client as $key =>$val){
8 ?& l8 ^ T" P" u0 a
$serv->push($val->fd,'aa');
7 f/ s- t8 {% X n( o! k
}*/+ S5 O% \; b, O. d: c- w% F
$client=$serv->connection_list();" a7 s- B# ]" q' g
var_dump($client);' Z, s3 T$ S `& B6 G
foreach($client as $key =>$val){
, U( W6 W- K; Y1 G8 Q3 Z, w9 U
if($val!=$frame->fd){8 Y- Y& p7 {! F L
$serv->push($val,$frame->data);8 B; @* c# R) j% P; E K# X- X
}
8 G! D% L: f2 |2 x: X" M5 K
}) m- H1 J7 u' r4 M/ \) S( C
3 X) f& V* h9 w7 h
});
# N2 q6 k# E8 n& J- ]+ h
! F- P0 K! n3 ?3 u
$serv->on("close",function($serv,$fd){
4 P' o/ G5 a2 J4 ]% E" I+ U* x& T
echo 'close';5 ~1 ~1 {6 J1 R/ q6 f" G( }
});' i2 {) t; y" Z, i9 s& Y
! _% z+ f0 [( j. u2 q
$serv->start();$ N0 K. w% ]/ m& w; T
3 k- p* V) |( h: p' u8 J3 L

复制代码

主播客户端

<!doctype html>
- z2 P. d" @% K$ d2 Q7 N
<html>
' D& L- m0 ]) U- t9 y
<head>
) e* F% W& i" m8 z; X1 P
<meta charset="utf-8">0 {3 J$ Y) q0 m9 {0 k. s: N
$ r% K% y7 Q& X( S
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
) T- t. z8 y% k
<title>404</title>
& `" V3 E% ^3 ^! i7 X
<style>
$ o# D. Y7 ?1 E9 u
body{
# D' \# E! Z" G: F( l
background-color:#444;
3 @. v3 g5 ]2 ]5 r- b) {& I% }
font-size:14px;
0 P0 W+ y; X; J4 }) B. F: d# G
}# `: e+ J7 r8 y' ]
h3{
4 o7 h1 e" `+ g
font-size:60px; s* h0 n6 d. d% Z3 w6 s
color:#eee;
3 }: f8 ^- k" e- O3 `9 V
text-align:center;
5 Q) c W3 u/ v2 n
padding-top:30px;
: E4 Y3 E' O9 e0 Y
font-weight:normal;
1 |# M5 z6 k3 r% a/ f
}+ K( x! a9 E2 v8 k
</style>
- M! f/ F7 L2 {$ @. w6 Y* \) j
</head>6 e! `6 c O3 ^" { m( |
/ [4 y- [& I$ a2 ]) ^, Z4 \
<body>% R$ S. W2 c B4 I7 ^" g: B
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
3 S# I$ s: J+ R
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>1 W; R8 @4 g7 m8 F
<canvas width="400" id="canvas2" height="400" ></canvas>
* {) U1 G t4 u! V7 f7 y! S
<script>7 ^5 s4 B( @* a; y( P# C: V
var video=document.getElementById('video');
8 A& u- s+ B& L% I1 B
var canvas=document.getElementById('canvas');3 N- d& k' T) I) M$ H. A' _6 s
var canvas2=document.getElementById('canvas2');
1 t3 A. Z# K( C5 s0 V) y* \0 y- B+ }
var context=canvas.getContext('2d');
& q$ v( @* W6 j/ w) `
var context2=canvas2.getContext('2d');# S& o& ^( m$ T1 p" X
function draw(){
% R3 I4 P9 d' F) H: o" t: H
context.drawImage(video,0,0,400,400);" `+ [! ?9 }* Z3 C) l! v
ws.send(canvas.toDataURL('image/jpeg',0.8));
' s) s1 T2 r4 y9 n* F
setTimeout(draw,800);5 e# a$ }: Z' F3 w7 [2 T( y
}
: I; H v( g4 o/ T5 A1 u
5 t7 s$ l/ E/ O7 O( `
//客户端跟服务端通讯
3 T. l2 X( u2 q
if (window.MozWebSocket)
& q! A4 |1 g4 c N! Q% ]
{5 M: S( X2 [% j
ws = new MozWebSocket("ws://182.61.42.187:9501");: z# ?1 A# d, D
} else. B& W9 g- l& h7 S3 D
{5 |: _+ N' V+ X+ t( g
ws = new WebSocket("ws://182.61.42.187:9501");
/ t5 e) F* h- ~! p: T1 I
}
* u; E& s U! a+ h0 [4 N' _( g
$ b0 V( i& v! r# T
ws.onopen=function(event){
g% d" G3 f7 W" ], b0 V
alert('连接成功');
# \+ P$ y. z2 o0 [
ws.binaryType = 'arraybuffer';3 h% E# u( C# s* r
draw();
7 ~& W- \9 \0 m# ~- t
}' q8 {: q9 w# W
ws.onmessage=function(event){, M* q) A1 B" N. z. o! G+ T
//alert(event.data);
- L @9 |0 ?, ^. Q
//ws.send(event.data+"client");4 S2 g4 z! W1 a7 X* W6 m
qrCodeImg = new Image();
; D& Z- M0 j8 F" H
qrCodeImg.src = event.data;
0 g1 f; z9 w# _3 N2 c' g
context2.drawImage(qrCodeImg, 0, 0, 400, 400);' \: o6 V+ W' [
; _& [, h+ A' i1 R" q
} k3 S% ]* q X% i) I' Y
ws.onclose=function(event){
" N3 O0 P* `( M, G Z1 A/ Q6 ]- z! c
alert('close');. u& P* y) t2 F8 C' E
}* C8 y7 ]- d% v& k! S! M
ws.onerror=function(event){) J1 m/ e( P) L/ M8 \
alert('error');
@5 W) Q2 E* R( v2 ]! r
}/ N* a4 g3 w6 D; U; t
//video，标签模拟视频
0 N7 O: l# E9 S2 s0 S
+ J0 G/ k) z/ @ P- X6 @+ O& J
</script>* U, m0 y9 i: j! Y* C
</body>
: M9 p1 l9 I6 D7 S% N4 S( q0 p5 L
</html>
& R/ z( { u/ g( @$ i- }: {
2 V0 N' |6 n( G" D, i

复制代码

客户端：

<html>$ C5 L6 i" ]2 F9 C8 Z: ? X+ L
<head>
- E2 H5 l# k i3 H, O/ V1 {
<meta http-equiv="content-type" content="text/html; charset=utf-8">
) g" K: y% O3 p1 _9 G2 ~
<title>客户端直播页面</title>
9 M4 \# O( h! n0 ]; L
</head>
/ Q) X b( ~" \! k
<body>
; v0 D) V5 P: l6 a
<img id="receiver" style="width:720px;height:480px">* {4 X7 O9 y; b- c
2 @5 `' \9 n# |; V
<script type="text/javascript" charset="utf-8">
. c6 ~4 |. B+ x1 H( ]! v% R
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% O/ y& w+ K3 g- D5 M1 K# q6 \
var image = document.getElementById('receiver');
% X* i( ]+ A- \: L9 Y: b
receiver_socket.onmessage = function(data) {
4 G0 S# J( s5 G1 l: ^" z$ Z& \
console.log(data.data);; ] H' ]5 i+ _3 y
image.src = data.data;
+ a- r2 H: i9 d6 m3 `+ z
}
# I7 f8 ~- `$ K; G7 g1 b
</script>8 @% R; U- d+ x
</body>
# H t) H2 h0 S
</html>1 M f5 _3 m1 `# @( O
7 x v* F' Y+ d0 M4 O j4 A3 }/ Z

复制代码

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

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

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