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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);% A5 y$ _! E$ I' l; W5 r! e6 b
$client=array();
' Z/ `' e1 k4 v% j+ d% h: N
$serv->on("open",function($serv,$req)use($client){
0 h$ E3 X) Z! L2 l7 }9 r9 j6 d
//echo 'connect'.$req->fd;
) e. @3 V: O- h6 ?6 ]/ ^) I
$client[]=$req;
4 C- n r5 m2 O. ~
//var_dump($client);$ X& H& B, M+ A0 p
$serv->push($req->fd,'aa');9 {; v/ H$ `; s. v
});
3 Y7 o7 ^9 z" W; B, l6 E0 G
6 l& S r6 ?. _6 z `' J
$serv->on("message",function($serv,$frame)use ($client){
' w: e. `1 v/ a+ I o
/*var_dump($frame->data);
; V* ?" @4 E9 Q5 ~
foreach($client as $key =>$val){ Y) S/ G! g" t( f
$serv->push($val->fd,'aa');
5 k, b- J' w2 ?' z2 R* x
}*/# }- q2 x0 B1 ]: R. y2 R$ X
$client=$serv->connection_list();
@0 k+ d5 B" y8 j6 i$ h6 r
var_dump($client);
* j8 ^! I: Z3 L% l, E! l
foreach($client as $key =>$val){$ X8 D& E) F* t( C& t
if($val!=$frame->fd){
7 m# B7 }& D9 N$ S
$serv->push($val,$frame->data);$ E* v2 S9 x9 M. x
}' V" \- s% Y5 t+ j( r
}
% C7 g- B, p7 a$ z" h+ M9 k' B3 B
8 B4 v: ?0 [7 T5 l& t% M) D/ c9 a \
});; C. s/ G5 F W% J% ~
. I7 t+ |) B& J2 A4 o& F
$serv->on("close",function($serv,$fd){
: o; Z4 @; y" M/ E
echo 'close';
1 n" n, T. M2 P# B% R$ ^# g
});5 s* |, P8 F# _0 J
6 V. |6 t# j+ g2 s
$serv->start();. k8 z: G0 y3 }) Y
; l8 B9 O1 @" J- |5 ?$ {

复制代码

主播客户端

