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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);: i% y. I3 l: T% L; [ o
$client=array();" H* @3 T) n( r3 ~; l( @& q' o
$serv->on("open",function($serv,$req)use($client){: x3 j" U4 w. M5 [/ ~! s& j3 V
//echo 'connect'.$req->fd;5 ]6 `# h ]3 n+ [
$client[]=$req;5 ] R3 j5 I2 B, z/ C: b6 b$ y
//var_dump($client);
+ P2 M5 R) L2 C8 i( Y1 k
$serv->push($req->fd,'aa');
! [+ N) e( \. \+ \& Q f D3 b
});& Q R }# F4 ^$ J" R
- _ h& x( b0 q( t
$serv->on("message",function($serv,$frame)use ($client){
" I- s4 X, R7 ^# B; Q5 j4 Z
/*var_dump($frame->data);9 k- b/ E2 c" z8 L
foreach($client as $key =>$val){
. d* v8 Y5 E7 ^" B
$serv->push($val->fd,'aa');$ d; F% s. o% Q% y- p/ V
}*/
6 J- X' e7 g, b0 Y' I
$client=$serv->connection_list();2 y% e8 ~# L4 n6 [' G
var_dump($client);2 B8 ~2 h1 X# u. b
foreach($client as $key =>$val){
5 B! ?" Y8 [5 I2 E9 {4 z
if($val!=$frame->fd){
' F% R& r0 w1 f) |* P6 x
$serv->push($val,$frame->data);: D: w: ?$ k5 ?- C6 O0 K
}- h( R4 [7 P* \) c
}
! o7 _& ?2 r. T: N
a+ q4 Z; m* i2 V/ ^
});5 P% q2 ^5 l, i, x* |( Y; U5 ?" U5 s/ K
7 D' s' I8 z+ L
$serv->on("close",function($serv,$fd){& S- n4 b6 v( O
echo 'close';0 K4 K6 R* T4 b" j0 b
});9 L" D9 u% O5 D- \3 t* G. g
6 {* W/ u# m2 Y- k! n0 m& d
$serv->start();$ ~" [. m7 C9 {
. S' Z. q5 [3 X. o9 `# ^

复制代码

主播客户端

<!doctype html>1 ?4 }5 U: \7 F$ M
<html>& V5 u8 s8 T" `: k$ v
<head>, O* o9 h, w8 R% _- w' H
<meta charset="utf-8">
4 @# E7 I( U% h5 v
3 L \4 U* C o
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1 t) M1 j8 y4 `3 y
<title>404</title> @& ^: L P+ W7 X
<style>
" p0 `' L5 H6 b# w
body{! j! u& z, L* q6 m6 c5 D
background-color:#444;
3 ^0 p- `& F% s) ?. F
font-size:14px;, p+ B% J. p4 v; q
}
7 w. _! o- P$ e9 o
h3{1 V: o1 N/ m8 r. N$ L9 L$ _
font-size:60px;: u6 g% Q7 {; C# ?1 z9 X
color:#eee;
( [: G1 V/ E; H) j
text-align:center;
1 |6 X" N9 p4 l! f: Z+ |
padding-top:30px;* Y6 z# B( f. ?
font-weight:normal;6 X/ c" n7 f6 W& `3 o1 ?
}
0 T# A& h; m0 Z! O/ J! `
</style>: j! E( K1 ~8 i) K( o! Y- Z$ e2 p( L
</head>. b* {. [2 G& G0 \/ t
% k- v* q0 h' U) |+ S
<body>) z" o3 ]4 t8 `* B3 g3 x9 ^/ K
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
/ v& I8 |* U8 }& f
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
# Q" s- y+ i# J) B5 A
<canvas width="400" id="canvas2" height="400" ></canvas>4 C( @/ h; m5 C7 b' k6 M
<script>/ t+ _! L7 V0 L; V0 g8 u1 |
var video=document.getElementById('video');
+ ^. ?7 b5 I8 d; t% @4 i( C
var canvas=document.getElementById('canvas');
+ |" W; R. k( q( E* {
var canvas2=document.getElementById('canvas2');
+ ]8 `( g1 m7 Y& N- Y
var context=canvas.getContext('2d');
3 e5 l9 n% z; {+ U: v% S, T
var context2=canvas2.getContext('2d');
% L+ T; f5 S* Y3 b3 A' @; b* ^4 l
function draw(){
, e2 \* v3 N; P! U
context.drawImage(video,0,0,400,400);7 h1 P. @- ^# f9 \- R( [9 q4 F
ws.send(canvas.toDataURL('image/jpeg',0.8));
: {) F0 h+ }, S* n9 `% z5 a
setTimeout(draw,800);6 b+ `9 e/ i7 z2 S, ?# u. Y
}
$ W" _/ j" c! ]7 E& t3 K
1 V' |8 Z2 e+ _1 K$ O. L/ v2 w( E
//客户端跟服务端通讯4 a) H2 C. R2 O7 [, Y* ^/ J1 n2 `
if (window.MozWebSocket)' G u4 Q: K& o8 F
{
( e# C& ?# k9 |( p+ G% j
ws = new MozWebSocket("ws://182.61.42.187:9501");& S: S* H7 q' [
} else" l, S5 Z0 m4 i/ V
{0 x5 ]% E! i9 a! @. e: N
ws = new WebSocket("ws://182.61.42.187:9501");
- p$ p3 ?! `8 H3 n
}
' l4 ^' [0 f; y1 ~& B h& |
$ P9 A; o" ~6 I, @ M6 a$ @
ws.onopen=function(event){) }$ i% l( Z2 _+ X/ H; A5 l, h
alert('连接成功');
/ |9 T' w% N& o# F+ `. a
ws.binaryType = 'arraybuffer';4 J# O( y) }* |* f8 ^4 f
draw();
. a' o9 S( O' n4 |$ \' j8 [8 w
}
5 i! d9 [9 }& k( t1 F' K
ws.onmessage=function(event){# v$ N- h9 U. M
//alert(event.data);, C( Z2 e! C/ D0 Q
//ws.send(event.data+"client"); |5 d; r: ^ @* U1 E/ }4 W) m9 p
qrCodeImg = new Image();
O. D. S; y, W- ?$ N# e9 I* W
qrCodeImg.src = event.data;) [; l8 ^9 g4 {! P z" v9 h1 a
context2.drawImage(qrCodeImg, 0, 0, 400, 400);3 Z4 X5 U3 T& G! ~( M8 F
. I9 M* U# J( _* G' E
}
3 e' _5 q. S# l* H2 x
ws.onclose=function(event){8 E) z, y0 W' i1 h8 ?% |( N
alert('close'); l1 ^" L+ e0 `# w' o+ o P
}
2 J5 k4 [* Y% a _. \9 S
ws.onerror=function(event){/ E: H$ M8 u7 h
alert('error');
2 f/ X: u4 U0 t! H3 i
}$ L6 I p8 N2 u: N4 a% S0 m
//video，标签模拟视频% P4 M' d' n5 a3 k1 C, ^* o& h
6 ~( e% w4 s$ r( E% P
</script> w/ n o$ T/ c9 a1 F! E3 k
</body>
V) t7 v% u& Y8 e C% u, o3 N
</html>
; ?% h& G' n7 ~: H) Y( `
, K/ C _2 q5 f. Y

复制代码

客户端：

<html>
% S$ B$ b" q- _4 ?
<head># g. ~7 Y8 H3 s# V# }. O# E7 y
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3 V$ z- I# E6 ?+ s0 h
<title>客户端直播页面</title>
# Q' f- y# O5 |; c0 `
</head> V- f' j) c6 k
<body>9 K+ d/ ^0 o" N9 f0 Y; H4 a1 F' L4 {
<img id="receiver" style="width:720px;height:480px">+ G2 z% N- B) T
0 |- \ g7 n0 b4 V* \) _4 f
<script type="text/javascript" charset="utf-8"># q! N/ |4 R0 d$ f& y( v5 t0 Q
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
" X/ B5 C$ ]+ e! T
var image = document.getElementById('receiver');
' Q" V5 M5 H: F- t" c+ T. Q
receiver_socket.onmessage = function(data) {
5 R y( x# T. Y. ]7 R
console.log(data.data);
# M0 J4 S( s% f/ N- b
image.src = data.data; n/ h6 Y' p6 f, \4 w8 E
}
8 `) W& g# i6 a: v$ ~1 g
</script>) |) E. v/ c# O2 P
</body>- c8 f0 W' ]; o( }, C/ d
</html>
& B% N0 ~3 {% j1 v( X! r& l
1 O8 Y7 j# a( @, `

复制代码

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

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

浏览过的版块

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

浏览过的版块

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