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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);2 T! V- O, k: W0 |
$client=array();1 I1 M7 d& l& A; E
$serv->on("open",function($serv,$req)use($client){" j3 Y" h2 t. V1 M3 Y3 C H- r
//echo 'connect'.$req->fd;9 t/ b( V9 ]" c Y( e
$client[]=$req;
' V+ H/ l7 J2 s! U- S8 r
//var_dump($client);5 U5 e3 J6 x* W4 K
$serv->push($req->fd,'aa');, H5 h2 ~: I5 w8 E9 n6 p% h* u
});
+ z: V7 ?$ Y* u& t
, l- h& Z. `2 f9 ^+ H
$serv->on("message",function($serv,$frame)use ($client){
4 R3 s9 I. [: q- ]
/*var_dump($frame->data);
% H" A6 O, l" x% H" m1 d, C
foreach($client as $key =>$val){' H& [8 s/ S+ `* R
$serv->push($val->fd,'aa');
6 @* C; h! A, E$ ]8 ?. `
}*/( Q6 V" V0 h4 k6 G J' o7 }! {
$client=$serv->connection_list();. q4 ], V9 _ E
var_dump($client);' \1 e4 O( B n5 J; A" b
foreach($client as $key =>$val){ ~9 Z2 j6 r3 b! K
if($val!=$frame->fd){% c) V; Z8 \$ ^0 H9 x6 E
$serv->push($val,$frame->data);- n J( t& w5 F: A7 L I
}
, E8 u8 H1 z. `* t% ?0 ]- ?
}
9 B% n9 [/ ~8 e! s5 i; i6 c+ u2 N r
' X4 q6 q5 ]. R! c
}); i( |( E: }+ w
6 {9 v! y) q7 A
$serv->on("close",function($serv,$fd){
echo 'close';
% X9 d- f7 M: j# S" z6 q' W
});, Z5 W W' M+ E- f
' }5 ~$ m3 w& O$ G. F: B: o
$serv->start();
/ g: \$ t) Y5 i8 D
4 X- b1 V' a7 J: F( m

复制代码

主播客户端

