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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
- X! _# g+ h& d4 q8 |. {
$client=array();
- @1 d; ]) a: V5 d
$serv->on("open",function($serv,$req)use($client){. P+ c/ u1 ?+ j0 p+ ~1 A1 b
//echo 'connect'.$req->fd;* P* B" i4 A5 j
$client[]=$req;' e8 k. L9 c) F5 P/ H5 b8 b
//var_dump($client);5 Z3 v, w; _. h! T0 `1 c7 F2 ?: K
$serv->push($req->fd,'aa');
0 p% l+ V) ~3 [" G
});/ I, d5 s8 v- f8 Q0 T4 k1 @* A" Q$ B
, v9 O3 F1 Z, ~1 U5 X2 x
$serv->on("message",function($serv,$frame)use ($client){8 F7 {" L; b2 F2 {) f
/*var_dump($frame->data);
3 K0 { v! m% B" `2 X. V8 y* |( [
foreach($client as $key =>$val){5 F/ a8 M4 @3 K7 N% d4 @
$serv->push($val->fd,'aa');
% `/ T* O+ V" T2 ]
}*/
) ^2 ?5 S& y1 V# c
$client=$serv->connection_list();) q* y, C: d: v, \9 i
var_dump($client);
6 {6 H4 }( `0 b* r& _6 E. `0 Y! |
foreach($client as $key =>$val){
7 w1 }5 O0 ]. y2 O: Z. Y- N
if($val!=$frame->fd){
0 e1 s1 L* C8 V4 ? P
$serv->push($val,$frame->data);: i8 E$ I4 u9 s, b8 H, v1 B
}
/ N( Z; G/ R l4 `' q! `5 n5 b
}
, e* v6 m6 k j. T4 o1 P, G
# v; a1 U( c4 r& S2 l
});9 E% I2 s8 {( {4 @! Q
+ p1 S8 w; A6 p+ M
$serv->on("close",function($serv,$fd){
) l1 G" Y6 _ i* R
echo 'close';: ] r7 ^9 g- @- u- I( o
});2 N. A `" L+ [+ W4 b
) {! s/ w: a; p% E$ w
$serv->start();) H# n4 V7 ~: w7 j, x& _7 |. i0 f
3 u- g$ M4 g f) l4 J: E

复制代码

主播客户端

<!doctype html>
4 w; [7 I) p8 z5 Y3 T
<html>
" y, l# b* `3 r7 ^; v/ \
<head>
8 x2 n7 D0 G! o! g, V
<meta charset="utf-8">4 h, U' V4 w/ W8 F) A! Z- T& Y
1 p, L: u$ }$ u
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">3 r" n$ u4 t* J0 n
<title>404</title>; N+ E3 W6 J5 E0 I; n! `
<style>
. h9 N1 }! k) a! w6 v6 `
body{, o) ~/ D& ?' P4 M* O6 d6 V$ }0 s
background-color:#444;+ V8 O6 n5 F# J' q' p5 J' R
font-size:14px; l% B0 L& q( d2 F! h/ o/ n3 t
}
) Z$ Z: a/ |) Y. {8 L- v# K# P
h3{
$ f$ C4 B' p$ U4 {) c o; K
font-size:60px;
: M0 X1 \; m+ r" L# ~$ M
color:#eee;" C) Q5 q; f' ~
text-align:center;) I d; ?- s) k W
padding-top:30px;# `) t2 [# z) }! _0 L
font-weight:normal;5 |' E9 y1 N9 p1 j4 z3 M5 e8 {" Y$ }3 c
}
3 o- z- X5 a5 u4 e
</style>
5 G6 p" T& O5 \8 o" Y! d
</head>: X: m, z1 t# p) {
7 @+ M& P0 b# B8 \ w2 L3 _) H
<body>! a" {7 p+ s/ e6 c. H) L) a
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 B/ |) V: P. d" L2 F
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>, _0 U% Y( |" b* p, q
<canvas width="400" id="canvas2" height="400" ></canvas>5 O ~! V6 Y0 Z- {+ C
<script>
: I3 U6 \, ?2 `$ S
var video=document.getElementById('video');8 G6 W6 d/ _0 G: ~6 y- I$ k% P5 n
var canvas=document.getElementById('canvas');
: O1 x0 k9 ~" ?5 k; @3 P% Y
var canvas2=document.getElementById('canvas2');
# t) G5 j* E- X; y- V
var context=canvas.getContext('2d');% {: t0 W2 [1 B. V1 Z- p- Q3 a# ~
var context2=canvas2.getContext('2d');
7 H# ]& u7 `% a8 f1 \% t
function draw(){" X/ `$ Q2 U- F& f1 c% ]1 H
context.drawImage(video,0,0,400,400);
. [4 k: @1 J& m9 M6 W9 b
ws.send(canvas.toDataURL('image/jpeg',0.8));0 R0 j) K- ^5 G* e( {, O# p
setTimeout(draw,800);# ?1 E5 J, z6 G7 l2 e J
}2 [2 ?/ N9 h# p$ ^4 b9 X `1 I9 S7 d
0 w/ g7 H- H. U* w0 E: {2 A
//客户端跟服务端通讯
) U9 _) \$ S; K
if (window.MozWebSocket)
8 x: E, e0 C; R }; F
{
, t$ @! I( H y0 }' T0 ^# E5 `
ws = new MozWebSocket("ws://182.61.42.187:9501");5 J% t& Y9 H- P$ I7 `. K( c+ M( m; S
} else
( w4 F% H0 f0 I& A
{
" {/ E( P d) _5 n0 ?" b
ws = new WebSocket("ws://182.61.42.187:9501");5 C# l! V$ k7 u; C+ A
}
/ [6 @9 p- {) l! i; E- F5 {4 R
0 n$ G) z$ C1 s
ws.onopen=function(event){& e2 Y$ j/ u+ X
alert('连接成功');* s, k8 X( Z. S: |- N7 @
ws.binaryType = 'arraybuffer';
9 T' m5 e& f) P& K! t
draw();1 G8 D% K* r: G3 x0 s
}. n, W! e# y: D" j0 r4 R+ z
ws.onmessage=function(event){ x) u, \! c& x3 v/ a$ h
//alert(event.data);
2 [5 }8 h' m! q1 O, G1 a) X
//ws.send(event.data+"client");
' t: w- I. H( l
qrCodeImg = new Image();
& R. @ N" \0 G1 l6 W0 Q
qrCodeImg.src = event.data;
" b a; f; w: j; |' \
context2.drawImage(qrCodeImg, 0, 0, 400, 400);9 a; @) p" x% |3 F$ s* Q, `
7 t9 ~" {- I* r% g& O' X
}
% f0 u4 u- S9 ]8 J( n; x
ws.onclose=function(event){
/ H8 R! J) o9 l+ ~; j; e0 F: s
alert('close');6 p6 w# D* o3 a+ D1 E' g
}" {0 m4 |' p3 H' V- a/ v0 Q3 C
ws.onerror=function(event){
4 n: D4 Y3 i) f# O: h" A
alert('error');9 ?& B5 u5 b1 c, ?2 c, n
}
# H+ c0 P, t7 ?8 y: U5 f
//video，标签模拟视频6 `( s3 B) D, M* A! t$ S) B
9 R8 H4 Q5 v4 G' b# ]6 F$ `
</script>' b2 J$ Z8 V5 E+ Q* z& A! m- L+ U5 G
</body>5 |7 t8 ~3 ~2 t( a0 n/ n8 x$ G6 ^
</html>
u% @9 q2 z; U f* d& `, w
5 y% b- e: {4 S2 Z

复制代码

客户端：

<html>. o& _$ z/ ~* @; x
<head>5 y7 ?9 f. e, t/ R3 x
<meta http-equiv="content-type" content="text/html; charset=utf-8">! H" u: @# w' z1 d( A& q9 b0 h
<title>客户端直播页面</title>6 ~/ A' i1 o3 L3 b2 ]2 b
</head>
( L6 ?; Q1 C4 C" k/ }
<body>5 `, X. ?" _9 D
<img id="receiver" style="width:720px;height:480px">
. ^% p; \0 q; W, a
" G1 [' j5 [8 J- W
<script type="text/javascript" charset="utf-8">4 A! E: s9 n' {2 ^
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");" Z) Z- p* N4 S d, T" |
var image = document.getElementById('receiver');: A T4 `' Z8 l( f9 k0 j
receiver_socket.onmessage = function(data) {( U; g; L- n' y+ t) O: k9 @* t+ |: r
console.log(data.data);
( F% d1 e/ \: ^8 C
image.src = data.data;$ p# P4 Y* e1 h. e" W! s0 p4 s
}
% y/ P# I6 ^/ u) M' P: _
</script>
: a p& K3 g. m6 A" M+ \
</body>8 m: I7 ]) P Q- f3 O
</html>5 H( {1 ~' j) J2 [. q2 ~1 _
! b* @0 U0 E' }3 T) |' Q

复制代码

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

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

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