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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);( X5 ^! G# A! ]1 \- `
$client=array();# U& A. |0 n0 N% v7 l
$serv->on("open",function($serv,$req)use($client){ I7 R3 x6 u p- ?1 C& M, \7 {6 s; y
//echo 'connect'.$req->fd;
# z" L3 Y* i6 @- H- u
$client[]=$req;
! [9 ?5 m% ]# X% E/ l- {5 v+ e
//var_dump($client);
" U4 g4 {# M* T8 A' c7 z
$serv->push($req->fd,'aa');* ^8 Q2 p1 c2 M& g4 M' f
});2 B4 \. u- [' F2 _4 B
% g/ L+ s7 }; p1 D& b( K
$serv->on("message",function($serv,$frame)use ($client){
! k$ q8 ]5 g1 l Q
/*var_dump($frame->data);8 _3 `, x4 i* `0 X
foreach($client as $key =>$val){
7 N! @+ x+ C& x
$serv->push($val->fd,'aa');
& {! S8 w3 Z2 j0 q
}*/' u( c( Z5 k* Y4 ^
$client=$serv->connection_list();
; e5 e; b8 d1 z
var_dump($client);
! Z7 u0 Z3 K5 T8 {
foreach($client as $key =>$val){* z$ J" Z$ b8 C
if($val!=$frame->fd){* b: t) S* g5 @7 l) g4 t
$serv->push($val,$frame->data);
3 c; s' j: v% A P4 A
}
E' K# w: C0 D0 D0 v4 o6 G
}( N2 ]. o+ b+ z. H
5 s& X6 E, `2 h7 w& _/ n
});% u8 R7 G3 Y Y2 }9 q
9 f) y# g i" y5 {
$serv->on("close",function($serv,$fd){
) D; B& \+ E& ]& z( t- Q
echo 'close';
& m8 |$ R8 o) [8 a/ l7 b- x
});2 m1 a& ]8 z+ S" j1 d: g
& W* ~, o. X1 r8 [- D& V) g
$serv->start();7 P( u, s X. O# O* w: o
# l& p( @0 f) H/ d; ^0 ^

复制代码

主播客户端

<!doctype html>
6 a" H; `& o& b; n3 @. T9 r
<html>
<head>
& l) o8 T1 B( z, ~3 B
<meta charset="utf-8">
: x. H0 n. \; \& C
# t3 T' Z3 V) @, h* a: q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">1 D V" L5 N( j9 W% C. O- s
<title>404</title>
, a1 s7 |' c }0 J% J4 }
<style>: h0 k- K" j8 }
body{
T$ s4 Y5 U5 d, o: c& b
background-color:#444;
1 I* i0 d$ l! o+ ?/ I5 U' c4 y+ s
font-size:14px;
5 d* i5 i: j" h, N
}
- V. |0 r. C' \/ f
h3{9 Q: p/ w2 Z5 |, I
font-size:60px;
) Q1 a$ K8 P3 f# p* w5 z
color:#eee;0 X1 a9 [0 r- Z. j! H
text-align:center;6 G, w0 q; J; v) @5 N1 K: O1 G* w
padding-top:30px;
0 ]* }- R3 n/ ~0 S" C; Q) r+ w
font-weight:normal;
1 C0 g% {( r+ {
}' J3 f2 u# v6 m3 D; k4 X
</style>( L# W4 @6 z) D) g# }
</head>
' ?& g# f) W4 @: |" Y4 x/ n( s
) U$ l, S( K; u6 Y
<body>
8 z, d/ S. a6 U7 G8 I' C4 `& Z
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
3 Y8 j1 J: M3 i" X7 G
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
) I' S$ V `) |/ j& r
<canvas width="400" id="canvas2" height="400" ></canvas>5 I- q! _$ Z+ g" J1 [
<script>0 m; P% m1 q. N) g4 N% B
var video=document.getElementById('video');' z+ G" x: k* D
var canvas=document.getElementById('canvas');1 N5 s j1 X2 e3 O
var canvas2=document.getElementById('canvas2');
" V& C' D( o) X$ x' s9 b! r
var context=canvas.getContext('2d');- \0 D% P) v1 r1 y; A$ T
var context2=canvas2.getContext('2d');) z0 Q- W" u4 f: R+ G
function draw(){
* K2 O" V$ @1 R. E6 P+ B
context.drawImage(video,0,0,400,400);6 G. g. |* ~& b! b& q- U
ws.send(canvas.toDataURL('image/jpeg',0.8));
" R1 R' e- N0 V* {% b
setTimeout(draw,800);
% }' }0 H) r- }3 a$ L( M
}
- [ s' t o7 y) Q
& }$ p0 u$ O) p+ S( \
//客户端跟服务端通讯9 h" I S/ O1 X; Y
if (window.MozWebSocket)( K8 P1 h3 t( Z4 f( ]% Z
{& w' g! X% w0 _
ws = new MozWebSocket("ws://182.61.42.187:9501");
8 h9 `% g8 g# x* `% u, Y1 Y- d j
} else
5 x6 L8 V& d# D, r( l! ~8 I: q ~, Y
{
' u. `' L' F1 G( z. k8 {
ws = new WebSocket("ws://182.61.42.187:9501");6 l9 L8 p6 G9 s D5 S
}5 ^9 J2 j6 z- R$ ]
1 \, b: |! t0 D2 T
ws.onopen=function(event){: {" D2 j5 j- ^' c% g* F
alert('连接成功');
- q: D/ g* K2 T$ V9 ]
ws.binaryType = 'arraybuffer';0 p) ]9 Y7 E" g9 P& ]
draw();$ W. c9 i4 D5 |2 x7 V
}
. P/ C0 H( ^7 }# v/ p; x4 g
ws.onmessage=function(event){( U# M" i$ |: t% g% g$ }9 t
//alert(event.data);2 @7 A, F; K6 |1 ` I( D
//ws.send(event.data+"client");5 U5 f; Z4 D7 j. h' ^1 z' c
qrCodeImg = new Image();: x* K* F0 j* w# q7 B3 j
qrCodeImg.src = event.data;
# n4 Q: Y6 A; T4 ?" R) f
context2.drawImage(qrCodeImg, 0, 0, 400, 400);; t7 a9 J% F+ `
2 g0 g0 l1 j2 i/ q
}
" ]2 z. S0 ?: C. M' R/ k
ws.onclose=function(event){2 ^0 f/ x( E& t& W" `+ c
alert('close');
( a! R# c% C5 e' ~
}
/ Q$ N# R4 X% s: {1 O! k# x
ws.onerror=function(event){$ @+ e6 J( F6 V, u" ~) V
alert('error');
4 ?7 A; p e5 s6 m% p `9 p/ U
}
4 J F6 e/ h5 _# N: V0 o1 J
//video，标签模拟视频
, d4 {" Z" T# P: b
1 ^. w8 h+ j! G. ]4 k2 y
</script>
* y' Y2 O1 W5 _& e8 O& X6 L; y) G& A
</body>
0 }# ?% l+ o7 W8 @! I- w3 t
</html>
8 T) R" V3 o1 Y! j
5 m% D, k0 y6 h- `- T/ w; G8 [

复制代码

客户端：

<html>
% y4 {* A) X' S6 I+ C5 Q& E! }" _
<head>
6 Z, k& b0 u/ \8 z$ F
<meta http-equiv="content-type" content="text/html; charset=utf-8">+ T! F! l- Z7 M0 g3 @
<title>客户端直播页面</title>
! t# n( {7 S. ~/ ?- o/ b
</head>
* ]1 T. _# h6 s9 |( X; D
<body>& T+ f" @, e+ N1 o/ G
<img id="receiver" style="width:720px;height:480px">
. v( p, a3 P% D, q
- f1 D0 F7 p2 [# y# o! b. [
<script type="text/javascript" charset="utf-8">
* Y2 M( v$ l) b9 [1 z# |. f+ R& V: Z4 B
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
; |7 Y" |) i8 g8 C2 H( e
var image = document.getElementById('receiver');, G+ k: ]' c5 l* i
receiver_socket.onmessage = function(data) {
( ~5 P+ Z x' k% ^* D
console.log(data.data);6 W5 y5 R& _+ }0 z( X
image.src = data.data;
, ?9 p* a C/ L9 a) @$ _
}
}. j! Q- s( W; V2 e0 |
</script>
7 }) Y& f0 @2 A# K, C" V p
</body>
; ?' {! p# h) Q. e" T; |5 Z0 d
</html>, c1 t, Z! _2 N8 a
; y# v- j7 L9 J2 j- C' n

复制代码

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

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

浏览过的版块

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

浏览过的版块

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