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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);3 L; U; s Z+ p0 D% h/ Y. Y
$client=array();
$serv->on("open",function($serv,$req)use($client){
. O" N6 h: I# D8 M! c* C
//echo 'connect'.$req->fd;
5 L) B9 @' U8 ]8 ^9 m8 M* o
$client[]=$req;
9 m4 y/ }0 L( W+ o2 n
//var_dump($client);. J# h. f" G. F/ M. c. V
$serv->push($req->fd,'aa');
$ E# f+ r4 ^" Q) I
});
& E& g9 M: Y3 V
1 i( ]; j8 h* Z$ }
$serv->on("message",function($serv,$frame)use ($client){" A& ^ j& x! C2 z: I
/*var_dump($frame->data);
: g' G5 x Q8 R+ d0 P9 C4 [
foreach($client as $key =>$val){
2 s6 c; l! U! X
$serv->push($val->fd,'aa');
6 d" o3 m$ s4 {" ~
}*/
2 I/ J- p3 y" d3 u' r. t
$client=$serv->connection_list();! \0 f7 Z. g8 K5 M
var_dump($client);5 u! l V3 B' f) c
foreach($client as $key =>$val){! x' x. e( s p# n& N3 F4 a& n
if($val!=$frame->fd){- _* }' P" l3 z" L4 A" k# R
$serv->push($val,$frame->data);- M8 s4 N& U( B" S! I; h
}/ G2 g8 W! U# `- T
}4 q2 E, A7 \8 H7 X( ~
# S2 r# m4 p+ n: K( Q' u. Q# ~- S
});, `1 j& k7 \( a N
2 \0 r( c/ H; x5 M. _
$serv->on("close",function($serv,$fd){
# Y2 S3 g) S* k" k' S* X
echo 'close';4 ]2 \8 r/ }4 v- e' A* A3 m3 w* `% U
});
2 P+ \) R) J; N5 G; z: `" S
1 a; }1 A) D1 u* b1 ]+ @# l
$serv->start();
1 S; L; W8 f, D( X8 v0 y
* y4 k4 k+ ] ~0 L( T' U2 u

复制代码

主播客户端

<!doctype html>
5 ^ V, D5 @7 y7 D$ T5 n
<html>+ k: v; w& g0 [7 t' r5 Z) y
<head>$ P8 [- d" y* Z
<meta charset="utf-8">
+ o9 J" ^4 W$ M) o6 k6 c- ^
$ N# u4 Y7 ~2 T n x* ]7 E
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
# ~) I+ ]! G( k- \7 U7 z
<title>404</title>
3 N _9 \3 v6 s/ d- ]! R
<style>6 m) o0 h& K) G% e. Z+ Y$ V
body{
background-color:#444;
/ @4 c2 z% C( b7 T$ j7 _
font-size:14px;
. D" [* L$ e) l* @, b" j% f x
}+ R6 P! c1 g6 w0 e
h3{1 Z& ^+ Q% p$ K! y' K! x1 l7 e3 W& E( R
font-size:60px;9 z/ m W, h) q1 R% p
color:#eee;
2 v1 S0 p) w; j5 }
text-align:center;: r7 E7 |0 U7 L/ B
padding-top:30px;: A% q8 m$ m. {# k
font-weight:normal;: m' n& P& k! k' B/ s8 Y: `
}# X, x; t, {9 f! K
</style>
/ K$ x- d( i7 A+ B* V
</head>
, f% C1 ^8 F$ B$ [) I
3 r$ I- g* r/ @
<body>
g% x# ~4 C! C+ t6 t5 i
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
& V0 I+ g3 e( R+ H& o
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>& c3 f& @8 ^0 o; I; H3 J
<canvas width="400" id="canvas2" height="400" ></canvas>
3 o1 I1 O2 a$ E- ^: g+ I2 {
<script>
3 y/ n% w" z# M! B' N
var video=document.getElementById('video');
; A6 u8 y( |5 p! T8 A/ u
var canvas=document.getElementById('canvas');
- b* U1 q0 o+ }7 \$ ]
var canvas2=document.getElementById('canvas2');! ?6 t9 O, T/ ]5 y! Q# g
var context=canvas.getContext('2d');
* f' r) Y" `4 I
var context2=canvas2.getContext('2d');
3 ]+ ?/ F* }' l% W
function draw(){4 i* w* ]( [2 ]+ |
context.drawImage(video,0,0,400,400);2 j3 _0 T9 ~! Q
ws.send(canvas.toDataURL('image/jpeg',0.8));
' Z7 O. e* l4 z2 |
setTimeout(draw,800);. n& s3 F# r8 z8 Z, ~4 D$ H$ E
}8 j7 v. A% d8 J u
6 ^ `9 }' ?, p0 \
//客户端跟服务端通讯
6 ]: S0 }0 g8 S9 u
if (window.MozWebSocket)
5 O& c9 E+ K# P
{
6 [! x# n2 E' p
ws = new MozWebSocket("ws://182.61.42.187:9501");: ~0 V! r1 Z0 t- T2 n* E
} else' s# K; M9 v' i% K( S
{
* o; P) G! x0 k7 P+ K- M
ws = new WebSocket("ws://182.61.42.187:9501");
0 N# L5 C* t3 D ~) I+ L5 H
}/ p; I8 `2 H7 L" X6 a P% b
d% @% c* s9 e: W/ Y( v
ws.onopen=function(event){4 x6 n0 ~" @7 t0 K" x& M# J% U' \, [
alert('连接成功');
! i( L5 L( y( b6 t1 h" y
ws.binaryType = 'arraybuffer';
$ I+ f; H3 u4 M
draw();( `: k* m" h6 [$ v8 g& o: T: I
}
; M) I% {' w( { s( X& {
ws.onmessage=function(event){6 ~. X. B2 F+ }
//alert(event.data);
( `8 D( G$ i4 R3 w" n$ z7 I; h
//ws.send(event.data+"client");1 F4 u; p; c0 Z
qrCodeImg = new Image();
t1 |) C* w/ {! \
qrCodeImg.src = event.data;
. R/ W# s+ @3 @* g3 N& Y {" S, S
context2.drawImage(qrCodeImg, 0, 0, 400, 400);' N/ a; z" \4 ], R. G) y; ^0 }
g0 S/ P0 H9 }# T) e- l
}
- T: Y- @; i3 h7 f+ `
ws.onclose=function(event){" c; g. a, x! h3 ]+ |5 S
alert('close');
( C8 a2 I+ A/ e* k! i0 S
}
1 q+ O# x+ h1 e4 d) \7 I* W+ j2 ^2 l
ws.onerror=function(event){& _5 t5 X5 O+ F
alert('error');
% ^/ P4 c$ a; r& T: u
}; [ P/ Y" m2 L3 Q$ F8 f
//video，标签模拟视频" F: A' Q# e8 [9 d" n$ B
" l x& k7 S7 u$ l
</script>
1 s e% V1 H/ ^' Q& \& \# I) y" E
</body>
5 X" h/ s# d- x* N1 v
</html>& Z0 i1 h- O! _& b3 y
0 Z# z C8 j- G1 A& @0 U2 e

复制代码

客户端：

<html>
- Z& f3 d1 c% O
<head>6 l% y5 r. v) V6 E1 f! n; m
<meta http-equiv="content-type" content="text/html; charset=utf-8">
. r# j( ^# v" s( G. T# C( S% D
<title>客户端直播页面</title>" b# ]$ F& I5 t3 n6 e$ \) F
</head>3 b" g; f' u3 C" W3 F* q
<body>
1 I8 d, g6 t4 j5 c9 g1 V
<img id="receiver" style="width:720px;height:480px">
" e/ a- ]+ ]; j' E+ s5 t. l
# O& I6 I% R* _1 `( Y
<script type="text/javascript" charset="utf-8">( w& h+ k2 t" W7 y/ t" x
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
- U. r7 g: O5 O* B7 K$ z( [7 K
var image = document.getElementById('receiver');' T: E3 G' R" u* H5 l: ]
receiver_socket.onmessage = function(data) {
' o" b) k5 \) }! G7 m7 w# u
console.log(data.data);
1 c% w5 l! X& n* C2 i
image.src = data.data;$ X" k l1 p/ V* ^ y# r
}+ z7 x5 t8 m S7 I; w; m* w% C
</script>9 V* h/ v# ~% p6 N# G( j O
</body>9 j, k0 l3 D2 l& Y3 ?
</html>
# ^1 N$ a, p D5 J, n+ K9 m0 P
' w$ I$ G" S! U: e

复制代码

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

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

浏览过的版块

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

浏览过的版块

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