<!doctype html>
$ W$ ^, n( J4 g0 c' q* }- `0 r
<html>3 A* h4 z" D/ \! L7 u
<head>7 }1 X7 T% e: |5 d
<meta charset="utf-8">
' H% E! m/ m7 r. y% ~' P
+ b" F" j: P) J' q4 z' A
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">3 T: ~* o6 b* @- j0 U
<title>404</title>6 `2 R0 n" _' c# v7 Z! O0 c. c
<style> Q. e, T1 V+ A% B$ k
body{3 W$ }/ E* C' U" p( o! ~# [
background-color:#444;
3 e8 O' d7 C7 {8 p! N$ }8 t2 ?* y
font-size:14px;* p+ f* P5 }3 E& e8 @- o
}
* {2 N5 O0 L% Q% t9 F8 v4 l0 j
h3{$ D1 }" ?: `" E" c2 R+ b8 `
font-size:60px;
o. G" H* E- ?( s
color:#eee;
& ?3 V: e _- ~' A$ Q- a3 F7 l
text-align:center;
4 p: W' H" ?, U7 j/ B- ?* w
padding-top:30px;* R5 a3 p, x& K& _
font-weight:normal;
; Q4 V' i4 @, J6 B
}
+ U4 k8 M* J9 Y+ ?
</style>
- a# j+ ]+ L7 w. |
</head>+ }1 C0 s- K+ j% w2 ]- O' H8 n/ q# V1 M
( s6 E2 n3 ^ H2 {! `
<body> _, Y, X5 a! O' Z5 D7 \1 B0 n! ]
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
" D% E# D+ [3 K w, L+ a
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
& x: f y/ m; r0 N; C O9 x. e q
<canvas width="400" id="canvas2" height="400" ></canvas>
" P$ i) f. }& Z2 D
<script>
5 J f6 K2 ?; @* i! [
var video=document.getElementById('video');! S# q. J# g, ^% \6 d/ ^
var canvas=document.getElementById('canvas');
; j' |; c& W- D
var canvas2=document.getElementById('canvas2');) C& g1 F: M8 K; ~, q5 y
var context=canvas.getContext('2d');. n/ G% j- t- ], D. N3 k$ S6 k
var context2=canvas2.getContext('2d');
9 g5 v! @* H; y! \3 {+ A
function draw(){4 v* p5 \! V6 ^) T- ~
context.drawImage(video,0,0,400,400);
5 z8 `! D9 ]/ y* W( R; {5 D2 H
ws.send(canvas.toDataURL('image/jpeg',0.8));
* A1 O9 J" J9 L) L( K' B
setTimeout(draw,800);% x, H# \+ N6 ]# ^2 I, j
}$ W" b1 k# r/ ^, C, r2 v8 g
7 f* j% O0 d: ?8 _7 j1 D
//客户端跟服务端通讯 X3 A8 |/ V$ k5 l
if (window.MozWebSocket)
?" Q) W) C( [3 X, g
{
) ?7 `5 {' i4 o: b' J
ws = new MozWebSocket("ws://182.61.42.187:9501");- I4 B: \# b6 i8 a I5 P5 C1 d- [
} else) A& O0 _! l4 Y ]% @
{
3 M A8 o' k+ R
ws = new WebSocket("ws://182.61.42.187:9501");
$ `* [6 M; j, N8 m
}9 a6 B6 g, P0 W# T/ }: ~
' E5 W/ S( B$ E% p
ws.onopen=function(event){
a3 ~1 F6 D7 |* D
alert('连接成功');. d8 i- X. `4 v7 E/ B6 O- @
ws.binaryType = 'arraybuffer';
N9 Q6 @" L) \$ B( C
draw();
0 N& Q( L7 s$ ?. B; q; V
}
& w2 f. H# t* r$ E6 M
ws.onmessage=function(event){
1 T$ W' U1 R9 Y
//alert(event.data);
+ i* e% v! _# W1 X
//ws.send(event.data+"client");
2 A8 D5 R7 X: Z4 H% X8 b- Z
qrCodeImg = new Image();& K* R& p' }; J; [+ u0 }; U
qrCodeImg.src = event.data;
4 n: L! H, x0 `
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
2 a" B4 I2 y4 K
% b5 r& D# B9 f( K9 C/ ?
}6 J+ W4 i# i* Q5 x6 b/ S
ws.onclose=function(event){( b0 m+ Y, w) M+ y0 j4 v5 m
alert('close');
* E8 h; `5 p6 H/ {# K; P
}# S H1 G/ t+ k( k- s+ ], N9 y
ws.onerror=function(event){8 q0 u5 `4 x0 a: j6 e) d
alert('error');
, |) c1 @% A- c3 D5 f
}
3 ]0 N T1 H* O0 |9 D% z" h: |" d
//video，标签模拟视频
+ V c0 }2 ^! C2 ?
, J5 t" r1 ?' F
</script>
/ V% s: U/ Q9 r3 X, \
</body>. O) u' o) R# b1 [" S/ D! e$ K- ]5 S
</html>
8 N6 G; M% _) g( J8 ^6 b; B' h2 I
7 v6 j9 {" q$ n; D9 n$ `

复制代码

客户端：

<html>
2 C$ ^: @. ?7 @
<head>
- [) P! P6 o8 }: P D
<meta http-equiv="content-type" content="text/html; charset=utf-8">
# v. {4 \" L# L- q" r2 e( Y
<title>客户端直播页面</title>5 Y5 q2 _& V! p. n/ k) y
</head>, a" q- E7 B& H: V0 I
<body>
# N0 |& v+ o; C* Z- @" [, [' N
<img id="receiver" style="width:720px;height:480px">
0 Q: X* A8 v7 V9 i( w
/ S4 m; k9 v8 }# }' C% |5 I& t: S
<script type="text/javascript" charset="utf-8">
* E& Q a# O. d9 z
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
9 P9 Q: `* i- ?( f2 s
var image = document.getElementById('receiver');
# B2 r! e9 J: j7 W0 I3 B+ ?+ t8 V
receiver_socket.onmessage = function(data) {
, S ~' E8 Z! I1 B) c
console.log(data.data);$ m6 R0 K5 D. g) i
image.src = data.data;! B' T4 d3 ^: P
}7 m0 e9 R9 c+ w, a
</script>
6 P9 G0 d6 ~ D6 l- T F$ e. X
</body>$ r3 x. l7 U5 G, |& b
</html>
$ m3 w1 `- P6 J% R
& j$ i1 ^6 E# G4 ~

复制代码

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

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

浏览过的版块

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

浏览过的版块

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