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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
& f, I* z" d# b" a
$client=array();5 t) l3 m) i8 q- w
$serv->on("open",function($serv,$req)use($client){
% o K. y% O' y1 n! m" l# }+ O9 _
//echo 'connect'.$req->fd;. s% f) C5 |/ c2 m
$client[]=$req;
% w- \# Z( v. ]& z
//var_dump($client);
* Q# m& W& H7 \4 p; s! o
$serv->push($req->fd,'aa');
# d0 M3 c% ]4 d. E8 S
}); U. W; V- n. b
: S# f' J, `7 W9 d/ ^6 A, F- M u. Z* B
$serv->on("message",function($serv,$frame)use ($client){
6 x8 O6 ?, S5 T( }. c& }! s7 v
/*var_dump($frame->data);
- x( ?3 m% C7 m5 C; Q
foreach($client as $key =>$val){
8 c A# p8 v, ]9 ^
$serv->push($val->fd,'aa');
6 n9 _+ L& z1 U
}*/
* j6 s# y* v n, k b
$client=$serv->connection_list();0 u: t2 E! Y4 H+ }! \- }( N! x
var_dump($client);
1 \9 ]3 Y" |$ o7 J; B
foreach($client as $key =>$val){% Z1 A8 n: t( J
if($val!=$frame->fd){. W( A) h* k% ^/ ^0 w/ c5 B. k9 R
$serv->push($val,$frame->data);
" @4 B) G. ~: e& \. |5 w! w. G
}2 I. z. }) ` P7 I n
}
Z+ o" ~8 K% o3 T" \
8 {9 c$ ~) O5 f! Z. t2 v" p& Q' u7 F
});- E" L; A8 S5 c" c) O9 A K
( ?( u/ C6 r8 z k( E* X
$serv->on("close",function($serv,$fd){
8 x$ O6 A* c! ?% I) F5 b( Z
echo 'close';
( N& [1 [ Z" E& k$ K$ a
});
( ]* l, I8 G2 [4 |1 l
1 `& M! Y7 b5 \0 R6 c
$serv->start();4 E: C8 m$ e* N+ Q8 j+ T" |
4 T4 y3 p. F& A2 }* o4 @

复制代码

主播客户端