<!doctype html>
! e1 D7 N5 M, i/ d) b
<html>
' o; i C% L; ~1 s+ \
<head>
- b9 z, z# e' |$ U, B+ A0 j9 ?+ ]
<meta charset="utf-8"># D4 m5 ` I, v% v9 \
8 ?; M9 q7 x4 x
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
E0 o4 ^% T4 r6 [: b
<title>404</title>( F9 _! F! {$ B8 i8 I7 ^
<style>1 M3 L8 K. D- g. r" R/ \9 _; f8 @( r
body{& \0 R& e+ r( E$ K
background-color:#444;% z) }# p2 R; Z4 R* c
font-size:14px;
: I( j: }8 }# @9 t W5 B
}
; r s2 Q' X- w, l C! {4 A. H
h3{
\. ]* S2 W% ?) b
font-size:60px;, y0 d* v: E P: ^$ h- f9 O
color:#eee;5 b3 l& X% m1 l+ ^5 h# q
text-align:center;
+ G2 Q, B3 F: G
padding-top:30px;
0 C4 j) j6 J% Z& _( q f8 O( A
font-weight:normal;, O6 C& k `: n$ g( n) a( l
}" y% N8 s7 e6 Y0 ]& }
</style>. N& p) o, X& R3 L! e: n. a
</head>
; ^5 h5 V7 n3 a% Y. N/ G
' \3 T% A5 Q1 r( r4 t6 o
<body>
1 o+ J# w7 q' w* e1 l1 N8 b
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
( {* r( ~; U9 Z$ Q% Q
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
8 ~% n6 K2 X9 i5 H0 y
<canvas width="400" id="canvas2" height="400" ></canvas>( ~$ \9 N; b/ p" B# O. g/ q m M
<script>. N2 d' M4 B& L2 _5 _
var video=document.getElementById('video');. F/ F1 a$ h) s" K6 j; c/ t
var canvas=document.getElementById('canvas');5 d, E1 V! f; X, Y- I O. t
var canvas2=document.getElementById('canvas2');. `; E/ q0 g8 W J! u( q1 B
var context=canvas.getContext('2d');, W; |- K5 j7 ?1 S5 Q; [3 _ {
var context2=canvas2.getContext('2d');9 W9 B9 i, R/ p- k9 a0 Q
function draw(){2 k, M. [: H# Z' q- p8 {# Y4 X
context.drawImage(video,0,0,400,400);
2 Y1 k% X* R/ _) m1 H/ c2 S
ws.send(canvas.toDataURL('image/jpeg',0.8));
0 c* k. p* h3 f' P; j3 U N
setTimeout(draw,800);
, w7 i3 ?, X$ O& _3 M
}, j5 W2 `. ~: R( G5 B5 _8 h
' h1 M0 O3 Q* ~4 a( e
//客户端跟服务端通讯& r! K7 r2 d# ~6 K8 v0 I
if (window.MozWebSocket)
7 L, m2 n# I+ u4 p$ ?+ r2 u
{
$ `# O0 l6 G4 r) a( }* g9 |0 Z3 L
ws = new MozWebSocket("ws://182.61.42.187:9501");8 O; ^& Y# x" q- R6 b
} else
. J! W& ~. d- b6 C! ^) R0 h
{, _- L6 M8 Y# r' X
ws = new WebSocket("ws://182.61.42.187:9501");
7 f6 v* X" }, \. ~: \$ N1 c
}
* O C3 m6 M! f9 L
5 J) [' w& S; G2 _) r4 W
ws.onopen=function(event){
1 t' J2 Z' D# l% N
alert('连接成功');' H, ~3 ^6 c3 c3 I- [. M4 d
ws.binaryType = 'arraybuffer';
6 m+ L- s$ H+ K; g
draw();- B: T) o$ I& o h7 b( g( Z
}
$ i+ q1 `0 ]2 P, @1 X' W9 L
ws.onmessage=function(event){
! C: L! D1 J3 l$ g# b
//alert(event.data);
1 ]4 B3 V' v. C' z
//ws.send(event.data+"client");
, b: F: R1 ]' ^1 ]% O7 q
qrCodeImg = new Image();. q) t( ]# _8 [4 W2 R
qrCodeImg.src = event.data;
( `5 U. j' V' s
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
, m @3 l' A" d( g. Y% u
! k5 |1 e" }' u) r& Q
}7 {* f* {# K& H
ws.onclose=function(event){$ u- p8 U$ z! M
alert('close');
( ~5 i' E& ]& w. a
}
& n, A" L- ^; U& B9 o ]1 @! F) C
ws.onerror=function(event){
7 R- W1 [" H ]: e
alert('error');: P1 q2 r: T5 j- \7 h2 U
}# n% Q- P4 m3 X- U1 ^+ t
//video，标签模拟视频; [7 j: [( n2 g
1 b1 D m! Q4 C
</script>
5 n/ Y& g- d8 M* Y5 ^9 z) c- A
</body>
! Q: i4 u" @, d9 v0 t- H6 N8 F2 F
</html>: t+ M/ `4 }! x% d K" R, r/ k& @9 m
# m% _8 _1 |/ C! F( N

复制代码

客户端：

<html>
" C( q$ g5 l. x @. q& z
<head>+ o4 E/ r" Y Y8 a4 q6 v6 |; w
<meta http-equiv="content-type" content="text/html; charset=utf-8">3 n y( y& n6 P; W2 i( m
<title>客户端直播页面</title>, t- m. A$ b$ c' ]7 `2 J
</head>
" j& ~0 x8 d' u/ S( h& {- T% a
<body>' A0 y: `0 l1 {% `% ~1 k
<img id="receiver" style="width:720px;height:480px">( M& N! Y3 _ M" H( q: q% m
$ }* ?* R8 Q7 k# w3 L! P; c& W
<script type="text/javascript" charset="utf-8">1 P) d! ~- |4 Y4 j+ A
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 Q4 \" Q% P2 T0 K: m! I/ e5 x
var image = document.getElementById('receiver');
" g1 s% O6 ~6 }6 V( H
receiver_socket.onmessage = function(data) {; A7 ^* h/ L2 i& y% A' B
console.log(data.data);
. V7 C6 T) [' G* F6 z$ o
image.src = data.data; k6 }& ]9 w7 L6 N- [4 ]
} O; c6 ] }9 |5 E/ ]
</script>$ P# {1 l9 K: U
</body>3 J9 W: {7 ?; A* p+ y2 E- h
</html> K% \) ~9 q" t' k3 {
1 s7 b' _! ~4 o4 E. i: f

复制代码

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

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

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