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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);7 |" G9 d' _6 w; M
$client=array();
& t; H8 ?7 X( [* G
$serv->on("open",function($serv,$req)use($client){$ z5 h- |% z3 A# V+ m5 D4 f4 M
//echo 'connect'.$req->fd;
! O1 c+ O4 O# t) F/ [0 x8 y
$client[]=$req;
' _ V7 k/ Y7 x8 z
//var_dump($client);
. b5 R5 u0 n; P3 p* D ]! T
$serv->push($req->fd,'aa');; v6 I( [0 @, e, P
});' n1 a; h7 J, |' L$ p! x& k
, g m6 K7 `0 T- `
$serv->on("message",function($serv,$frame)use ($client){
3 w. C' @5 g b$ y% }
/*var_dump($frame->data);" {8 ~8 v0 r8 \; a! `8 _6 Q
foreach($client as $key =>$val){
8 T: m4 r- D8 }" Y6 f
$serv->push($val->fd,'aa');2 s2 P& N/ W* K# Y* n
}*/6 k) e8 e, I5 m& }
$client=$serv->connection_list();
! q! z) I* V0 A9 I' f: l3 R
var_dump($client);
' q* t8 K: A# n. M5 @! L
foreach($client as $key =>$val){. Z: `7 @3 ~7 S: t! i
if($val!=$frame->fd){
* N: R. _/ K4 ]% {, R6 s
$serv->push($val,$frame->data);
, V3 D8 z7 F0 v9 z
}8 r% U6 ~- @5 F3 O% n' S1 q
}/ G/ d* s" U1 f- b5 ~1 f" m$ P
6 g5 |0 y+ U( |, W
});
9 C& k% i! T% z0 n2 `' N6 A- W
) w- u6 p6 y% G/ B5 y
$serv->on("close",function($serv,$fd){( K9 T) y8 |% Q* T2 ^& L+ \! O, P
echo 'close';
* h8 E% {3 { V3 B, \. `
});5 l. a& J y% D( E. U
$ j+ d: a6 `% r* B7 \& D# e
$serv->start();+ C) t- @- C: h% D+ l
( j+ y6 w3 ^" d6 ~- y. W9 w% [

复制代码

主播客户端

<!doctype html>2 I9 A. O N6 b$ ~# l% x. e/ ^! s! f
<html>' f" ^1 {0 Z( b; o
<head>3 Z) J; F8 O) @/ z) k# K
<meta charset="utf-8">
0 V& _& u* p! a# |. j+ i0 U
6 i; t$ z) I9 D1 r
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
x# ]8 o+ E3 A2 P- j ~; s2 K* w
<title>404</title>
# N9 A0 H3 M: O0 b/ Q) b
<style>
( i: R7 B& _, U3 n0 |
body{
# K) O* F/ `, @, \' r c1 e) o
background-color:#444;
. w6 G5 q* R7 g- h- h8 ~
font-size:14px;
3 @2 N) Q; R5 N, u5 q
} | Z3 Y/ P8 l9 ^, n3 U
h3{" Y9 ^% k) X! \
font-size:60px;
9 w8 y) ?! S1 J9 r+ m9 y. H# }
color:#eee;
5 Y) ~3 \8 f! T' z
text-align:center;0 ]8 D0 J& G4 X' f
padding-top:30px;
& s" M! O& ?- _+ a
font-weight:normal;) K2 d( N$ K* @3 A+ \$ u D
}
$ A$ O/ V( U; y9 L% h! _
</style>
' l+ _. b* s, n: y$ E8 ]' u& Q# I# T
</head>/ b/ K" {5 E0 g. O% r$ A2 _
& x6 Y8 z: V4 ^
<body>0 P, {) G/ E+ E7 W1 r! q$ |
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>* M0 \) G `" T# G' t+ T
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>$ J' g7 l" R N8 B E
<canvas width="400" id="canvas2" height="400" ></canvas>; C# {! Y/ r% q6 R4 G1 v% p
<script>8 A; p1 G! l6 z6 _' D3 p
var video=document.getElementById('video'); x: E `7 ]8 W$ b- M
var canvas=document.getElementById('canvas');
# ~! L0 N5 f3 ]# i1 @2 ]4 \
var canvas2=document.getElementById('canvas2');6 G5 H$ x/ }7 W- U# G+ h f
var context=canvas.getContext('2d');
7 p3 x+ `4 P& f7 j# Z. w' j
var context2=canvas2.getContext('2d');
% B5 h3 V6 ~! g( u: G' Z! v
function draw(){$ }" U, F5 y4 P+ J2 C: R, J
context.drawImage(video,0,0,400,400);
' |" ^5 C4 o8 P# @7 h
ws.send(canvas.toDataURL('image/jpeg',0.8));
6 k0 \: h" [" ^( P: L! x
setTimeout(draw,800);
' s( W1 v( K9 Y8 \
}
% Y5 b- G% K- z4 _% R* Y
' B/ ]/ g8 `4 [
//客户端跟服务端通讯
. |9 }9 O( _3 z/ M
if (window.MozWebSocket)1 u/ |. L6 X0 A+ \+ K+ }5 Y
{
6 |0 S; n7 R5 Z- B, g2 ]- \
ws = new MozWebSocket("ws://182.61.42.187:9501");: x V" F2 R6 e
} else
+ Z* |7 k8 h; D) R6 `/ C$ Z
{5 S$ C$ t; {9 `$ V& G
ws = new WebSocket("ws://182.61.42.187:9501");" J0 j" R& M7 T/ v" K$ o9 I
}
% P8 B! ~+ q6 G4 T
: Q- m: F. g2 k' ^) I# [ e
ws.onopen=function(event){) u3 C! Z8 c* \' o7 `8 G; T7 T- s
alert('连接成功');
' K6 D) e0 |! S! p8 q( ]
ws.binaryType = 'arraybuffer';
3 l5 u) s6 V" i* S
draw();
# a- t0 W% q; s+ W
}
9 ^) W; o; C9 B1 s2 x! `8 Q2 m
ws.onmessage=function(event){+ E5 M" u! M1 v$ u- B- s3 u) j$ P
//alert(event.data);7 Y4 y/ y3 x6 z* k( u
//ws.send(event.data+"client");) R" d9 v' O3 k2 m" k
qrCodeImg = new Image();9 b; l/ b% w# T8 G" K( r
qrCodeImg.src = event.data;
|' A# I# E3 ^2 g$ G r* P
context2.drawImage(qrCodeImg, 0, 0, 400, 400);! i* }" j9 {0 ^8 ]
. f* n$ a5 }* _% O4 t
}; s- y9 V" d* C" J+ X6 A
ws.onclose=function(event){/ X3 x# Z7 S$ B) U+ V
alert('close');
7 Z2 D9 R& A% ~+ s& [
}
4 [$ H+ ~, N" l" R- L7 C
ws.onerror=function(event){# C1 g6 N( l- i' n4 E$ j8 V5 Y5 i
alert('error');: h( ~6 R9 K6 `+ r& P2 L
}5 ?9 B( {, N6 _0 _& C, m
//video，标签模拟视频1 o* B; c5 B8 D7 X9 M
( C& G/ @3 W+ t H3 g9 T! a
</script>+ \- D# d$ v" t, O; H+ t* n
</body>
O3 x: l- n& v1 \8 K
</html>6 z' z7 s& j- }% l! ^
& ^' X# e$ [. ]8 B

复制代码

客户端：

<html>8 }! L( Y& p' G& T- {8 S) ?
<head>
" A6 A$ _5 ^0 V7 J/ K- A
<meta http-equiv="content-type" content="text/html; charset=utf-8">4 Q/ t' z" I2 B6 H
<title>客户端直播页面</title>
& x& l) s) Z2 U4 S4 m% g2 q' l
</head>
+ ~. h \# @+ G: d* Z7 u
<body>
0 \+ G( ?$ X: t/ a; ?
<img id="receiver" style="width:720px;height:480px">$ G5 L, u7 G- A6 r* V$ {4 B1 y" ?( U
7 L, ~" E1 `4 f5 \* G6 f) }
<script type="text/javascript" charset="utf-8">
' ^3 s" x% c- o, t, V ?+ u& Y
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
" D" R$ w1 l" P, q3 y3 L7 i
var image = document.getElementById('receiver');: W9 f9 S0 A) W `' o! V6 M
receiver_socket.onmessage = function(data) {& a4 P/ f# f7 {* P" l! W
console.log(data.data);
, U+ l8 y& K; g7 {- p! C% Y& O
image.src = data.data;* X2 [8 s- F, p
}8 o: v( b a( x" ~
</script># `& w- n4 V0 h3 H! @- c2 X
</body>
9 I! a9 F% U1 z
</html>! r- V$ Z- n' n
# Y- ~5 r$ s' C& s' a5 R8 V# Q

复制代码

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

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

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