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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
2 J& |0 @3 Z( |4 K6 R7 I4 ?& y) i& _
$client=array();
3 S& H4 I0 G8 H& s: @
$serv->on("open",function($serv,$req)use($client){# }9 n2 x' W" Z
//echo 'connect'.$req->fd;
5 _/ l6 K' t7 K& o+ a0 v
$client[]=$req;' m9 ^* h7 O* z2 b
//var_dump($client);$ n( [( v0 x5 [0 V: N9 O( U
$serv->push($req->fd,'aa');& U+ G/ W. h& b' N
});+ n5 B1 J* y' B; E
7 y3 j8 m9 `' H5 {
$serv->on("message",function($serv,$frame)use ($client){' R2 S1 ^* ~. B5 W
/*var_dump($frame->data);5 E: ~& ^) O$ O7 v7 D* W
foreach($client as $key =>$val){9 v5 W9 N( r" n
$serv->push($val->fd,'aa');/ O# Z$ C7 B8 D3 S& t6 r) X
}*/
" ^$ j2 L7 Z0 e1 b. W1 ^
$client=$serv->connection_list();' O9 j3 t/ @2 e8 l# U0 d# e
var_dump($client);1 @: n1 n+ z3 c1 n, w: e. Q
foreach($client as $key =>$val){) O5 f9 a/ u9 V* S6 R
if($val!=$frame->fd){
) k3 A& f w/ G8 g% e
$serv->push($val,$frame->data);
, z% A) J' @; G
}( }' ?: j: h3 O" p
}
8 e! ^0 G# j6 k2 ?; H3 p7 [& k
. o( f. a+ T* A! ?" Q- U
});
( y( ~, ^9 M9 R, c
3 I' a& B- z% j2 v- T
$serv->on("close",function($serv,$fd){
$ D2 D% L7 H% ]2 [
echo 'close';
3 K& ^3 \- l' r* R4 ?% }/ n
});4 y P0 e' ?( |0 H' x$ k$ l$ @$ V2 O
4 U6 C) G: O& N0 v
$serv->start();
- x0 }+ C& b6 X1 J
' n" K9 a) \+ [% [) i% Y

复制代码

主播客户端

<!doctype html>4 x# R2 R. @9 F' I+ H. |+ \ Q' ~
<html>
, A1 F. E$ [$ A+ {- d
<head>
5 V, U. P% @4 P- q/ I0 a( t
<meta charset="utf-8">
# U" R- d6 J! R* Z. Q
% b$ c4 ?0 i3 B4 \; W3 i ]
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">+ d2 B8 W1 R9 ^
<title>404</title>
. _+ R0 d# c( \+ e9 L
<style> o5 o* i4 Q$ R$ u4 L/ Q( [
body{
8 h; b" i" |8 n n
background-color:#444; y) `3 R$ c. S' u$ T7 V# |
font-size:14px;
6 X3 x2 f3 P6 k
}
5 Z7 m5 `6 W# s0 @$ ^' [0 i
h3{
, {# [! d# E/ A$ t6 |. X+ j9 |
font-size:60px;$ m4 [6 d% V& ?1 ~: t
color:#eee;! `7 K I3 C: c, i0 S
text-align:center;. Y/ m( V( P. s$ @0 W
padding-top:30px;2 Q% ]: l5 _! F6 f3 ?
font-weight:normal;9 B' g: I: S: G& }0 B& h1 e3 R @" L
}
$ o1 {3 Y' k! I; k
</style>. h P2 t& K4 I9 w
</head>) l6 w0 o4 h7 J1 r( B4 X% J
9 S9 b/ `+ K X3 n3 \( N' R
<body>
7 B( {6 K7 ]& A0 j; T V
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>7 O& I, q% Q- B( H
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
) V4 Y6 t0 L Q6 Q* F( T, m
<canvas width="400" id="canvas2" height="400" ></canvas>* a- G: B# v& Y1 c5 B; ]$ @
<script>
3 }9 K( z( D/ s0 k0 `
var video=document.getElementById('video');* D3 I$ ?& h. Y
var canvas=document.getElementById('canvas');
+ A/ s( ~* @ \$ R1 g
var canvas2=document.getElementById('canvas2');' e* {6 G( [: Y
var context=canvas.getContext('2d');7 n; `8 K5 s5 a: ~' ~* z O
var context2=canvas2.getContext('2d');
1 y2 I% D8 ~$ ]6 a: j
function draw(){" a0 @ e8 Z" p3 |
context.drawImage(video,0,0,400,400);
! X7 N9 M" A! a: w
ws.send(canvas.toDataURL('image/jpeg',0.8));; X p# O4 p4 P9 H
setTimeout(draw,800);
& f0 q7 W* j4 T7 f
}6 T5 z3 N$ `0 v5 o6 X3 z
( t& V& N; j1 l7 Y
//客户端跟服务端通讯7 N3 o4 \* u3 {% w4 L
if (window.MozWebSocket); w$ w) j. @- Q) J
{
. a% a/ i P5 { p
ws = new MozWebSocket("ws://182.61.42.187:9501");
} else; H, t$ v# N; q0 C- n* C
{
2 C: x( N6 H0 Z' k2 U, |
ws = new WebSocket("ws://182.61.42.187:9501");) k/ m2 t( N |9 l
}
8 l1 s2 l4 [* p6 P- q: `$ S3 l
& H1 }; _" X) Y& t( m1 P/ P" f
ws.onopen=function(event){
9 k- P! R) {/ a* Y* b* E
alert('连接成功');
- O% ^7 x5 U) `5 \: i
ws.binaryType = 'arraybuffer'; k- n6 E2 p/ |7 h4 ^
draw();
$ f7 Z6 j9 ^5 j7 `
}' X+ A8 X' a m& k6 m
ws.onmessage=function(event){# a* }* H& f) B
//alert(event.data);1 {. G9 f6 |% O8 v; V. k4 ^% q
//ws.send(event.data+"client");/ {# B% h0 U3 F! w8 F3 v) W
qrCodeImg = new Image();
9 a0 A7 M+ a1 |4 A
qrCodeImg.src = event.data;5 j, U# n& p% G# f
context2.drawImage(qrCodeImg, 0, 0, 400, 400);2 Z8 u3 O1 Y+ m$ f
! F8 S8 C& z2 \2 j) u
}
5 @% d$ b. N$ V1 D- H [6 K
ws.onclose=function(event){
3 a9 j& L" U) J9 P2 Z& ~
alert('close');8 b4 b8 v& m; z* k& g; i- I9 o
}+ @7 q5 X6 S0 N3 H! x
ws.onerror=function(event){
) k S$ D( V9 z5 ^
alert('error');
6 e- b3 d% J3 a+ Q* Y( l
}* z+ B9 f4 ^9 V3 H% z( |
//video，标签模拟视频- a( @* O* m- |5 \: J/ }; A
* Y4 G! r' ?$ i7 z8 J3 s
</script>7 ~6 `: ]5 q- n8 P: Z6 O- ?/ O' }
</body>
4 ~2 c/ _7 u" x. I7 P
</html>
& M: u& K: V8 t0 _ R$ u
, n# p# t& \9 m2 ]! W

复制代码

客户端：

<html>$ t. S, \) d9 z5 U Y" m
<head>
6 W# K. y; } c% Y6 g' h
<meta http-equiv="content-type" content="text/html; charset=utf-8">/ n' x3 R1 E2 |
<title>客户端直播页面</title>
8 ?* p6 s8 [9 d; K( p
</head>
0 W1 T: b$ j, {5 `+ Y/ `
<body>
9 z* j0 |& O2 J/ j$ a" l& `1 ]
<img id="receiver" style="width:720px;height:480px">" w0 z0 f# r+ w3 M& ?$ A
" Q9 J; q/ ?+ B1 V! \ J
<script type="text/javascript" charset="utf-8">
% ]' M5 j2 B! R |; t/ V
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
& c5 D" W1 j9 G/ w+ N
var image = document.getElementById('receiver');* F4 `5 O4 o1 O
receiver_socket.onmessage = function(data) {
: @! F' \( c H- |
console.log(data.data);
2 ]2 h1 \6 L3 [8 a
image.src = data.data;6 e, ?3 G% ~& C
}
- {+ s0 V* _, Z5 ?- J
</script>. q. J4 Y5 `1 \% Y& T
</body>
' c3 ?, }: E6 H' Z' S: o
</html>. N) c( N& k( m, Y% r# ?4 W
& m7 ]- G& i% q

复制代码

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

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

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