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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
$ v' L+ ?( K' V, z
$client=array();
; w/ ^6 r9 m( R8 Z3 p8 N1 M
$serv->on("open",function($serv,$req)use($client){% u5 Z: N! K: B/ x
//echo 'connect'.$req->fd;0 L3 t2 U3 y3 U+ v& B! a
$client[]=$req;
- g- D" w# H; w
//var_dump($client);
$serv->push($req->fd,'aa');* G( n5 r8 X9 P" P# i) r0 b
});
0 T1 L) B& R4 E* W X. g
% U2 D1 N% S5 e' O3 ?! I. w
$serv->on("message",function($serv,$frame)use ($client){
) K( e: i( y/ ~2 \: N
/*var_dump($frame->data);
; d( T q" R% w5 r5 w
foreach($client as $key =>$val){6 ~0 ~3 @2 z5 B# }5 E ^: h2 C1 ^
$serv->push($val->fd,'aa');
4 U1 [# C, p! m' R
}*/- I) R- O! L O# t6 W3 Q* e
$client=$serv->connection_list();
' ^% V' I% X; t. z/ z
var_dump($client);7 @9 @" _0 H8 b* [, G7 Z9 V4 ^: Q; L
foreach($client as $key =>$val){( n3 [& q" Y7 a. b3 U0 ~4 t8 `5 J
if($val!=$frame->fd){. p8 G' H- c+ c% F7 ~9 h2 ?' }2 s
$serv->push($val,$frame->data);
8 q. K' v$ q3 q! ^
}) t7 h- V+ P3 u& ^
}- q' G) Q& ^$ w' S0 V' }
9 X9 w Y$ E! m+ p5 f; X
});3 R$ G0 t) F! @+ ?# P8 p; L7 |2 a
6 S* `7 }+ O; p
$serv->on("close",function($serv,$fd){8 ~8 j/ Z1 [* i9 R4 P/ _+ ~
echo 'close';& w( s# Y6 k, n4 \2 `
});
3 W; W: l* M9 S$ N* S
$ |: u& [1 t D0 F+ g% v
$serv->start();' P' f. G( D% H
6 C/ X! k' Z7 Z, M

复制代码

主播客户端

<!doctype html>
% D- g o4 m% w$ V7 U- P$ k! o
<html>
5 n) Y% s8 _3 a
<head>- Q! I; l4 S0 m" r
<meta charset="utf-8">* H W9 I* i# n+ Y1 `+ N1 z. W1 f
) X6 l7 h: L+ H ^. y! i
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">4 x# q4 Z9 }. K6 @
<title>404</title># J% w& U, v0 s' }6 u
<style>
8 v" Z' T3 ]! y( @% C; W# ?
body{+ M# Y! v7 B& ~4 n
background-color:#444;
2 _* L6 y! h) V5 y7 u
font-size:14px;
7 i* g1 B G7 q+ w; _; o# ]+ d
}
% b0 K4 b/ t, j H! L* E
h3{
& r. P8 _3 \- P( t1 m: l
font-size:60px;! m, E U- ~, Z
color:#eee;. w3 c* D/ g- ~+ |
text-align:center;- O6 e# W$ B& _& X% J; m( [
padding-top:30px;
- w, G; [9 a9 ]) F
font-weight:normal;
" X( C! t) i5 e+ w' ]/ ^' ]5 x
}
$ m+ N/ B( n2 _$ P2 k% q
</style>
8 `7 p8 n- c+ l, @/ @
</head>0 G5 U* Q1 h% ~# U1 K
, }( n: p! \. c" K
<body>
: d+ d6 @$ k7 I% G/ g: X; v+ b. y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>7 \; w) R* c# l% T6 e
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>6 V% g6 l5 }1 @
<canvas width="400" id="canvas2" height="400" ></canvas>; I) Z: T: [! p, o0 G' Z& H. [
<script>
; T$ G5 C3 o6 M
var video=document.getElementById('video');
: @& U# D, c* |7 J2 @7 ]; Z
var canvas=document.getElementById('canvas');, X- m1 ^8 C/ R
var canvas2=document.getElementById('canvas2');
% J( b/ {1 e2 J& K% ?6 E
var context=canvas.getContext('2d');
& R, W& O' P& |# Y+ w. @
var context2=canvas2.getContext('2d');
, _' o$ S! G7 p1 K8 A5 f1 Y
function draw(){
6 |7 |( q' n1 L* \8 P6 f
context.drawImage(video,0,0,400,400);) a ~/ r/ B, V) @
ws.send(canvas.toDataURL('image/jpeg',0.8));
/ i4 M1 X/ h- B* p, h- i6 C
setTimeout(draw,800);
1 }: F/ ~1 k/ S0 i0 f6 T
}
! a8 c/ I8 t+ b1 }
$ E+ B0 e8 W1 d4 s f! e. q$ O I
//客户端跟服务端通讯! k0 t% u' {- J, w: A
if (window.MozWebSocket)
- T2 C0 N0 U) l) R( i
{
6 |( q8 n) Y) {3 m$ h6 i% s/ u3 Y0 |
ws = new MozWebSocket("ws://182.61.42.187:9501");
) ?( m* r% n$ q& H" F9 x2 ]
} else" A# K7 T4 p: X o# i; |+ ?* O0 P
{
; z# y* g% t$ Z- C( g
ws = new WebSocket("ws://182.61.42.187:9501");
|8 @% x Y% d( L8 a
}! w$ [2 d& N! _/ y" |3 Z: ~
W- |) P) |" K! p8 ~7 M
ws.onopen=function(event){
`1 `% o- S( E9 L& e
alert('连接成功');2 Q! Z! i" P3 T
ws.binaryType = 'arraybuffer';& {% L% \3 \" s5 j
draw();
& n+ f* {, _. k! F6 x
}/ `2 {$ L# i" E
ws.onmessage=function(event){
+ K; Y1 V0 O- |! o3 b0 B3 t k& m5 Y
//alert(event.data);) p' g% G$ S3 [3 _2 i: {" V) y- u
//ws.send(event.data+"client");! l# J; y$ X3 k/ b4 A! K$ K
qrCodeImg = new Image();
7 k$ [/ M: |" j0 }4 t& h
qrCodeImg.src = event.data;' y9 [% l. X$ T% W$ A
context2.drawImage(qrCodeImg, 0, 0, 400, 400);0 W( D% A6 b4 ~' P5 O
2 b( _. }6 w& f2 f, B( `$ ?
}
( O- x# \4 z* v& @$ p1 P* N
ws.onclose=function(event){! o- p5 _! Z* M3 w+ _9 B3 m
alert('close');6 a( _* n/ D, `8 m2 d( \( _
}) G/ g& M1 [5 h1 s" n
ws.onerror=function(event){3 E+ R: c% W; l k. N
alert('error');
1 L; y( z5 }& q% c4 O
}( s2 Y& t4 B" K! J
//video，标签模拟视频) ?3 n" I" @' N. y
0 x: X* I+ D8 X( B" {
</script>
6 x, ^. [0 A, |# ]$ V7 R+ v* [
</body>3 I+ ^. _/ c" o" \7 w2 @# `
</html>, i5 ? T# L4 { L/ c" b9 |
/ H* J1 @1 M( C6 S

复制代码

客户端：

<html>
8 |1 Z. \. F" v8 Z2 Y
<head>
. c2 j/ k& a: Y4 ~+ n
<meta http-equiv="content-type" content="text/html; charset=utf-8">7 d# _* L, I, d& [0 f+ l
<title>客户端直播页面</title>
9 s2 \8 K" O3 U: [/ ?
</head>0 e9 T' {, Y7 g$ E
<body># d; v+ X! K0 N6 M5 E6 h
<img id="receiver" style="width:720px;height:480px">: s( r+ w3 e$ C4 }, H0 f; d9 z9 k
; y0 r. e. P( h9 l
<script type="text/javascript" charset="utf-8">& o3 _2 X/ E; @7 b, E2 H" z; k
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
: ^0 h) u5 A! d" f
var image = document.getElementById('receiver');
5 A* l g$ }* f5 Y1 ?7 u" p0 ~
receiver_socket.onmessage = function(data) {
% c$ w* |; f' J, y3 F- a$ P- Z( B
console.log(data.data);
# `; y/ H9 b9 q! p0 J
image.src = data.data;
( M& f5 S/ a- X# q: @- ?% W
}$ _) L* H# `7 k* X
</script>
m8 |0 S' c% O2 {3 X% }
</body>
0 P5 s; n# [# T0 q4 \
</html>
2 P$ b: B, `) s+ y4 p# a: B6 t r- q
0 f+ D( O$ r. t

复制代码

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

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

浏览过的版块

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

浏览过的版块

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