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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
: j) V, O$ g7 w- C
$client=array();
+ I) k" x- m1 G9 l6 l
$serv->on("open",function($serv,$req)use($client){
?7 T6 ]* P0 v) O
//echo 'connect'.$req->fd;1 J$ ~, b9 n& k. o* }7 }
$client[]=$req;, q& y+ D% H0 B8 i
//var_dump($client);
4 }, b+ K' _2 R3 K! a# K
$serv->push($req->fd,'aa');
- I. F! m2 k/ y
});
, b& B! Q: f7 G
* r% F0 T" }/ i& G5 S0 C8 Y# m
$serv->on("message",function($serv,$frame)use ($client){0 |! G# c' g, ]' P
/*var_dump($frame->data);
: w5 R% I* m* k# |1 q+ l$ V# _0 C
foreach($client as $key =>$val){
. V! i7 P9 G' d. B! s
$serv->push($val->fd,'aa');: {2 ~9 q, `8 A
}*/1 A- c/ L# @& X! U3 X0 f# D
$client=$serv->connection_list();
5 T+ V3 Q3 k% H# f
var_dump($client);
- V( c- K7 L" O( w- l& R" Z
foreach($client as $key =>$val){
3 T" L1 Q* t2 E
if($val!=$frame->fd){6 y8 ?% |- x+ F7 Y( K) w1 g
$serv->push($val,$frame->data);
$ }5 k( q6 B& q1 ]4 p6 u6 T
}
% J1 Z3 s2 `" p* Z
}" T2 v# \3 r. K, H U# I
! G4 P) ^0 \+ q& X5 I2 ?
});
; g3 I8 x6 l# v j N& C
* f+ b( K" w& o
$serv->on("close",function($serv,$fd){( g1 b' [1 d8 q/ K$ D
echo 'close';
/ \$ o& W9 L4 d1 P$ f# R! K
});$ s( x, c& x( y" v
0 V, Y' m; a8 J/ v( p2 ?
$serv->start();
. v$ `! w# j! J2 `3 J
g7 v/ f2 J: Q, l

复制代码

主播客户端

<!doctype html>
/ o. O$ G0 k$ d# |$ n$ G
<html>
! i+ o2 a2 K9 ~6 ]; S- Q
<head>
/ E3 Y6 z+ K. [+ K
<meta charset="utf-8">
; L3 p) B( P" v5 g7 G
# V- ?( g/ |: \9 \& ?# G
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* [# P' m8 ]- B; M+ I
<title>404</title>! V6 `1 W# ]4 P7 N8 }
<style>2 r! [- l; a. i/ R% _' Q% |) _* Y L
body{$ ^; V1 q+ J' \/ _8 N4 X5 [! L2 `5 S
background-color:#444;
" ~. j7 k' l# y4 Z
font-size:14px;
, s! {+ p1 t. x) j ^
}
- V; U% q7 L* z2 `$ Z0 I5 G$ L1 N
h3{5 J& P7 i5 b: \5 s
font-size:60px;5 L5 V4 o& V1 b/ \* I9 ^# T% J
color:#eee;( h, k0 }4 s; K( Z' m5 u
text-align:center;
. Q+ n$ m3 ]' `% A4 I
padding-top:30px;. `( P* y" e0 k7 u& o9 f
font-weight:normal;/ i8 G6 [* X6 q
} e/ U# Z% ?4 Z& E* M+ s3 ~$ K, K
</style>: j" A$ }, n7 o& Z5 [
</head>3 u6 _4 O% j1 `3 i& r
0 C0 ?- y0 N7 P2 Z9 |" @
<body>
2 E$ x* z! L% g% e! o
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>' J0 w$ [" w- `7 N/ @1 A
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
6 c1 v7 R$ O2 O$ ~. }5 E4 ?; Q
<canvas width="400" id="canvas2" height="400" ></canvas>
3 f% j7 ?+ {7 V% s4 z
<script>
+ W/ w! j( g6 Q
var video=document.getElementById('video');% L: h5 e0 T5 O) a
var canvas=document.getElementById('canvas');* Q3 T1 m c8 a/ x( f- E2 D2 X
var canvas2=document.getElementById('canvas2'); T: L: T. P/ Y* z
var context=canvas.getContext('2d');' P9 Y+ ?( `! X: C, |
var context2=canvas2.getContext('2d');
& C0 s. K! F4 g& m
function draw(){
' n7 H" [/ n; H& a! F* u
context.drawImage(video,0,0,400,400);( O' u: k; b8 x
ws.send(canvas.toDataURL('image/jpeg',0.8));
0 ~4 {& _* E* l2 M6 s: P7 t6 A
setTimeout(draw,800);
' X1 |& z, R" r$ t2 K" Q
}
q3 G' K/ N7 o6 |4 R
8 Q# G7 n3 M( u. _( f/ |" K1 d4 E |
//客户端跟服务端通讯/ E* D; o3 \+ H7 u J5 G4 z, Y
if (window.MozWebSocket)
: O' x* f; d* l1 M7 F
{% E0 ]7 M+ q( @$ [+ T& n
ws = new MozWebSocket("ws://182.61.42.187:9501");
9 w2 o5 ^* I( Q+ [$ d5 e$ ?
} else6 e9 F" X( P6 b1 F: c
{
% s4 q7 |1 ^9 h: s! M3 Y2 F% p9 ^
ws = new WebSocket("ws://182.61.42.187:9501");
1 ~- a/ Q `0 ?9 H9 y
}
& a. j3 r, `9 z# E/ A! X
! i. P1 Y; L0 W5 t u& n
ws.onopen=function(event){
/ ^! C8 o( d/ g3 C
alert('连接成功');6 j) X8 D4 ^, U3 Q
ws.binaryType = 'arraybuffer';
$ C; `- p: D/ E' [+ {5 ~8 Z
draw();
8 S, O d$ ?$ \6 B* z1 F- M( o
}
+ U5 `, W7 Q/ ]4 @" X
ws.onmessage=function(event){; F; R) _1 _6 G8 J" i8 g
//alert(event.data);. N" G8 V* C7 x! m
//ws.send(event.data+"client");
+ D* ]! X3 J: i% J% ^- p
qrCodeImg = new Image();
) u7 ?+ w" j* y1 w7 u2 [
qrCodeImg.src = event.data;
( C: u0 R) u* [ A! m
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
# A; M8 w8 [9 X" M! a- ]5 W* }
$ Z: D, l5 ^& `: S& K' v1 }
}
) K8 F! k. E1 c6 B S( f' d
ws.onclose=function(event){
: X. P- i8 l; w, \
alert('close');
5 S* B* G3 f7 ^& `$ B5 T
}
0 v8 F% W$ n" t# n! V" p" A
ws.onerror=function(event){! r8 E$ O+ c$ G
alert('error');
% k& ?' U; _0 z* m( Z( U' C, n
}! |" y3 z' }# R- z: k" Y. b; r
//video，标签模拟视频 A" o( |$ W, J: x, e e
2 S! k1 T6 w# h4 j% {& G9 x# n
</script>7 p! I# g; K3 {) a9 h
</body>
7 b5 Z, h! `/ S& |& q
</html>
/ C8 `: ~; e: X, P. u7 y6 r, ^% p
; w( F0 e& k% ?

复制代码

客户端：

<html>4 x& P5 h: X3 b9 p
<head>8 |9 o4 Y: V1 }; q) V$ }% n+ N$ t+ d
<meta http-equiv="content-type" content="text/html; charset=utf-8">9 n( Y/ E2 c* ~2 P# h' V
<title>客户端直播页面</title>
. t* s' x5 B$ R, z# l
</head>& [# E+ a6 z2 p4 H }
<body>
$ U: {* v& V- Y& i) i4 A
<img id="receiver" style="width:720px;height:480px">
4 U# I! \2 c+ l
6 `- K8 ?4 m- Y4 V$ a9 H0 L& O7 } V
<script type="text/javascript" charset="utf-8">0 [# H8 e- k; Z
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
6 v6 Z5 w4 G7 u& ~; h
var image = document.getElementById('receiver');
' Z) K) _# [& Z1 ^( V8 b3 R& X
receiver_socket.onmessage = function(data) {
9 d% B2 ^+ m6 o
console.log(data.data);
7 O: B5 o( ?( q3 _5 h
image.src = data.data;
4 p3 O* ?. f) V# i6 K" ?. F# g
}
) X2 @- [2 ?0 \, c- M9 f$ a
</script>
$ \* y: o1 V* L9 C
</body>/ }4 B# ?. Y' n7 T8 N: ]
</html>% Q# h* x' \, t
) n! X X6 o5 a' s, m; }

复制代码

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

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

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