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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
8 ^( Y/ B; ?; u2 w# \( T- f4 _
$client=array();
! |$ `8 z8 e; J$ K0 d
$serv->on("open",function($serv,$req)use($client){
! |2 ^6 t6 p2 C3 ^( @; Z
//echo 'connect'.$req->fd;- T+ B" y, k2 K
$client[]=$req; Q2 c5 O6 s% k# i6 }4 z% U
//var_dump($client);
6 l# w: P5 g- R2 u% K- \/ r* ?2 S+ t
$serv->push($req->fd,'aa');
& H; L( y r8 [. f ]$ j
});5 k8 h8 q' u. s! z0 Q' Q1 L+ X
* b; d0 y4 G7 a. U1 R S5 n
$serv->on("message",function($serv,$frame)use ($client){; H- }) \9 Q- A) ~* ]# E" z
/*var_dump($frame->data);
! o3 }6 B; F& _6 {- J3 ~ D
foreach($client as $key =>$val){
6 Z9 M1 Z% b, l8 ^. y. K! J, R
$serv->push($val->fd,'aa');
5 D0 L4 X' |% V, ~& q, \: w6 Y
}*/
A. t5 b. z" F3 q7 B; l
$client=$serv->connection_list();7 E1 R& m$ y D6 c
var_dump($client);- h+ ^4 E- u( O6 A8 R5 d* E: X
foreach($client as $key =>$val){
' s; A7 }6 a' B9 d" K; ~, q1 E
if($val!=$frame->fd){
6 d1 @- j$ O: I# X
$serv->push($val,$frame->data);
7 O! K+ t: i* Z$ _
}; f: R8 n/ z/ j5 n2 A3 l5 b
}& k( _! Q0 e0 g: E" C$ z/ E
! g# Q# R$ \! ]9 m
});
: J, |4 W1 l0 L2 O$ T
( } B& Z' h! e
$serv->on("close",function($serv,$fd){
6 c; u7 x0 T2 x( l
echo 'close';9 D9 G0 K z# f% R. i% o# \5 O
});
4 S5 P q3 B9 o
/ v! X# H0 \( @4 r. s, x! v% z
$serv->start();2 D/ m, ]/ I* W K% I5 o$ a
/ i5 c5 N* c* X7 t7 S

复制代码

主播客户端

<!doctype html>! {* `8 l4 A7 s) f$ X
<html>- W0 u2 h6 F: X3 B6 ~
<head>/ t7 n" q4 l; u) J
<meta charset="utf-8">
4 N% S1 P2 q$ Z7 ^ b8 Z9 C6 s! R
% o: y* W. j' G# F% D; m
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">, c# T; r6 }) ^ J; A
<title>404</title>& z5 H! ^- D$ k; ^! N) f
<style># f5 G1 o- A2 ^" M6 [+ r
body{
?$ R7 H0 @7 O3 J$ F+ \! I# P
background-color:#444;# c* r: W- w6 @# ]# m4 i# y8 b" j
font-size:14px;
* y4 X9 J+ u0 T9 \) A. E
}
) x$ N$ J8 a/ k3 r- k+ n+ ]& u% K' R
h3{; ~2 W h/ c% d- v d4 ^' v
font-size:60px;. o/ p5 l3 F' a q7 Y
color:#eee;8 W- p% d- M0 J& X2 K, T. @
text-align:center;; q& I6 D. U. B+ ^
padding-top:30px;5 m# ?" K8 D) Z1 e' ]9 N
font-weight:normal;5 J9 x8 F2 Z2 ^. Q7 D( e
}6 z+ T" f; h' P2 w$ h3 L' \
</style>. u- P: ?0 M) P0 B1 P
</head>8 T. h" i3 y c& R) M
, N! b8 M0 o/ R+ A+ J+ G9 E
<body>9 u1 R, I: v- A ^ t' Q
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>4 R j/ p: C, k! p. o0 L, @
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>; k; C1 `2 t/ n% q4 T
<canvas width="400" id="canvas2" height="400" ></canvas>& v! L6 n* B' }9 }
<script>
, @% c- h3 o* f/ R
var video=document.getElementById('video');
m3 E/ l( u9 a' I2 S/ z
var canvas=document.getElementById('canvas');7 \' L d: T4 w
var canvas2=document.getElementById('canvas2');' {% k7 {* {, D% ]# I9 [7 ~
var context=canvas.getContext('2d');' ?% U' X4 @" n* H
var context2=canvas2.getContext('2d');
$ i- X3 w" E+ E$ I8 X' E1 \
function draw(){# g$ H0 t8 J" Q: Y& r
context.drawImage(video,0,0,400,400);6 d. W; T" }6 z- O
ws.send(canvas.toDataURL('image/jpeg',0.8));& O7 v* @$ F* _1 Y1 X9 s. K
setTimeout(draw,800);
' L. M+ V h. A
}
2 |2 Q5 W/ K; p# \5 { u8 w% }
: Q5 y: m7 V- r
//客户端跟服务端通讯4 S" P/ t6 X2 j4 S: E. d* @
if (window.MozWebSocket)" P3 w1 ^; B9 |/ |" J
{; ^1 e; z+ k. H: b) y- k( T
ws = new MozWebSocket("ws://182.61.42.187:9501");
& h$ G2 E# w, C# z
} else
2 G8 M6 r& r: s% g. ~. X
{1 b( ?. A5 Y7 U q
ws = new WebSocket("ws://182.61.42.187:9501");9 Q; p, `5 b0 _; Y# i9 G" y
}! S& p$ ]! G1 ]; H' b) s% `
% g" B3 P3 ]* q: o2 C! _
ws.onopen=function(event){0 F5 A4 }. Q7 T# J0 l
alert('连接成功');! B: c$ ?9 d) E% j
ws.binaryType = 'arraybuffer';( _7 X8 n7 m7 G7 `- d+ |1 b
draw();
8 s O7 D6 ?# J; ^( A0 Y
}
" h" v3 Z4 @5 x" V, W' h! z; Q
ws.onmessage=function(event){' g3 H2 i, q, ]# r
//alert(event.data);, M2 U" o" e E: d* `6 h j
//ws.send(event.data+"client");7 A- F0 }0 h1 j; e, ^+ ^
qrCodeImg = new Image();5 D1 `2 E }8 l" I# D. F7 w; d/ T; H8 X
qrCodeImg.src = event.data;/ Q: M0 \- h2 I b0 ]/ I
context2.drawImage(qrCodeImg, 0, 0, 400, 400);" K: i' D2 E- }+ O! l$ G
0 p' k: d: g/ q) E& W% A
}
! q/ p6 G5 Y8 Z
ws.onclose=function(event){6 ~9 @* |( A% @8 Z9 W6 F, q1 ^
alert('close'); F5 l$ B: K. G0 I
}
) c! ~) b) P$ [( H( _2 i$ `
ws.onerror=function(event){) Y7 f/ E$ R6 O% x* i( i
alert('error');5 `7 A$ D/ L3 z" Z- E9 C- d6 G- F
}
" E8 M& P1 f+ E1 x2 z# p# O
//video，标签模拟视频
; E& u6 H# @0 M# m
9 X3 r3 J/ ?3 V5 E( G/ f' ]
</script>
4 p; X5 o, T; p$ V' [& ^4 K
</body>7 W! V5 m/ u9 a8 d% y+ T
</html>
/ s: y4 f* s7 \! T5 O- w$ @2 a
" c0 U8 J1 ?& Q2 ?0 @- Q

复制代码

客户端：

<html>/ [& x7 j4 A& N( q0 P0 x
<head>, g- |% M3 o4 x- Y! {
<meta http-equiv="content-type" content="text/html; charset=utf-8">1 R7 O6 \. k: I
<title>客户端直播页面</title>
4 s/ }( l7 z: s6 d5 Q0 ^8 s
</head>8 ` b$ ~( j; t& h/ j3 l
<body>8 ?$ t: j8 G# V# ?$ v2 r
<img id="receiver" style="width:720px;height:480px">
7 e+ K2 f: ~# o" F) B" p' `
" p1 H- i: t! H- B: X3 C( q, n( {
<script type="text/javascript" charset="utf-8">
; q: L9 g2 r: A% m% R0 z8 D1 [
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
' Y( L; M' G/ X8 T; i, m! T
var image = document.getElementById('receiver');
+ T' i2 X6 R5 ~: y8 D: Z
receiver_socket.onmessage = function(data) {
# }4 b; d E1 s! G6 }/ ~
console.log(data.data);
. C' p- |# m' n/ s: P
image.src = data.data;( o0 G: i/ s' m x
}
) d, J6 d5 x& E" _
</script>; D( N N7 j% L& B* I; g% J7 n
</body>
& A2 `, B A: j/ S. t* A6 x2 y
</html>
; _2 ]' P6 M& b* O- A& |
9 y- {$ \3 b5 c2 c2 [

复制代码

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

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

浏览过的版块

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

浏览过的版块

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