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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
6 K! L, b3 c: w: c" x0 S5 y
$client=array();7 B9 W! F: A2 w* z M2 k9 {+ X
$serv->on("open",function($serv,$req)use($client){
8 ^/ T% C) o8 L: U; M7 M+ h
//echo 'connect'.$req->fd;
2 O6 v6 Q% v/ ?; e$ y1 p6 o6 G( W- I
$client[]=$req;* }- j: x7 r- u: ?' O. j+ u
//var_dump($client);( g8 S$ c [5 |& I/ Z3 m; S6 c
$serv->push($req->fd,'aa');% v' U' k1 O2 a
});9 F5 M' w$ g% S& |
@" F2 F2 V# {6 S" W+ j
$serv->on("message",function($serv,$frame)use ($client){
" T6 a* b2 X. U# z* G+ t' p& z
/*var_dump($frame->data);
0 c+ a* G3 B) B' A" s B+ S
foreach($client as $key =>$val){
" y5 u: \* G5 k" f
$serv->push($val->fd,'aa');4 @- R3 h6 ?, v( W
}*/; h9 Z1 ]) J' Y7 c
$client=$serv->connection_list();
# i! a5 E9 O( X7 F: c: g/ h. @
var_dump($client);( M2 o, O% y) J% e
foreach($client as $key =>$val){1 ]& h% ]& o* N* J& o4 ~
if($val!=$frame->fd){
6 x" B1 d& F/ Y9 q5 p* |
$serv->push($val,$frame->data);" D8 e2 y2 H# q7 q! I5 R& X( A* X4 u
}
* e- T- r& _$ W1 _
}
5 n( W& q& L, H- Y6 V" ]3 C/ p
7 X. G0 h6 d1 v2 d
});0 o J* j4 n" {7 v3 Q. n
# s9 C& _6 G4 x
$serv->on("close",function($serv,$fd){
' X( y8 m2 i! P2 \' ]* D
echo 'close';3 y" T" a' X6 {! h
});
' K; B: S0 a$ C" i9 o
$ y Z6 S! r2 P( _
$serv->start();. g% K/ C( h6 J9 d7 U( |6 h
% x+ R5 f. x+ ]7 E0 [3 T$ `- x

复制代码

主播客户端

<!doctype html># L0 P5 E5 K& r/ h4 P ]
<html>
! ^. k3 p0 Z+ u4 F6 m
<head>% }8 c/ y2 f2 N) p, U
<meta charset="utf-8">; R0 ]2 r) j$ A7 W) P
" v. Y/ w, A4 v0 r! B+ W5 v
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1 Y+ U8 Q h8 v% ?9 |
<title>404</title>
3 e2 a9 ~. r4 t: \& e0 V
<style>
% }9 ?2 j z2 w5 k8 A1 @
body{
9 p& m! {% d* Y0 l% z) [
background-color:#444;
2 j" e7 S! ^& l6 G7 E. i. Q' l
font-size:14px; f8 [6 N; M9 ^; n
}
; @- F8 P/ j1 b9 i' J% d5 g( a
h3{9 _' |+ h# f% x4 R2 |3 s
font-size:60px;% ?, F" t& B% u$ l$ { |* y
color:#eee;1 G T, A0 C6 J" t
text-align:center;
8 z2 _0 z- _0 u. m/ p; b
padding-top:30px;
9 @1 t# t6 B+ q6 P; s
font-weight:normal;
7 C1 A5 A2 o# Z& D; Z {- [) U
}
3 y- x8 j2 ^9 s$ T a$ ~
</style>3 {* G1 l1 K% l
</head>
6 o% Y+ }# d# Y* V' x# L
; m h9 a& S' G$ ?
<body>. z+ I0 D v3 f' D% n: w6 }
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
" r1 ?/ t# `$ i% s
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
+ G# L+ D' P. B
<canvas width="400" id="canvas2" height="400" ></canvas>
5 ?/ F g$ P$ B! [
<script>! [0 n5 z5 q# V3 s: J9 w
var video=document.getElementById('video');
( W7 @$ J! m5 B4 f
var canvas=document.getElementById('canvas');
, Y9 |& p, M5 z
var canvas2=document.getElementById('canvas2');
+ f( b: A0 C7 y
var context=canvas.getContext('2d');# f! @$ [: Q$ k/ C5 q- j
var context2=canvas2.getContext('2d');, p$ ] C7 b5 `$ q9 @/ J
function draw(){3 c/ J- @+ d/ {- ^$ R0 S/ d* |
context.drawImage(video,0,0,400,400);
: D5 l$ V4 [, n! _2 p2 X! m7 t- n
ws.send(canvas.toDataURL('image/jpeg',0.8));
3 X4 o9 n' O) c+ ^& `- W
setTimeout(draw,800);. F: p3 ]4 u9 C, T1 S. Y
}
' ^8 l2 c$ w/ a, v! R% H# ]
8 [# N1 k. N1 k& @
//客户端跟服务端通讯
* L, n+ ]- O/ i5 `! u. B* X
if (window.MozWebSocket)
- d( s: h: K* R+ u1 B F+ V
{
/ x, W" q/ r# X/ O& o8 f" R. z
ws = new MozWebSocket("ws://182.61.42.187:9501");. m* }( V# G$ u' K" P- |4 e
} else
8 g* F4 H4 c0 `( x9 X" n9 U7 d% F
{
3 X& R2 B5 U8 B$ l* B9 e
ws = new WebSocket("ws://182.61.42.187:9501");( ~% Z' d9 ^! Q0 a9 r+ m
}5 r- S! [% Q9 Y5 F/ [4 I6 @
+ [ c4 m" x( y- H1 p2 K% h7 f
ws.onopen=function(event){( `% }- I1 b# G6 W5 n: z9 W+ a
alert('连接成功');. H$ u# J3 w. Z/ M( H
ws.binaryType = 'arraybuffer';, _0 \, Y$ k( @/ v$ S
draw();; M( E% N" j- G$ M5 P6 |, H4 K3 L+ e* v
}
( [% M1 \4 ]2 B/ b. Y
ws.onmessage=function(event){
- A5 j/ A+ B6 G7 y! c+ x3 `
//alert(event.data);. u2 _( ^/ c- Y
//ws.send(event.data+"client");. F8 t# K, k# I$ s8 k2 C
qrCodeImg = new Image();
1 w' ]4 p1 f5 B6 z F( K, S
qrCodeImg.src = event.data;) M+ E) R. L; ~; S+ g3 x& N0 a
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
) J2 ?: Q$ U a0 ?; `% c9 D
; B9 m) r* T7 {" _. X* V
}
2 |6 W+ Y. h r/ ~6 A' _
ws.onclose=function(event){) J4 j2 G7 o t3 e+ ], H# E- _* K
alert('close');6 i0 R6 I! O1 {2 J$ ~% M1 @
}
0 G6 |( {# k3 S% G& N# A. q
ws.onerror=function(event){
# X! J1 B# \) x2 ^! J
alert('error');
$ X( P4 `# f( a7 |/ t1 v1 v
}
4 H6 m- R' \# p* K0 m- `
//video，标签模拟视频
# {. c' d. q; r, J
0 A5 y/ v0 n! \. @
</script>
/ a( i, T3 W% g
</body>' j$ L) C+ {) o0 z5 C; v
</html> H% @* E; H8 o, U; k
r: `+ K+ l4 G. q

复制代码

客户端：

<html>; g8 S; r- I4 ^2 q) a: `
<head>! s) }( n/ A5 _1 Y$ c2 r& f
<meta http-equiv="content-type" content="text/html; charset=utf-8">/ k T/ T7 A2 _3 S
<title>客户端直播页面</title>6 M" h6 O$ p0 N: C5 ]+ l
</head>7 N# r. X2 l: i$ p8 x) Y
<body># d4 g# K' e/ o
<img id="receiver" style="width:720px;height:480px">
) @( X" m- l3 z" m/ \6 V
! ]9 f9 d! u4 H2 m$ C8 d
<script type="text/javascript" charset="utf-8">
9 o9 a6 B8 X' f. h; Y. x
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");; s& d! r. V' n
var image = document.getElementById('receiver');
8 p0 x! W" _. N
receiver_socket.onmessage = function(data) {
: I' r) @$ e& H7 T- ?) d0 s
console.log(data.data);# c+ d4 m8 h+ C+ l% M/ S! B% _# @
image.src = data.data;
# b% X( B, E, _9 s5 E, H* [
}6 @1 a) k: h. m8 q' R8 l
</script>
( } y& i& G0 [3 i% w
</body>& e _0 F; n, V* j7 I6 k
</html>' x" y& Z1 Q* x6 ?
$ z2 o0 P% L2 v8 q4 h+ e# N

复制代码

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

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

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