<!doctype html>
2 Y, d N* Z; L
<html>3 u" ^- [4 s- f3 m* V; i
<head>
* L3 d. K0 a$ H: W) q8 _8 [
<meta charset="utf-8">
" B- N8 p+ c4 Q
+ {3 l' w* [1 L: t* Y4 ~+ _ }
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2 E/ N+ B6 p$ [4 D5 h2 j* n
<title>404</title>
' G0 @5 v7 J2 N# J" l; k
<style>
' R: n$ ~. d. r- V9 H
body{
9 _+ F+ W9 b$ |& r- z/ S; d
background-color:#444;
, A: w8 j6 H1 h1 f7 q% U
font-size:14px;. O8 s% i1 f* `( l3 j3 S/ u
}
9 C# u8 C5 o: f3 Y3 Z( [8 G4 {" O
h3{$ J7 Z, s4 q+ p8 q
font-size:60px;
3 `/ J' F) H. V
color:#eee;
3 v" G4 {. n2 C
text-align:center;
) H @! M" H/ z9 Y- w5 y9 k R
padding-top:30px;7 H7 A% V7 N* @( |
font-weight:normal;( h; o" \$ P# N; s) y1 ~% y1 K' u% R
}9 x. ]# b; B9 |" W
</style>6 ~* }$ A* G8 ?. j6 _4 }+ E [/ u1 h
</head>
' W3 s. m* J: K W1 j0 h9 [( O
/ j. a, ~! a$ F- V+ J
<body>
" F4 l+ ^3 m+ ]5 O
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
, P7 V! M' ]5 q+ z
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
* C. Y! |5 P3 U
<canvas width="400" id="canvas2" height="400" ></canvas>" T2 u9 I1 X& J! }: a
<script>
+ E" F5 `# { Q3 q9 m3 h
var video=document.getElementById('video');
6 o# K5 s% ]8 n8 Y% ]
var canvas=document.getElementById('canvas');
2 H$ E$ K& J; Q; M0 a
var canvas2=document.getElementById('canvas2');% U4 R& p6 d, l- v0 _" h( I
var context=canvas.getContext('2d');
3 e8 ^: e: t0 M/ s
var context2=canvas2.getContext('2d');
0 O. ~: u3 l! X% o
function draw(){* X4 w# S! W/ w8 s3 b
context.drawImage(video,0,0,400,400);
2 ?7 e" Y* j% Q9 ]3 L
ws.send(canvas.toDataURL('image/jpeg',0.8));
& `8 B5 w( @& l' e
setTimeout(draw,800);
2 W7 ^3 [" L s$ }- F0 d
}# ~9 z' X( S! Z: q2 G
* b% v+ h* C2 h+ z# [
//客户端跟服务端通讯
: [& ~+ V, U* a' e/ u1 k; n
if (window.MozWebSocket)+ a, g1 l1 a' O$ Z( x
{2 Z3 d+ w6 o7 c! F; i( M, e
ws = new MozWebSocket("ws://182.61.42.187:9501");
" {" z' {5 X: S& L7 h! \# T
} else
7 E) Q# v6 C. c' q
{
. a& S7 ^2 P1 W# X
ws = new WebSocket("ws://182.61.42.187:9501");+ _2 f. [( D# U7 v8 `$ G! @
}
9 {5 X& n7 a7 P! l4 ?9 c. i+ y
7 L& f2 J& \3 e/ ?" v. D4 S; V
ws.onopen=function(event){
7 r7 I; w; F/ x# x! g. `
alert('连接成功');
( h6 T: Y7 s. R$ }" p
ws.binaryType = 'arraybuffer';" P* d+ `. v1 o* k
draw();
# `5 l. Q2 B1 l4 s" o
}
( |- {: l# \' | ^6 Z
ws.onmessage=function(event){
! ?' V! c$ y% x
//alert(event.data);
# s. u5 y! {& B: m5 Y2 T& t
//ws.send(event.data+"client");) C+ `4 r3 g0 g4 K1 n
qrCodeImg = new Image();
, ~( p* \5 W5 z
qrCodeImg.src = event.data;5 ^- X. w" m9 t! k
context2.drawImage(qrCodeImg, 0, 0, 400, 400);/ i( P( |$ @; D% x# G' I3 g
) u# h5 G1 T: C( B# \3 A
}
: A1 f( \: d7 ?4 T
ws.onclose=function(event){
: _0 Z8 h/ H6 n2 k w
alert('close');' x4 E) u. |" e7 R" R6 [1 o* c
}, V0 v: }3 F/ v1 P( q6 h. V2 j
ws.onerror=function(event){4 \# u: ?' m, T( I" u1 n
alert('error');1 j* H9 P# [+ L( ]! K; r6 @
}
& E O7 M( N# P9 b/ M% E
//video，标签模拟视频% l: F6 k& d$ e( ~
1 d# n B4 t- e7 E
</script>
% \6 m. d8 z! Q( z4 W0 N
</body>8 w2 M; [4 ^# j+ @& b
</html>
& C2 _5 B% B1 y/ C# }5 V$ u9 f1 ^
. ^' S1 f+ p* a& s/ Q8 ~

复制代码

客户端：

<html>4 M, ?) U& U, q% L c
<head>
& S) N& p8 I. r3 ^: w
<meta http-equiv="content-type" content="text/html; charset=utf-8">
/ \, M9 U5 R6 q7 k6 N
<title>客户端直播页面</title>
G; S+ O% @1 H0 v- g# H' G+ x6 a
</head>
1 V. B) o; s2 R8 u% u. @" I% V/ l# L
<body>; N1 w1 H5 u1 i& K, W' J
<img id="receiver" style="width:720px;height:480px">
! [ ~3 [3 ?0 C3 C$ Y: ^# ]' Z
9 {6 x. Y8 o( ?5 J. q
<script type="text/javascript" charset="utf-8">
# c5 \( ?7 m1 [
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% j3 V$ U% N3 x
var image = document.getElementById('receiver');
7 y: \2 J7 @9 }4 N+ ~
receiver_socket.onmessage = function(data) {3 C7 \ t; Z; e6 n% K9 U
console.log(data.data);
* @# p4 [- ^9 ]% q4 K
image.src = data.data;5 O: p' F1 t k: W9 n# _, E
}
. d- ~4 l8 v5 G% |
</script>
7 N# e, J5 Y( o0 X2 B3 g
</body> R' B1 F, N! F# a+ l- C
</html>- j+ H" c4 J* D+ R$ V. G
% l$ A" U; d" o' W; U$ k9 o" X

复制代码

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

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

浏览过的版块

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

浏览过的版块

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