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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);( W' @3 V' }" U- w* L, N4 X% t
$client=array();
! i8 o- D& D+ D$ v# F4 v8 [& T0 }
$serv->on("open",function($serv,$req)use($client){' M: A( F! u) G- t7 i' z
//echo 'connect'.$req->fd;4 }8 \/ a0 ` c K2 q* s" B: [: ^
$client[]=$req;
' r, V0 u2 Y: M2 N0 v
//var_dump($client);
+ P8 O; i) h) Y; j* L% @
$serv->push($req->fd,'aa');0 Z2 {% V* E$ H5 S4 m
});
/ J) U; v7 K4 m2 A- U) }& N
5 O' u8 B1 S$ b8 m5 F6 u2 L
$serv->on("message",function($serv,$frame)use ($client){3 U8 b) n& T1 H$ N1 X& g: j6 E
/*var_dump($frame->data);
$ P% n; `3 W1 _; q; C
foreach($client as $key =>$val){1 Q- h* e4 [+ z. t8 ]4 T
$serv->push($val->fd,'aa');
9 B* I/ \( d" `( M, G
}*/( ?+ q7 c) u! j7 g' A
$client=$serv->connection_list();
; d4 W8 _$ M! S- b
var_dump($client);
6 ~) C, Z, k! l Q. O6 T/ P+ s7 J
foreach($client as $key =>$val){
7 x! R% |" Z7 ~! W- D$ D/ V
if($val!=$frame->fd){
# S' m: t* e6 O* W( T( c
$serv->push($val,$frame->data);
, }6 o. `8 D" t9 a9 N& n! Y
}
* V4 H% W5 l! M; I* V. \) D3 ]
}1 g4 z& @6 i! Y7 o; O5 i
5 {+ N* T S+ W' w% g# [
});4 z: O" @' U' V. j0 c
+ S" V& D' n M- e) ?
$serv->on("close",function($serv,$fd){% U3 A$ Y h; |( _6 F+ d
echo 'close'; L! F$ i( d" i
}); y1 s' M5 q9 ~; j1 d
6 z2 ]9 ?( C/ e- N0 K4 |1 e0 i4 s. |
$serv->start();
$ w/ P1 _8 G( P, \9 L2 T
$ P" |+ b: y) H

复制代码

主播客户端

<!doctype html>1 n; ~* Y6 w$ y {/ d' R, H0 w j
<html>) A+ q% `8 J p6 v' t. e+ y
<head>1 b0 M, s+ a5 R p2 S
<meta charset="utf-8">9 P1 i7 I: G. r$ M* G1 t) c
1 s" {7 j* U4 J5 \
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">! d2 v1 r- J/ ~2 w
<title>404</title>7 O% s- N& p; J0 \! i" h+ d
<style>
* g" N# Q* R) J6 w- v
body{! d! ]8 v* b; a) K7 x8 Q
background-color:#444;/ f, v* f& e* w- _' ]/ u5 h# v
font-size:14px;3 y5 m9 Y5 O7 x* e
}
# P" J/ U/ z& \0 J# E2 J
h3{
& m# y2 Y6 z | R2 Q" _3 Z
font-size:60px;. j6 W, r; ^; J+ i9 F! m3 j
color:#eee;. f- }* e* Q; i% g8 m9 A* F
text-align:center;
$ e3 g$ J: w: h% z; o
padding-top:30px;/ r2 _4 F( Z$ n' \5 x ]
font-weight:normal;9 L" i% e8 W1 i9 s; p
}
7 Z. w+ O+ G# t6 d2 g1 G$ s% ]
</style>
% z* n2 \( R1 v
</head>
; |' h' r; L9 p% X/ o0 O" ]
! i1 W8 }- ~. U7 ~4 f* e q( p
<body>
" Z8 i4 J9 j2 I w
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
1 o6 l7 s" U) Q, `: m
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
; D: x. ^5 N' R% O/ |. m
<canvas width="400" id="canvas2" height="400" ></canvas>% L3 Q* w4 L% O, s( Q/ _1 D3 T
<script>
* O! l& V, A3 \' W! U# I1 `$ }! u
var video=document.getElementById('video');
4 }7 P6 W4 d% |1 O
var canvas=document.getElementById('canvas');* T0 S i) X2 f% Y; C
var canvas2=document.getElementById('canvas2');. s# V( h; U, K( x- U
var context=canvas.getContext('2d');- ]: L/ ~4 Z4 k! x/ M% u, L5 |; @
var context2=canvas2.getContext('2d');* D o0 s: `* V
function draw(){
1 f( V; N9 V( J- H. U
context.drawImage(video,0,0,400,400);
6 z0 {# g o* c$ o. W
ws.send(canvas.toDataURL('image/jpeg',0.8));
0 O+ c" C: ^& O+ U4 o7 M* O' v
setTimeout(draw,800);
. F- h( | B4 K" B) S! a+ @
}
( ^0 Y8 x% f. d" q! z" f6 _
. z6 j+ h' ]) V$ X0 f3 a6 U/ H
//客户端跟服务端通讯
! `2 ^7 n2 e: i5 r: \
if (window.MozWebSocket)- x: D1 N8 m9 Q, o* Q6 P
{
, \7 s g( m* M9 o
ws = new MozWebSocket("ws://182.61.42.187:9501");
$ l. Y! b& u( X" @1 r! \# g
} else, _! J3 v/ U( w3 w, C" y5 I% D) }7 ~
{
1 p, I/ D5 r L' a
ws = new WebSocket("ws://182.61.42.187:9501");4 [ @" _: X' X" T( j. M
}
9 r7 l0 c3 n8 {/ M, i7 G( H& b
! `. G. X* \* v- Q
ws.onopen=function(event){$ {9 I7 h0 S2 x- b
alert('连接成功');
% O* l5 D+ c6 I0 h8 _
ws.binaryType = 'arraybuffer';
: H! X$ L5 w7 t" u& r7 p7 J
draw();- G0 l x" n' o7 U
}+ u( y, U1 [2 u; \
ws.onmessage=function(event){) A3 G+ H- c6 ]. Y I
//alert(event.data);
! |' c {* g: K& R
//ws.send(event.data+"client");
% O* q2 a& {3 M4 z2 L8 N
qrCodeImg = new Image();! L$ a) f+ r" K e/ H
qrCodeImg.src = event.data;+ M/ p1 D; M5 E- @/ _ D$ D3 ~6 I
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
% l- L# H6 a" l$ ~
- T- B$ ]( t, }" u, m/ t$ L4 o. F8 ^
}
: @7 ~4 A9 Q' p. r$ m: o n* u
ws.onclose=function(event){! D$ M9 }* l. R
alert('close');
, J5 J# z' m. o- s# N$ e: Z
}
! M0 a W: D) N: \& n% H- [* ?
ws.onerror=function(event){$ }0 D6 t6 s& v5 ~# R
alert('error');4 {7 Q) i3 X4 j" ]; a
}
5 T9 o* {. J. }" t# ^
//video，标签模拟视频7 Y7 O2 f9 |; R
( v$ i! t+ f% o# T3 G0 e5 m
</script>2 a4 c5 d, w, m6 g! e
</body>
" p/ a$ K$ M7 C6 Y6 F* D+ |
</html>
: Q2 o6 Q0 c( l: z# q* q% l
' S6 W# Z/ X/ S5 K. k' d" t

复制代码

客户端：

<html>
5 {& w3 G+ n$ @
<head>
0 J5 F/ T% W. s7 L9 U7 u8 a
<meta http-equiv="content-type" content="text/html; charset=utf-8">9 {% n! E; @. W1 V+ [3 g' F$ d
<title>客户端直播页面</title>
, k ~- G0 k& y7 O1 y' i1 U5 X
</head>3 ?4 j8 ?& ]% T0 |
<body>- Y, w- @; B1 y& d4 g
<img id="receiver" style="width:720px;height:480px">; w, j* K8 K4 R2 m$ S% ~
. L! a' q0 ^ H) L. _8 [
<script type="text/javascript" charset="utf-8">! y& Q, h$ }& z( W8 \# O
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
4 L ^, f& }6 ]! q( o, O+ ~
var image = document.getElementById('receiver');
! y4 [2 q: }3 F x4 q- f5 E
receiver_socket.onmessage = function(data) {- U% p5 h( F) ?( N! V. w
console.log(data.data);
( ~/ P& q- o6 J z" B ?3 c; I5 Z
image.src = data.data;
r+ z( a2 B- J5 t# j
}# L. g8 D- ^) L
</script>; r, T6 ^8 D$ _- ]2 P' x+ C
</body>" D5 l% F0 a: k* A, @ G
</html>! A- s: _* f- v7 L5 B' d% i
: }1 ~7 V2 p' w8 P* V

复制代码

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

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

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