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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501); f! `1 w1 J$ d
$client=array();( t% J, Y$ w( S8 M* |
$serv->on("open",function($serv,$req)use($client){8 t+ g$ \! k1 X- E" U% _
//echo 'connect'.$req->fd;/ x' n9 k# h6 [7 s
$client[]=$req;
# b& B9 c: q, p8 ]
//var_dump($client);# }$ N7 Z) H1 u3 r$ e
$serv->push($req->fd,'aa');
5 }6 `4 Z1 U. T* V
});& e; b+ k9 D* K8 g
( K$ d/ j$ w* Q0 ^4 T* s
$serv->on("message",function($serv,$frame)use ($client){
, c7 d3 y: {- ]4 f3 ]: j' p
/*var_dump($frame->data);
$ b4 U5 o* t8 t' }' Z2 P+ ]
foreach($client as $key =>$val){. d# Y& _4 C5 p& W
$serv->push($val->fd,'aa');
7 [/ Z( c. M& u0 {6 y$ v9 Q4 ~
}*/
7 R* W' o6 l2 Q' W; e; x7 g
$client=$serv->connection_list();3 ~' W- y; \, q* ~; B. ?
var_dump($client);
: `( i9 A0 m5 q: S+ T# w
foreach($client as $key =>$val){
& m( y# ~: h1 Q; ]
if($val!=$frame->fd){, L/ Y' c+ q& p* H. G! H+ n
$serv->push($val,$frame->data);
' ~+ U6 S# X! v
}
3 C2 P# I9 Q- l0 M3 ^
}
) r6 z) U( h$ Z; V; e0 c
: C' x+ @/ ?% n8 ~) O# ?
});
: S4 o* E+ k! |) M
4 b4 E2 F, Q& S# a. p# g; `- r
$serv->on("close",function($serv,$fd){
1 L2 R" {$ S7 C6 U
echo 'close';
1 ]! r+ c! Q0 p" v3 Q1 ?
});8 |! k' `& h5 t
0 y; s; ~5 Q+ _+ Q/ o: t
$serv->start();
4 R- a0 [* Z: L$ G3 r
* N4 y# }% Y) k- |4 X

复制代码

主播客户端

<!doctype html>
0 Z& m' O' D, ]; h
<html>+ ^8 s7 y6 b7 z: r ]" A" m7 M
<head>$ K' M$ C# V2 h" i- i
<meta charset="utf-8">
, g# @0 S) L) v, [' D
7 @" j/ @% }+ F# d
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. w8 M" z& k- q3 Z8 s! Q3 e, Q# f7 D
<title>404</title>
/ C' h; i9 L. X' M
<style>
4 Q$ p0 M+ X6 T. i1 w
body{
8 l% [" ]: I- t8 P
background-color:#444;4 M0 \3 \- x- r R! n
font-size:14px;: T' D$ k' y( h" c: o
}
0 Y0 ?% e' m/ g, y, a, b9 y
h3{
. P% P% C( w1 q1 ?8 l) S
font-size:60px;
" c/ E' r: |# s
color:#eee;
0 K! e; E0 c( P7 r1 p5 [
text-align:center;
9 N. Y0 [4 x0 Q) w- k) {% [$ g
padding-top:30px;
8 T5 @" E& o* Y/ E* f4 @
font-weight:normal;/ ]( }3 `: i- S' j
}
0 Y9 i9 I: i) ]* c( w u
</style>
# i$ \* o% v1 i& V6 } u
</head>
7 S) [9 d& d. V# v1 p
# [" w) O8 d' \1 `# }8 ~
<body>
7 [7 O7 {3 ]" y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
' y8 t4 [: @3 B& J5 y
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
8 {2 c- L- {( g6 t8 P! F6 c" b; T/ V
<canvas width="400" id="canvas2" height="400" ></canvas>8 c& a. g* U2 g
<script>* l3 ^7 R3 |$ t4 e0 J
var video=document.getElementById('video');6 D- G8 x' i# Y* k4 B9 ?
var canvas=document.getElementById('canvas');* _( A- J. H% |" c
var canvas2=document.getElementById('canvas2');
1 P" W& `8 K Y+ E1 @4 M
var context=canvas.getContext('2d');2 S7 G' o3 F; g" s$ H: n w. c
var context2=canvas2.getContext('2d');9 H' p7 D- T3 i! p1 u6 g* L8 W
function draw(){
l3 ~7 c7 {. u" Q6 L2 |3 v
context.drawImage(video,0,0,400,400);
e) W9 N3 S% `# z& L' k4 {
ws.send(canvas.toDataURL('image/jpeg',0.8));
# C" j; c: Y( G) |. n; m
setTimeout(draw,800);
. i0 r1 D1 n! F- x
}" d* @, w0 G# ?1 H- t& l# ~
1 c L/ U0 `6 _5 N2 B4 B
//客户端跟服务端通讯
/ }$ W& ]4 o# W/ u8 `7 ]3 D" p7 y
if (window.MozWebSocket)
6 I3 }' t0 v6 f' A: i3 ~1 t
{# e2 h- Q' V x( H
ws = new MozWebSocket("ws://182.61.42.187:9501");6 L; ~2 e& \4 q
} else
# @6 i' j3 v, f8 I6 h# K: H
{! @& p. G4 h) A
ws = new WebSocket("ws://182.61.42.187:9501");4 D$ u. b( c7 M* @' r8 y
}7 S8 z+ J' T7 e% d! {
) X- j [4 t4 r( g3 k. R% S& l+ S) I
ws.onopen=function(event){
( F. ^4 K7 Z4 [: q4 k8 @( K
alert('连接成功');/ O: g6 v0 z1 o$ o
ws.binaryType = 'arraybuffer';: b- a: |# E4 _7 \& I* j: j, R, s
draw(); m; k) B7 Q+ ~# s3 J
}! A; r! [7 i5 Z7 p0 j( K7 R# u
ws.onmessage=function(event){
& u8 _+ Z+ n3 f1 z1 A
//alert(event.data);- A% v, ?/ h% T8 l
//ws.send(event.data+"client");" R& I2 p v) x5 q
qrCodeImg = new Image();& j7 w, t$ I* _9 d w( G: g8 n
qrCodeImg.src = event.data;0 b; y% c' {# @; J! i4 y
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
$ ^! ^# _# v+ b1 v1 J
9 s, b. b- z- `9 r, u
}6 C! d5 H6 v& u1 c, P$ ]
ws.onclose=function(event){; C( a' p" J: m
alert('close');
Y; a- J! ?/ g. b# l
}
- e4 p- y: A& m N2 U
ws.onerror=function(event){
1 |( M, g# z6 p7 Z7 J# w) u; S
alert('error');3 i: N% \) I2 v5 M$ k
}
$ q; E$ O# r* s1 ^. z, c9 I
//video，标签模拟视频
& y7 ^$ c$ p# G5 o8 K
. }7 `! {" O( Y5 {4 l
</script>
) F8 B9 `/ T( j1 O. p0 H
</body>8 G) G6 x& ~2 m( A i6 O& |/ [2 p
</html>
$ _! m, A0 x2 i1 M5 V
& _. o: `0 i, V* Y/ p

复制代码

客户端：

<html>* y7 I9 C1 U+ b _
<head>
; L% y; N8 }1 f/ U$ g
<meta http-equiv="content-type" content="text/html; charset=utf-8">7 B& \, Q. O0 V& B* C
<title>客户端直播页面</title>& O7 Z. a) s i0 X% V- W, ~; k
</head>
: v) E* v8 Q* R
<body>
" D4 y; X8 y" Z$ I
<img id="receiver" style="width:720px;height:480px">0 l- _8 Q' I9 c% e6 m* e
* ^7 T" U1 W* Y; M
<script type="text/javascript" charset="utf-8">
4 x0 d) O5 e& |$ n
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");, \/ \1 K4 ?4 k0 b5 X) ~
var image = document.getElementById('receiver');% f" B: X. F# B0 Q
receiver_socket.onmessage = function(data) {
; \4 Q; P# s1 R; z
console.log(data.data);. j0 D9 h8 Q) Y; B6 p9 i$ c
image.src = data.data;
3 q( h2 o, s+ w' _" d' H! A2 N
}; N3 ] n# w. e9 R9 r
</script>
, z" u8 }" C3 y8 e5 v- }0 j2 H
</body>
/ \" ~$ h% B" b* J; M G% ?
</html>
4 X1 {$ f, T3 O2 q+ C( T/ x) f
" x4 r1 l8 ?3 l5 s8 `+ y8 c

复制代码

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

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

浏览过的版块

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

浏览过的版块

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