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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% a1 R5 k9 U# y/ Y5 S
$client=array();
7 k- A4 r4 E# }4 L0 d5 K8 q
$serv->on("open",function($serv,$req)use($client){% Z* A. m+ W! A# F+ ~
//echo 'connect'.$req->fd;8 Z: N) E8 S6 [# w4 X9 \7 n
$client[]=$req;
: T: G3 l3 i0 m. h
//var_dump($client);1 P; v6 \( m9 k. i/ E/ H. r" }. Y
$serv->push($req->fd,'aa');2 T; y z- H+ C& b
});
& c* y b2 ~ N
, B! g4 c+ U3 L6 ?: G
$serv->on("message",function($serv,$frame)use ($client){
( F% I+ @4 [, I1 J. j9 o/ P7 O
/*var_dump($frame->data);2 p* u6 l; U9 ^2 g
foreach($client as $key =>$val){& [- C: b2 |+ r ~2 @# {) Q
$serv->push($val->fd,'aa');
1 z' u- W6 }& M& S
}*/
4 z# _; N2 o& E6 e: h ?' z
$client=$serv->connection_list();$ B9 n1 H( _) c/ `* {& A$ j
var_dump($client);
1 [; Q" Z7 J3 O
foreach($client as $key =>$val){7 p( F* \4 X# @
if($val!=$frame->fd){
3 V" U& O" b; j" O* ^( Q" Y
$serv->push($val,$frame->data);2 H: n2 `" \( b: S* U. u# |' ~( @2 o
}
& W4 t" J1 B+ R. v
}
: x9 a5 L7 `2 ^4 d4 [% b- j
8 R8 C4 k. b; y1 B0 t6 y( y
});2 A, H; g" {. Z P- y
1 O5 s6 S6 | j- e! l
$serv->on("close",function($serv,$fd){
- ^1 ~4 h- n$ d" o6 z
echo 'close';
8 T/ ^) z v* ]$ V( e+ y2 [
});
& A$ s' N0 O! }. t6 ?7 P
; g3 Z; h% X- C: ] M; ]- X
$serv->start();
. \ `+ g1 A' h7 } }- y& j
* ~( M9 J$ a" z; q" W8 l" f, B

复制代码

主播客户端

<!doctype html> q0 i y% Z; X8 I' I1 s0 _
<html># P0 S5 I1 c5 b- E+ y+ E+ F
<head>
) S6 k# ~: R: O# o. Z4 X3 E
<meta charset="utf-8">$ O; X, I* b5 q1 l. Y
; u3 b- j s) d' m. `
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
( z8 z# [( r& j4 }7 _ D
<title>404</title>. s2 g' V9 w* R7 v! \" B
<style>
, [, w& `% z- g8 s) l# z
body{$ [0 V# y ]0 z# E% I1 P' R
background-color:#444;
1 F8 T/ ^. ~9 k; r! q2 P
font-size:14px;# w1 U* x4 E9 o7 a: |0 J
}
# y$ y0 s0 j" h7 D5 k
h3{" O% B. ], z2 W
font-size:60px;
8 |. M# e% S4 ~8 `
color:#eee;
5 t' z) c6 F0 [0 Q$ H6 A
text-align:center;4 | X i% t7 c6 c; Z- I Z6 X
padding-top:30px;: ?$ v+ A8 r6 y
font-weight:normal;
" [. s) e2 ~; L% s
}# X; A# m- Z0 r' Y' J$ M' \
</style>
& F+ t. `$ ?8 Z* e" ]
</head>
2 O9 g+ Y7 P ^9 E3 B1 |( L( w# b( {
' H( g* T2 {' s- W2 K$ ~
<body>' \; C, U4 h9 j( [% t( ]
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>, k; X* C1 n3 _! l: C( u& w8 b
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
" o: G0 ^: f. B& j/ e
<canvas width="400" id="canvas2" height="400" ></canvas>5 ]1 Y' p) E- u
<script>0 I- b5 z6 c% b5 {& B! E j0 R
var video=document.getElementById('video');
' n! K% ?4 Y# A! U' {& O; e# ]. G
var canvas=document.getElementById('canvas');+ ?0 |' ~) v. e( S% \- \9 Z
var canvas2=document.getElementById('canvas2');, N3 y6 F8 V4 J9 y5 o# q8 K
var context=canvas.getContext('2d');5 t9 t: V% j: L+ | [
var context2=canvas2.getContext('2d');
/ t& g( k3 ~2 K8 b/ _2 l
function draw(){* Q" J; f- U: x
context.drawImage(video,0,0,400,400);
0 w! Y: U2 V0 u5 ?
ws.send(canvas.toDataURL('image/jpeg',0.8));
) Y1 ?' q; }; u& ?, l
setTimeout(draw,800);
5 k) [" J, }, ]) A8 Q
}1 @' r0 `, D5 |4 q+ o1 o. G
7 X$ p" f7 e6 s0 g
//客户端跟服务端通讯; k. @+ s1 ]& o8 M0 L! N
if (window.MozWebSocket)! G( Q4 @7 e9 b5 Y( m* L
{: L3 B8 \ Q/ n& u [1 t
ws = new MozWebSocket("ws://182.61.42.187:9501");
r$ }; Y- A/ H
} else
- d: ^# R# a! ^3 E, p t2 M; n
{
# N: {4 E. _7 y4 r# I w
ws = new WebSocket("ws://182.61.42.187:9501");
+ w5 `& f% ], g3 P% _
}
+ K; |. P/ V! U
& P% S5 U8 X7 }* A1 o5 {
ws.onopen=function(event){
( j* g: `9 P+ B1 c, I/ F
alert('连接成功');
% x! R/ l6 ?+ A' Y" G
ws.binaryType = 'arraybuffer';+ b: O0 E( t/ A1 x. Q0 V& \$ K
draw();9 V6 l, i+ l( T+ O
}- M4 z/ y- z8 @& \ _: \
ws.onmessage=function(event){$ p1 I: m N7 q- d9 v
//alert(event.data);
4 b, h- k- l; \' C; }4 g
//ws.send(event.data+"client");& N( h$ m, b% C/ K* h- Q0 @
qrCodeImg = new Image();, f) S7 V* p- j' W9 } ], N
qrCodeImg.src = event.data;) e, D- {0 J6 u4 o, z
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
5 o$ `1 G) t, z2 N6 u3 n+ l
3 ?/ p$ ?. S6 H+ F
}- {# _, `- Z! j8 V/ h5 ~1 v4 k
ws.onclose=function(event){
" u) M! A( n; ^, H
alert('close');6 ^+ ]1 l2 I/ E) L4 l
}. L/ R0 L6 h2 U4 e
ws.onerror=function(event){
9 h1 S3 p. E% @) g+ O: _8 l
alert('error');; M( \4 K0 I0 [1 u* n
}6 t8 R, i' {1 R
//video，标签模拟视频9 I+ l! X$ g: ]8 u. l0 b! d' y
, B$ B( h4 Z2 W7 q# Z% o
</script>3 r! p# n+ C5 Y5 C: C
</body>/ F* o) D2 j" u/ l( D; a' L
</html>
4 w' [4 x, j3 V# l3 T
$ ?6 {* t) H$ e. x' l: X

复制代码

客户端：

<html>
. V/ y' ^2 K: z8 B' ^* J: R
<head>
$ D8 {6 M5 z+ d1 g1 j5 M
<meta http-equiv="content-type" content="text/html; charset=utf-8">
0 ]- k7 O4 {9 `5 I- a0 C
<title>客户端直播页面</title>& O% w+ |% q' a! F
</head>
! [4 i2 z0 x6 E) \8 t
<body>' f# {4 Q" F0 d
<img id="receiver" style="width:720px;height:480px"># G8 `' T r5 _/ t( O
0 |% q2 h' T5 Y
<script type="text/javascript" charset="utf-8">9 V% H4 e4 j3 g/ V- y6 i( I
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");- k' ~$ ~2 P2 N$ @
var image = document.getElementById('receiver');
4 U3 U% [$ N. X
receiver_socket.onmessage = function(data) {* n$ g% a3 m" K$ Y1 E* V
console.log(data.data); }+ w; T, v3 k; ^
image.src = data.data; t+ B! y# j0 X* T) i- }" G; x
}2 Y2 Q( q8 K, v8 j6 B! j4 ~
</script>
/ h# [& h% h, D3 E. U
</body>7 h0 D7 ^9 [1 v+ g- B
</html>
6 v) e- I+ S ^) G8 Y' d4 c
' K$ a4 r& F4 ^. a

复制代码

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

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

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