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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
3 D( J0 ~- D+ ]' |
$client=array();
" g" P* `6 d8 B& D+ o
$serv->on("open",function($serv,$req)use($client){
! s' ~5 L+ j+ Y4 u( o5 `) Q/ y
//echo 'connect'.$req->fd;
% |; ?4 z1 k+ w: a/ q6 l
$client[]=$req;
# \! v9 [% \% b
//var_dump($client);! L% O6 Z7 @! g- `7 S
$serv->push($req->fd,'aa');
/ t8 \$ e/ C! I% H
});
" [. f5 C+ J& P3 O
% e! X6 G. {2 [
$serv->on("message",function($serv,$frame)use ($client){
$ P5 A2 r, R1 v7 r3 J
/*var_dump($frame->data);
- ~+ l5 A4 l+ z+ w
foreach($client as $key =>$val){
p9 s9 {8 ~3 M. b
$serv->push($val->fd,'aa');
" p" }/ k/ l, y3 ~
}*/
0 P( r: I5 E! u7 r
$client=$serv->connection_list();% u4 @ `! ?' X
var_dump($client);3 v3 @. k. P2 `
foreach($client as $key =>$val){& a* x3 R. i M7 p4 S% F' j( D
if($val!=$frame->fd){
; b( D- k4 C( ]7 O
$serv->push($val,$frame->data);5 b" D4 | H3 u( i+ b7 h& J
}
: z& o/ g, \5 w' i! c
}
' R4 K" n, R. |2 U: S' z$ Y8 A
4 r9 q1 `# h: e/ _- \- t4 N6 \
});
- v9 M; g1 C) A# }+ \) W# j
% I) O7 M# u5 s* P: {
$serv->on("close",function($serv,$fd){5 s6 T) X9 [/ m: H. D
echo 'close';* R8 v* F% u* L# L
});
, U. D- o/ R9 ~% }7 U! G! G
" }1 Z Z4 V }; Y# `' W5 g
$serv->start();
8 C3 K, A% N7 {
) Z0 s" S, {- X2 B. {% ~

复制代码

主播客户端

<!doctype html>
; Z9 |9 G% v% J* f1 Y$ e
<html>( s" `( ]$ R+ }
<head>
( w0 y( Q% L8 R/ R$ A7 m) M3 M& B- N
<meta charset="utf-8"> p( v( v6 c! R/ e
! M, n; p8 s7 r: s% S
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">" w7 p% v* J. b* N
<title>404</title>6 ] O; ~, D3 ]% p- H" ~- W
<style>1 Z# @% g, {2 G* j, |+ f/ j
body{
4 X% Y) w& _- r9 _
background-color:#444;
9 z: Z7 U, W3 p* {6 }8 T" G
font-size:14px;
0 w8 p4 |+ r* ~0 V1 H# I
}
: E. B/ _' h& F5 D+ Y+ h* Z, ]6 x: ^5 U
h3{
- x- a* U/ }# [' N" E. `; }
font-size:60px;
$ g+ w. b6 u% H* R8 W
color:#eee;* j1 k* O5 n. N/ y7 c' ^, o. P
text-align:center;2 P* `+ _+ v. |- F' m# a/ e4 r
padding-top:30px;: g/ O, s. q8 L$ P% ^
font-weight:normal;
, j. w a0 N+ X5 c) S! z
}8 j2 \7 x- z' s5 M" `
</style>6 @/ p5 p# L) r3 L, @
</head>
$ a/ A c" r( w
; u; V) q4 b' Q; ]; ?8 c5 X
<body>8 B" o1 U3 \, I
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>; Y3 `9 ~( Q/ ~- W: f; J
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
- |% \# [5 `4 H# i0 m
<canvas width="400" id="canvas2" height="400" ></canvas>
1 o! Q+ K& {8 }8 Q. D! P
<script>
! ?1 a5 U D- i4 J8 x( g
var video=document.getElementById('video');/ Q; w, w' I: S7 ?" ]
var canvas=document.getElementById('canvas');4 W# N' U, e4 k7 q
var canvas2=document.getElementById('canvas2');
2 F) X) M- c1 _7 n! g' `
var context=canvas.getContext('2d');# d6 R4 s' Q1 z1 y4 T7 h
var context2=canvas2.getContext('2d');
7 J. d6 @0 s2 u5 w0 p9 _8 j8 u& i
function draw(){
8 }, ]' C( t N% f9 G; [0 J0 z
context.drawImage(video,0,0,400,400);
3 s/ Q. `/ b( P" \. i# s {
ws.send(canvas.toDataURL('image/jpeg',0.8));( E5 N3 u$ M: g
setTimeout(draw,800);0 K9 A* U1 z0 K8 Y# Z9 c8 u
}" `+ X, ^ R5 F7 Y, a( W
3 V: a* u! \2 j9 a4 r& Y5 A. P% i
//客户端跟服务端通讯 K0 ?1 Z+ H! [' |- O8 s5 A# N3 d- l
if (window.MozWebSocket)/ S1 u& c1 V2 H! S3 y" K1 B& y2 q
{
4 W4 ?8 T1 ~, j4 ~: C
ws = new MozWebSocket("ws://182.61.42.187:9501");
- }1 v. N; {; j, a7 {
} else* ^+ d w6 s5 ^. H3 f
{ ?$ ^$ F; c) H3 B/ p% V
ws = new WebSocket("ws://182.61.42.187:9501");7 k4 H% X. Z6 F6 p
}$ c7 ?6 p m) p. m
- w. m% c2 O# X6 b* T7 c \# W1 `
ws.onopen=function(event){' k% v3 {/ F6 H7 B9 L! ^: _
alert('连接成功');6 a( r0 ?2 Y; I2 {* I( E. v1 K1 J
ws.binaryType = 'arraybuffer';. s- w9 e5 m+ p9 m( {
draw();
' s% w; z' ]8 i# J
}. Q0 O0 i: L' d. X R
ws.onmessage=function(event){
1 U; P- S8 {4 f+ {, v/ y
//alert(event.data);. M# L( x4 C+ j# |% S y3 g
//ws.send(event.data+"client"); p1 p4 W0 c( N9 X& ~# D
qrCodeImg = new Image();
; {) o6 N2 q( s2 `# b' M
qrCodeImg.src = event.data;! z0 |8 _3 Z0 M* [8 I$ h
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
" a" S' w* x4 U2 P
7 J! O; {' Y$ K+ [1 S. w7 H
}8 o8 ?+ `9 ]. @4 c
ws.onclose=function(event){
4 F/ ~" E* Y/ v5 p1 k1 V" [- t
alert('close');: K0 L( v5 R' H
}
/ \% ]6 y4 |) g( c+ i' C
ws.onerror=function(event){4 S+ d) @# b: r) a
alert('error');0 T; ~; l. q4 j8 Z! r8 n
}% b$ N3 A8 {7 _: |9 U) ~
//video，标签模拟视频
; K7 }- t' d- U1 [+ k
& ]" I3 z# k2 E
</script>% [0 }$ v% D s z0 s' U& L
</body>
1 M6 d. b O" @# v5 N% d9 R
</html>% Y# x& g6 S& z, ]3 C' c
! \, `& W, W+ t' j/ `* Y

复制代码

客户端：

<html>/ M! f. E# Y" P. t6 Y6 A' V0 F
<head>
2 b0 U$ P% @# b
<meta http-equiv="content-type" content="text/html; charset=utf-8">: ~8 i$ U1 p! ?! `
<title>客户端直播页面</title>; z; \# _1 U) Z! L
</head>
) |+ k4 ]6 ^$ X4 X) b( m5 [
<body>, v% d {# T) T$ G( ?+ }7 u ?1 f
<img id="receiver" style="width:720px;height:480px">" @7 v. b( a, Y/ O/ ^
$ a9 f/ T: e, W/ H
<script type="text/javascript" charset="utf-8">) U" Q( k( I% e" m
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
E/ k! P0 p" K
var image = document.getElementById('receiver');
0 c( @1 D, y0 ^- S. P0 T6 F% ~" k
receiver_socket.onmessage = function(data) {
' U: k3 s$ S* ?5 T& z
console.log(data.data);
/ U- B% Y) K3 m
image.src = data.data;
' g: p+ Y! Y/ R0 M
}
+ z+ T8 q) m/ }' f* E6 @/ X. Z5 m
</script>
( |! J/ n% G* I! V' O& b' a
</body>& K8 ]6 ^) ?' T! i1 N: E$ P5 L
</html>6 P, y: B0 Y* \/ Q) @; P
* J. F" f) A. f# b0 h* j

复制代码

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

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

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