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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);$ w1 u7 \5 m y, V# N- ]! e% [
$client=array();
* z6 v2 C6 n8 J8 {
$serv->on("open",function($serv,$req)use($client){
- ^6 g I) e- n x! g, H: \
//echo 'connect'.$req->fd;( d& b3 }2 }& d1 u4 X
$client[]=$req;
' I* q# i# M/ T# m$ n" U& V
//var_dump($client);( @2 J# u* }4 w8 C' \4 ?
$serv->push($req->fd,'aa');5 P) J( Z/ d2 b
});6 l5 {8 D+ v# m8 F) Q5 j0 p
# M% K ?1 B) C% B; T4 Y+ P
$serv->on("message",function($serv,$frame)use ($client){4 o: w4 t+ p5 Z* q! q6 z
/*var_dump($frame->data);6 I+ g, Q" l1 c8 C* J
foreach($client as $key =>$val){+ x6 c7 y7 V2 Q0 `+ } u1 z l
$serv->push($val->fd,'aa');
+ o. R6 Z8 I, m2 D0 w% B# ?
}*/1 ~$ ~' u% o/ A( B, h; |
$client=$serv->connection_list();( |" k! z `6 H8 E: }8 e4 B7 D
var_dump($client);
* M- [7 i6 D' J; N
foreach($client as $key =>$val){
& u2 Z5 o5 Q; X5 Y
if($val!=$frame->fd){
6 {, D0 Z9 o! c: ^& m2 o1 T
$serv->push($val,$frame->data);- Y ]" \( z0 O2 s2 {
}
3 @! B5 B; A+ E$ G/ ]0 n
}4 {/ z$ Y8 N/ D2 z" z& Y" M; S
7 p9 Y8 z1 Z# u! _5 R& L) Q. P
});, O( W6 R+ H* N- _+ ]
- W8 H5 Q- H p; V
$serv->on("close",function($serv,$fd){% _. t3 h% @* g' _6 V% F
echo 'close';
' t/ F1 h* {) X% [0 j8 A8 r
});
- Y1 Z3 T \$ T2 a1 l# E
# I6 D# Y; W6 r, Z
$serv->start();
5 R v; U4 V0 C
8 C0 G. j' F3 E0 v: ]4 u

复制代码

主播客户端

<!doctype html>, v/ ]* p7 {: L! f6 w6 O
<html>+ `+ N0 h- j' t# Y* M
<head>' e- o! M+ A" r4 e' [- u
<meta charset="utf-8">; @8 E7 y( W. g- M. u7 O3 }5 P
% J' X; b9 [) w t! o: U5 C
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5 N, c) H& G% @
<title>404</title>7 O/ h; R; Q5 _9 D
<style>7 F2 E/ l/ x9 E4 Z+ y, ?* a
body{. B+ Z% [0 t+ K4 i. {
background-color:#444;
8 H* Z; _1 }6 _8 }5 z' U+ O
font-size:14px;8 \. e0 D9 o3 [. h
}7 V* v J! |: c( Q+ a/ D
h3{+ r- x& g% O3 G" y( }
font-size:60px;
9 B J1 R N0 d0 T3 h8 Q, X
color:#eee;+ _* ]9 F) k8 @7 t3 i9 b
text-align:center;
3 h, _1 s J/ w3 o* j2 d/ F
padding-top:30px;
+ w. s3 \7 c, Y% e0 P" s9 E+ m
font-weight:normal;
% u' p% H1 ^ g! _; ^) G" r
}
+ W) v% |$ e7 V- o3 L" g: B( N
</style>
$ z' k" u1 B% s7 F
</head>1 Z1 ]8 n. G, E) U6 K' q
% K% Y! R" ^# O8 ?: z! u
<body>) x+ n" d; y% E( }1 i; ~
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
8 w8 X+ Q2 B$ N
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>9 a- \5 U7 r, L
<canvas width="400" id="canvas2" height="400" ></canvas>' i5 k5 @, c5 D& v* }" s, Q+ ?' E. C
<script>
# K& ^9 c) V6 \6 B* y! D$ F: |
var video=document.getElementById('video');8 @5 L4 C5 F* H
var canvas=document.getElementById('canvas');; E6 u2 g' o3 W1 l0 ~ P& B
var canvas2=document.getElementById('canvas2');
& s; x( B9 Z2 I! e5 ]' }5 V1 e
var context=canvas.getContext('2d');1 k) A# ]4 a7 c: _
var context2=canvas2.getContext('2d');6 G7 B! C5 }5 k ~- k6 Q- K
function draw(){
1 S9 E" {* l" r2 K$ z7 R
context.drawImage(video,0,0,400,400);! e! D- g, I; B& ]) z/ J2 W& f
ws.send(canvas.toDataURL('image/jpeg',0.8));; m1 j6 i4 I/ d; B: s% k
setTimeout(draw,800);5 S5 E6 ]" Z W4 ?& n2 u
}
5 R2 t6 G. ? z2 |1 \
! ~! Z' [% n5 J: _
//客户端跟服务端通讯3 t) ~3 D9 D: u4 m z
if (window.MozWebSocket)6 ^' q" R4 |5 |
{
3 M" `: `7 @0 D5 y3 X9 h" t
ws = new MozWebSocket("ws://182.61.42.187:9501");7 K# \, R* b4 C- f
} else) n; o; @/ B- c9 P# e5 h5 e
{) E7 r) n% I* g
ws = new WebSocket("ws://182.61.42.187:9501");# M. i+ l1 \/ @
}& H5 c8 G8 v8 L0 o1 f9 y
7 J" t1 U, }8 ^% ~( l7 y0 R
ws.onopen=function(event){
, @3 z# ^' c+ ~& y7 }3 v' f' P
alert('连接成功');. u* [3 ?9 {6 o; _( ^- _
ws.binaryType = 'arraybuffer';$ f3 R# _* i8 |+ F
draw();5 K t8 o/ h! K* K; U; u
}* z* k; U2 O, A; P: Y+ V( M
ws.onmessage=function(event){
! [% q2 m5 H$ v* v* a
//alert(event.data); O. k& f* X: ?! W" d) D% r! C
//ws.send(event.data+"client");8 _6 ~; b( u. G- \, p- a
qrCodeImg = new Image();
3 H+ l2 j3 ]( c8 M! O
qrCodeImg.src = event.data;
, g9 c# y/ ~9 X
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
+ a, r i, W. R
2 g( i; o& C' ?9 g
}# ^: g% [ z3 a
ws.onclose=function(event){
}; P/ Y8 g* M
alert('close');
: m' B' H. M* Z* W2 R% o2 D, P+ P
}: ~8 W5 ~' Y+ q
ws.onerror=function(event){1 p% }; I! }+ |3 c9 d
alert('error');% k# w, r/ O3 k8 Q
}
6 R+ k6 u. d; Q4 d! |% ?/ W# m
//video，标签模拟视频
6 w+ n8 u+ `8 V y
9 L: c& {9 V2 B6 @+ t% _( t
</script>
0 ]" K R+ o9 M7 w( y. Z0 U
</body>
. t( z8 ~8 i+ A" S4 M, n$ t( a
</html>' h6 e* L( E+ K3 I
! x6 X& M7 ?- n2 [6 x! c

复制代码

客户端：

<html>& l: i4 i- K1 F$ y M
<head>5 H9 g" U( v# H$ B* v/ I
<meta http-equiv="content-type" content="text/html; charset=utf-8">% a/ w6 g# w" M& @2 b" }
<title>客户端直播页面</title>
( B$ h4 E( H% X' _ y" v2 x
</head>
$ G* C( w. K5 c4 S! G# t
<body>* ]: G: q: ^* N# w6 d3 O D
<img id="receiver" style="width:720px;height:480px">
, Z! P) j& c2 i. o3 R+ ?) f
% ]5 f# o0 S- k$ a* K& _8 J( W
<script type="text/javascript" charset="utf-8">9 J) U3 L1 K! W
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");- k5 _+ k- V) E8 Z
var image = document.getElementById('receiver');
; Y; |& {& a) {, } J# u4 w* E
receiver_socket.onmessage = function(data) {* `+ Y# Q' h- @; N
console.log(data.data);2 {) H% U7 F( b u/ w
image.src = data.data;
$ X) }4 p- i8 R; ~1 m0 r2 Y/ Y! T9 P
}
7 _) c6 ^/ Z1 U0 H
</script> N9 }2 l4 G3 k8 z
</body>, Z; t! t% `" j' C$ G u6 c! R
</html>! S6 t) o0 M2 o/ K/ ~4 ^1 n8 M
- v- q" A4 }% ]! V

复制代码

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

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

浏览过的版块

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

浏览过的版块

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