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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);' D+ |! s; C( h% U3 }4 ~1 f- X
$client=array();
$ Z3 |2 _4 u. s9 T% k+ J! A
$serv->on("open",function($serv,$req)use($client){+ {8 |+ X( \ H* s; w
//echo 'connect'.$req->fd;% Q! J* Q: E; {. ^7 k& X2 a( r
$client[]=$req;
5 n# E( a" U$ P3 h
//var_dump($client);
& \' {& O% @' X, O: M8 B1 v% i- X
$serv->push($req->fd,'aa');6 q2 w5 W. k6 S9 k
});' C& w% v, y3 D$ ]. I- |- ]; c1 w
* Q6 u2 v x9 M, ^: F0 q+ }1 \
$serv->on("message",function($serv,$frame)use ($client){( v* Y$ i% h* x. n! A
/*var_dump($frame->data);
9 H$ \5 U) q% ` _4 U
foreach($client as $key =>$val){
3 c3 j- i' M$ ?6 [, `1 `3 u! N t
$serv->push($val->fd,'aa');+ {8 r( ^" _ e t: O- s8 v: i
}*/
* J6 c( b) Z3 }3 s; r9 I1 e
$client=$serv->connection_list();
- I6 X- x" O: ^7 K+ C/ p6 Q
var_dump($client);' d( T: q& K4 V3 b
foreach($client as $key =>$val){8 p" s& a1 B, _0 g( L4 w
if($val!=$frame->fd){% n7 X: Q* |, q
$serv->push($val,$frame->data);
+ z+ X3 K& F. f. Z8 K/ l# Y( o- d
}) Y' Z+ c @2 Q D. W; ^* [( a) z
}: v- v0 X( X8 `/ y. o$ v1 j
& k& X7 r% s" s! `% i- R
});9 Y2 a6 E: q- ~
) m; }1 m, |" p$ h/ R. v: B
$serv->on("close",function($serv,$fd){- E8 h2 B3 O. {/ M2 X( k
echo 'close';: d: |, ^0 `/ } l T/ ]' X4 I* I
}); z9 e- \3 P+ b, ~4 A
" y, D2 A9 g7 ~ S4 c/ ^; v8 T/ o: Z+ A
$serv->start();0 K# W- ?2 j* Y" N6 s
+ {1 r7 v( N: [9 B/ f- o

复制代码

主播客户端

<!doctype html>
; r& k) x3 w0 j5 C# y6 P& h
<html>) f) L# [6 p8 w/ h' a8 j
<head>& [. q# F/ q. J: A
<meta charset="utf-8">
# s: j/ c& f* @' w
% h$ @7 Z4 @# t+ M, p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2 T9 S. v, I" z* r' {2 [
<title>404</title>
: T d. Q) }& R. h
<style>
8 \0 j( n! U! m6 O+ m
body{" e) n% v$ R7 g3 A0 K8 j: r2 Z( S
background-color:#444;
0 G' m+ c5 S2 R# A3 ?3 c/ Q: J
font-size:14px;
% e/ R" d6 a7 e+ B( m# ^3 x
}5 I4 Z' J/ O! q2 G- @
h3{
. `% W3 B' k1 ?& }
font-size:60px;5 b; L' b+ h- n. h
color:#eee;
( y& m @ ?0 {5 A/ v
text-align:center;. C7 g( x* z; ~6 K# @
padding-top:30px;8 m2 h7 t: ^) U9 f3 k* v6 Y
font-weight:normal;
* \2 r! S/ i# \$ P" j
}
6 c9 C. U* a1 j- X) U3 Y% C
</style>1 n6 x) g/ n, f( a
</head>9 A, g, c+ t4 n+ r
8 S# L4 f! ~0 b$ c8 {- g
<body>/ x9 |5 I, ^; u# X
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
k* c2 ? V8 O' M6 m2 e6 A$ X
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
Q4 N( R- M4 n) f7 m
<canvas width="400" id="canvas2" height="400" ></canvas>! |, `. x1 i$ j- l, X" T! i9 L
<script>3 j/ y$ R4 e! P0 \ }, `
var video=document.getElementById('video');. I+ {" M, {: M& K
var canvas=document.getElementById('canvas');
8 X/ a8 O4 B; ^) J: e
var canvas2=document.getElementById('canvas2');7 p( h9 p' V5 W# h$ T/ d" |
var context=canvas.getContext('2d');
7 E8 P6 |9 o, L" s' n9 t
var context2=canvas2.getContext('2d');" R: I! ` }' M2 M, w
function draw(){1 l& l7 s) }. H, h! g6 a m" c
context.drawImage(video,0,0,400,400);" I% F; R3 k& b3 ~( \4 ~ _' ^# q
ws.send(canvas.toDataURL('image/jpeg',0.8));, w7 d; R& a( |3 R v7 J% f
setTimeout(draw,800);
. u, Q2 |% |9 I* U
}
T* V R# n7 E* f& g; E
2 I8 \. X0 p4 o" K7 R
//客户端跟服务端通讯 F/ }( u. H+ k9 ^- N1 J
if (window.MozWebSocket)
+ M7 g+ n' u S. c; T0 `
{
' `. F& @$ S- W+ Q) o& w8 ]; t
ws = new MozWebSocket("ws://182.61.42.187:9501");
" a% l( p; C0 t N
} else, t2 r; \; Z9 E1 ]6 r
{$ t9 l- t' x7 {( r/ g. E7 k |
ws = new WebSocket("ws://182.61.42.187:9501");
/ z% u& k$ ]) ?8 T" m+ J9 t
}
7 Q$ N% H+ t2 \4 ~4 O( T0 p
" F+ k0 W p) T) v; I$ `3 w5 {
ws.onopen=function(event){$ H* x2 g3 P- [$ X: k! Z3 R, g+ P8 G1 q
alert('连接成功');
* v. O1 i7 X4 g! k& H+ o
ws.binaryType = 'arraybuffer';! L( ^0 J# q! g" K8 t
draw();3 N" i/ C" d- s l
}9 d5 K$ ^: M5 a+ S1 P6 T0 H
ws.onmessage=function(event){8 a- C3 a$ b) r- Y' e- _
//alert(event.data);/ J0 ?& q5 K4 S2 }; j7 x
//ws.send(event.data+"client");
/ B1 M7 K8 W' [- P; J
qrCodeImg = new Image();* p' b7 e1 n) M! a7 T
qrCodeImg.src = event.data;
" H9 X C7 m+ W V
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
4 X- @# b/ ~, s
, D( v0 @, o u; v, {/ F7 F$ u* H
}. {2 z) Z& y/ @6 F) _4 B' x8 A
ws.onclose=function(event){
- w9 v( e6 M% H C" N. ~' r# v
alert('close');% g+ I0 [9 X9 E3 o" L
}
$ O9 n3 Z. @. D+ G
ws.onerror=function(event){* c4 A/ G! ^: h/ g& u3 ?' E
alert('error');* E8 }/ I* B2 e' I
}0 ]% V; P3 N) ~2 D3 _ ~" g: ?0 z
//video，标签模拟视频7 I, B6 H5 n: k8 a
2 z; I+ T. K3 ^4 d/ u# t3 }" l) @
</script>
2 w; I& k% v! [4 C: k
</body>3 J4 b- ~- x0 q, {/ K/ ?7 I
</html>3 c/ j- P$ d) l7 A7 |5 [1 A+ w9 b
; O" `& [, x' w v: n

复制代码

客户端：

<html>
; d. v) a4 t, N# D4 S
<head>
' u, k$ f) ?- J
<meta http-equiv="content-type" content="text/html; charset=utf-8">
( c; r7 B& Z8 C1 B/ N' ~1 J
<title>客户端直播页面</title>4 Z3 V u5 e( n+ }6 [! R
</head>4 n. m! Z+ @) e# ^0 u3 J
<body>
, P! K: G9 b- v
<img id="receiver" style="width:720px;height:480px">
# }' \/ j8 I* `5 q# q$ N
: ?$ V8 z6 s, h+ F7 |4 X
<script type="text/javascript" charset="utf-8">" x# x4 y- `/ N7 v: \" z& B' N
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");+ g* {0 l5 p8 r$ T" e m1 E% |* l
var image = document.getElementById('receiver');" l1 t& k/ a; b. C/ W ?
receiver_socket.onmessage = function(data) { ]# r9 w6 h# o9 `
console.log(data.data);
* Q$ y5 K- `% `& o F7 M+ M
image.src = data.data;
y, u/ D; }* ?! \
}
</script>
1 a0 z$ }, b8 Y
</body>' U( r6 g9 L4 b* H4 k
</html>
& {! H a" \- N; ]
) ]& F, M/ N6 S% p/ n2 _

复制代码

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

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

浏览过的版块

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

浏览过的版块

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