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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% M9 I& g/ i1 X- e% X$ t
$client=array();
$ \; E7 D& g' i/ z8 X$ X& b
$serv->on("open",function($serv,$req)use($client){
/ D/ x- |- d9 z1 z: Z5 [
//echo 'connect'.$req->fd;
/ L2 l+ r$ V* \3 c
$client[]=$req;+ ]+ J5 U; ?, T2 g
//var_dump($client);
1 T% m/ M) F2 q; c
$serv->push($req->fd,'aa');1 C# m5 W8 }, n* h7 Y- b
});, ~- ^# J% `5 e8 e% H0 x
$ |' r: s* I7 ~# |1 S( l
$serv->on("message",function($serv,$frame)use ($client){
7 j( z. R6 `# Q0 V" ~
/*var_dump($frame->data);
: K* X& s) ?6 d: I- x/ z! \- O
foreach($client as $key =>$val){ e: b+ E( W& d7 \
$serv->push($val->fd,'aa');
% P" z4 ]. E8 E3 R+ b
}*/
- A% p/ a% `3 h4 \$ B
$client=$serv->connection_list(); X( P' y7 k) i4 h& e; l* s: @
var_dump($client);) c: f/ S9 y1 ]5 _# P
foreach($client as $key =>$val){
$ j+ h r2 T4 U3 o1 R& {* \
if($val!=$frame->fd){- ^8 f! X# d" e) m& g4 O7 h+ ]7 w9 a
$serv->push($val,$frame->data);
; a1 R3 D/ a5 I
}
7 @0 c" k3 b/ v- f
}
7 N! H. I6 u$ O6 }3 T4 J# c( h9 _$ d# @
: T6 S+ f/ I/ m3 H- ]5 L& N; E% V
});0 A' r* Q- y/ H+ Z$ p+ Q
6 r Y3 B9 Z0 R: j
$serv->on("close",function($serv,$fd){
! A* y! Q F0 l! {% o+ C
echo 'close';* F: x& t C( j+ H' K
});" S+ S1 ~) g( O
9 r2 E, R, a2 V$ Q. p
$serv->start();
/ Q+ c; ?3 Q% v* p5 d
* Z6 H% s' {; @: }8 o1 M _

复制代码

主播客户端

<!doctype html>; n6 n0 C- k* r: p* _! r) c6 g
<html>
$ _2 n! f. U( k0 X& n. H
<head>" m6 z7 f7 _! B6 w( M* ?, n
<meta charset="utf-8">
6 o" M5 I$ U) @
( Q: ]9 V# Y4 \$ d1 C- W
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">4 t$ J. T5 ~5 J, l1 e
<title>404</title>
! X7 b3 H8 J( m9 z$ `
<style>
8 w* ` H% p, r
body{
+ o3 d3 z0 N0 A- ]; |1 h; L
background-color:#444;
& l4 u% L6 i# X
font-size:14px;! q5 _# C/ X h- E; ?- d0 y" B
}+ y8 N- l3 J% L$ _
h3{
" c6 _2 z/ K! E% [# T0 W
font-size:60px;+ g; ` w3 y/ p1 M& l- i% G1 D+ I* ~
color:#eee;
5 `% h* Z! E9 Z
text-align:center;
) `% W8 q; Z" Q
padding-top:30px;
( y/ e) C6 ?; L( D0 P+ F
font-weight:normal;* T! o \. i2 d/ z& v
}
0 S4 O9 ^2 m9 r5 Q; b- K
</style>
% C( b9 K+ C4 E0 ]$ M+ ~1 d; X
</head>5 T; i7 C4 K) Q" n5 ]% L* S( E
3 h/ V U$ N8 s$ v( Y( D# c$ v) F
<body>! N5 M8 _, T( g
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>6 q0 K3 z8 x# j) r4 s" F9 o
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
- I/ }; P: k5 x! G4 b, R
<canvas width="400" id="canvas2" height="400" ></canvas>" Z4 |# E1 H8 \ Q# [" W" b
<script>- \: v# U, |( a& z. w2 G: y
var video=document.getElementById('video');' M( C" \! S4 h9 E$ _5 c' U
var canvas=document.getElementById('canvas');
# a4 U" }$ @6 L! E! H3 _$ l; X& j
var canvas2=document.getElementById('canvas2');
9 \$ G( d, \* S5 |
var context=canvas.getContext('2d');$ s* k* D! Z9 ?
var context2=canvas2.getContext('2d');
: w+ E7 |7 S# u: K' S
function draw(){* [) H2 r, t! Y6 K6 T- E- R/ e1 Q
context.drawImage(video,0,0,400,400);
( f$ ]7 C4 m. q6 i7 }
ws.send(canvas.toDataURL('image/jpeg',0.8));1 p( v. B. M. F9 S# f/ J5 l9 k5 m
setTimeout(draw,800);
- ]7 U& ?4 e/ q' m5 f W- Z
}
) B9 S1 f: T, T$ v
' b O4 p A7 F' v( T2 E
//客户端跟服务端通讯
- T9 S0 ^3 Y8 }$ T6 D# A' A
if (window.MozWebSocket). q A: {& [" v! k) Y. D
{6 {" r5 Y ?( T- x: A
ws = new MozWebSocket("ws://182.61.42.187:9501");
, c$ T* O0 Y/ f' E: l
} else7 W; C7 m0 w( J- D# b! O8 g
{
$ o. R4 n4 P8 X! z
ws = new WebSocket("ws://182.61.42.187:9501");
0 {$ p& X4 Q8 l9 _
}
& M# K6 K j" B+ g! c/ w" E6 n
7 s! Z. X5 [0 D2 x+ @4 P
ws.onopen=function(event){
4 U* X0 N8 n) U. T
alert('连接成功');
" T# I, n4 g/ D4 R1 y' z, }# P" L
ws.binaryType = 'arraybuffer'; ?5 w* ]3 l3 [1 v Q" M
draw();0 n; @3 C C, e o1 Y: ^) R
}7 d" `3 V9 n9 r2 l5 j
ws.onmessage=function(event){, H0 s7 k: `1 r# Z9 t. M* t
//alert(event.data);
. H2 _, I! W& U* ^6 C
//ws.send(event.data+"client");
* U) G( ~# Q, U9 R0 v0 c
qrCodeImg = new Image();3 E# z3 `; P! g% R! L8 | q1 C3 T
qrCodeImg.src = event.data;
' n5 T* F7 z/ M7 b8 ]* [
context2.drawImage(qrCodeImg, 0, 0, 400, 400); N u' g- [, X, l3 ~5 @( b6 y) j
! G7 J$ U; U4 O& z, C0 x( ^# p
}0 j" p0 O, D+ S& @6 ~
ws.onclose=function(event){$ r, q) V: e& @3 `. Q4 Q* L& b
alert('close');0 Y( w: j' l c* j4 }! k$ C
}
9 o4 d6 m3 a' P8 O; Y6 o
ws.onerror=function(event){
, Z0 s( n, I; ]: d5 e1 s) V
alert('error');
v, ^) q1 \/ u
}
& Q* i+ \/ z& V: O# t
//video，标签模拟视频
, [ E6 T( Z: _5 e
2 }$ C9 w3 H& @. I- m$ e
</script>
4 s: w6 p+ W& r
</body>
1 v. |( g1 O$ M0 ^5 C. [7 B: y
</html>
& t5 T" Q9 A; {5 j
$ C6 C @% s) o8 @% L. V( t f

复制代码

客户端：

<html>+ I) E# a0 \( Y( V* v
<head>
, w- U9 x5 ~2 R; X, o0 R& j
<meta http-equiv="content-type" content="text/html; charset=utf-8">& F+ f8 [8 r( I" `) q( s
<title>客户端直播页面</title>; Y8 U! I3 b% R
</head># R3 K G- J3 ` Y# D% l9 d- j
<body>
2 R6 l s6 ?/ f# S5 }
<img id="receiver" style="width:720px;height:480px">
5 u0 ]9 T; v! V; Y* \
, X; f% w8 l3 r8 }% O7 J
<script type="text/javascript" charset="utf-8">+ |! ~; ~9 P$ J. Q% Y
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");3 w, s; E/ X9 [( f, l
var image = document.getElementById('receiver');( u; W# j0 m- T5 p; H" g0 ?* n, ?
receiver_socket.onmessage = function(data) { u, A: B. e% l1 M$ H9 P
console.log(data.data);& i0 E" e+ R. ]& f# j: N- a7 j
image.src = data.data;
" n2 t# z4 A2 e9 _$ W# h4 k( x
}" }8 K. Z5 I( r; c) d* L' P T/ n
</script>, C( G6 Q: h- T, o
</body>
% ~% F3 e7 G; Z) U" D1 p6 l3 o
</html>! [" s# z- ]! g
7 P% M1 }1 j. N8 X% `

复制代码

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

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

浏览过的版块

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

浏览过的版块

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