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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);2 ? ~5 G% q# F: J* `9 Y2 I H
$client=array();
' E7 z6 M+ A: _
$serv->on("open",function($serv,$req)use($client){1 Y& H, N# Z/ o2 v' w. v
//echo 'connect'.$req->fd;0 u, c# R% T& O! F x% B
$client[]=$req;: n6 \% W$ ~% h9 q% O
//var_dump($client);2 @; m* q% t$ `; K `4 c6 |
$serv->push($req->fd,'aa');8 ~/ \" a6 c! H7 {9 l `- F. w
});
, Q; ~) P A( z, E
A4 l% e3 k9 H1 H' l$ o
$serv->on("message",function($serv,$frame)use ($client){ H2 T9 ~5 G+ O% c5 a
/*var_dump($frame->data);8 K) L: G% I e5 T; F
foreach($client as $key =>$val){
$ w+ n# Z$ E- A9 w
$serv->push($val->fd,'aa');, i5 x* t! ?* n/ T& j
}*/
( j" d2 u* h& ?9 H, J
$client=$serv->connection_list();7 \4 s. v2 ^7 {4 s2 p6 E! }1 u
var_dump($client);
h6 k& |! m1 \- ~( [8 [& a# ?
foreach($client as $key =>$val){
& s: R/ Z# z0 B- G$ ?8 b9 v b
if($val!=$frame->fd){
, ~7 k- }3 A/ [7 H( e& b
$serv->push($val,$frame->data);! D9 ?% I3 Y- e% ^8 ~6 P! g" i
}+ W. m) a, P! O1 k
}) F& }$ ^8 ]5 K2 I W& v
8 K: M, `8 U! ]' N0 ]
});
( w: y8 |' L' ~% @
+ A* K! w. ~5 {2 W0 c$ i* D5 R- C
$serv->on("close",function($serv,$fd){
& D( L' ^: h" C8 B
echo 'close';
+ X; _+ G! q4 f- j( h' v/ z
});
) p+ D- p% t$ ~7 B$ y$ K1 i; [( ]& R
, }) w% C1 F' o5 E* D6 [: Q9 W9 F& Z# x
$serv->start();/ m9 I' h: ~, l1 X0 c
9 f6 Y( O, N: j, B4 P$ x* p4 r

复制代码

主播客户端

<!doctype html>3 X7 a/ g. [ ?" w; J [
<html>& V# x: g3 h6 ]8 o3 ^8 O) Y% d1 i
<head># Z- R$ D$ v: b9 c3 e# k% S
<meta charset="utf-8">
4 O% v) W! k* T) F9 L8 o7 Q: p% U
( }2 R/ ^1 A. M% g# `
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
% Y! Q' E+ T @" J
<title>404</title>$ ~6 @7 R0 X# [9 s
<style>; [! p$ ?; B' O4 e: V+ x/ n
body{
! C6 P$ _7 {' N0 t$ t9 n
background-color:#444;1 p1 w8 O$ I4 N- E9 i
font-size:14px;' R1 q4 _# P; _% m* e* `9 b- y' a7 N
}
5 z9 T9 V n: B/ |" ?
h3{: w/ W- p# [4 j, \. `, @
font-size:60px;
2 E2 l* `+ _* |
color:#eee;" z# t: W2 I; ^4 E
text-align:center;
5 }6 n+ l" h' x! m! z% M
padding-top:30px;; c4 Q( [* d- E
font-weight:normal;
& w) U5 o! j( N x; ]. Q( g3 l
}2 Q4 s# K4 N# E1 U+ d) Y: N# B
</style>
" d: n+ w- b& n5 b/ O& Q- J
</head>% U+ g4 |* U- M5 Q* C
$ V+ c+ U9 W2 {- W* s
<body>5 E" T6 ~4 T# o. \) _# u2 F
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 U4 o" M' ]% K3 D, X# Q* ^
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>4 K s& u8 t) Y% V
<canvas width="400" id="canvas2" height="400" ></canvas>
, j. D# c4 Y) i: p( {0 D
<script>
4 S0 h# ?( f+ l) ~2 X
var video=document.getElementById('video');' a* z1 m F. J6 f
var canvas=document.getElementById('canvas');
+ @! G8 C0 F0 L$ ~9 _
var canvas2=document.getElementById('canvas2');
' b$ Z! b" n5 {+ L" T
var context=canvas.getContext('2d');
8 S2 |( [' U9 B' s3 f4 J) X
var context2=canvas2.getContext('2d');
/ c8 ?4 ]/ s+ T9 Y1 u6 P5 K
function draw(){
" Q3 [" B& O$ C' r1 x
context.drawImage(video,0,0,400,400);
* n, ^; ~7 k7 Y" c5 g
ws.send(canvas.toDataURL('image/jpeg',0.8));7 Q- j1 g H* q" K) J5 ?9 h
setTimeout(draw,800);
' C6 [7 B# o1 `- |& @! l
}
( f% i# U3 _( Q% p2 V2 J
! k$ D3 J; d* a7 s* Z5 [
//客户端跟服务端通讯
3 B& i$ a/ \$ y& S* M7 K
if (window.MozWebSocket) D7 w" q, A/ Q3 Y" M
{
0 _& M. a+ Z( m( d' ?; w, C
ws = new MozWebSocket("ws://182.61.42.187:9501");4 [- c9 J- d( R9 e, J6 W- f0 |
} else
! j# H- J+ E0 Q: t) F2 p/ ~# B
{- V& O% @9 k' Q
ws = new WebSocket("ws://182.61.42.187:9501");
( J) ^% O3 b' t) L: T% o; l
}& Q6 _8 Q3 _! g; a
5 [5 x' w$ Y9 ?+ }
ws.onopen=function(event){, J- @* I# k# o5 q7 E3 l \# ?
alert('连接成功');
/ d( N2 G# u& J' c" T- I
ws.binaryType = 'arraybuffer'; R( l% \; i- }4 b
draw();
d p' X" Z- U( r) s
}( p: A) |5 Z* a
ws.onmessage=function(event){. ~& y; i) ~/ M6 Q! s# R* e
//alert(event.data);# O- I* ]) S. g) y3 o) j
//ws.send(event.data+"client");
( D) }2 ]0 k( e/ e& a# C
qrCodeImg = new Image();* _4 ?, ~7 I/ {; Q& q3 \
qrCodeImg.src = event.data;
3 c( O+ B/ s2 v" `; G- U( m- f
context2.drawImage(qrCodeImg, 0, 0, 400, 400);' I, ]' T2 X: X& c5 e& h% x8 R" g. Y
# b+ C2 ^9 A2 c; a% U, h+ o4 P
}
7 B) i6 f$ }8 u2 A3 ^6 S
ws.onclose=function(event){' P) ^9 V# k, R& }
alert('close');/ L Z6 Q$ U) i$ X- p5 i3 s$ l( D
}
( w# S7 l" s! C E( F1 z3 Y6 s
ws.onerror=function(event){
, C, Q% D8 B' H) I
alert('error');
, L- ?- M# d% @" @. W8 x# k ~8 J/ T
}8 P3 D [0 p& H8 a6 T
//video，标签模拟视频& r$ e* ^; V0 n6 w2 \5 m9 i0 f2 F
' ^8 R0 f( E4 J) l
</script>
: M! q- O1 T& L1 _0 s4 `
</body>
' W) Q8 W1 H9 Y: b" O, b: [
</html>
# ~! M2 D$ ?( f* G- G$ [. o3 Y1 c
) m; k* `6 v6 P+ y7 p/ ]5 q5 h

复制代码

客户端：

<html>: G, I5 n* L' B k. N
<head>) X" v- X E7 Y
<meta http-equiv="content-type" content="text/html; charset=utf-8">8 O# [) k& l: Z; }" {
<title>客户端直播页面</title>
; ^1 B( G/ N- U' b* z
</head>
Z% Y6 V0 b5 l; Y$ }5 t
<body>
& r$ p( P8 ] S. B0 M0 e# x" w% b
<img id="receiver" style="width:720px;height:480px">9 {' W$ t, @# U' D' q
; t+ L/ |! G$ @
<script type="text/javascript" charset="utf-8">
" G/ g/ O) F+ M
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
3 Z; K. E0 l6 B( y8 D7 Y' [) T5 D9 b! s
var image = document.getElementById('receiver');
8 ?! z: t& K, ]% h
receiver_socket.onmessage = function(data) {6 w! P% X2 z( K( q/ T5 S5 R
console.log(data.data);
9 L7 t* C# D# e7 i& p `+ r+ _
image.src = data.data;1 ]4 p0 y! D2 |# v
}
# [8 ~% m, G) c- e5 D
</script>$ `2 ^) \0 e3 D& X& k! S
</body>. V% |! k4 }& N! t5 v
</html>
$ S, U- J Q* i9 o/ J
- ~* q7 I" b! T2 K5 g) l

复制代码

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

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

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