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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
7 `6 H9 T# a% y
$client=array();# x& l6 @4 h: w) d4 G \
$serv->on("open",function($serv,$req)use($client){
4 X1 {) V$ q& f7 I }
//echo 'connect'.$req->fd;
6 [9 M6 a/ L1 g. {% V" @
$client[]=$req;) |2 q5 m$ w, f) J5 p
//var_dump($client);
9 z2 O8 r" i6 Z4 N
$serv->push($req->fd,'aa');+ n/ [/ k7 z' j4 F) y F, \# ~
});% d1 K3 I" ~: m" b+ q$ r& x
, j" l) n" y7 b5 b9 E* J% h
$serv->on("message",function($serv,$frame)use ($client){
' A. D/ o U9 n$ K- ?1 g
/*var_dump($frame->data);6 s4 @6 c! v; ~+ _ ^* J
foreach($client as $key =>$val){
9 Q5 I6 C; R, m. }) }2 {
$serv->push($val->fd,'aa');4 D; d* ^, P: Y& u$ _
}*/; J7 Y( Y* M( E/ y0 e; M6 i- `2 D
$client=$serv->connection_list();
" e2 b% z. X7 D. y) \% y% Q
var_dump($client);, d% m6 Z( w+ z9 w3 U; P6 T
foreach($client as $key =>$val){
6 N- l: t! Z: ]% w2 _" k; O0 s
if($val!=$frame->fd){5 F$ ?0 A( s9 Z& v4 O/ Q
$serv->push($val,$frame->data);' ^/ c, N: Z9 g; P
}, R$ R. n9 |& {7 }8 Q
}0 _+ K% M3 z; v
( y T) m* R; I
});8 u3 v# _6 B. t6 d
& a' c6 D& E; U! k) C% e7 U
$serv->on("close",function($serv,$fd){
$ w! U$ _$ |7 z8 d) b/ T
echo 'close';, h* [, R1 O2 ~+ o3 z$ ]5 n
});
7 E6 W2 B1 h8 O( x! d
& G; n) y7 s6 d1 D/ \5 A; g
$serv->start();; F$ y+ R8 G0 K: r8 N
* a7 g' A, M6 T

复制代码

主播客户端

<!doctype html>
2 f* b/ X/ y7 y8 R$ \# R, q& O
<html>
; t# l% g" J F/ C) V$ F, a& u8 E
<head>3 q0 z8 d9 h4 ]: {
<meta charset="utf-8">
3 g8 i; n% _8 w' k
8 G% }7 L% Y* F' W( Z7 y. Y5 C& ~2 z$ m
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
: Q( u7 v& J- ^& M4 C( B
<title>404</title>
4 G! W" X! I, [; q& b
<style>1 I9 t( [2 s+ M& z1 y! f
body{
8 i* ]% e8 D! v) q6 C9 u; l! j
background-color:#444;' t5 ~. @! X C/ i, K& `
font-size:14px;
& C. ^0 e1 e8 ]* v3 k7 p: h
}
8 x) u6 u) r/ v, a
h3{" h, S# g% v8 B, O6 k# X
font-size:60px; b {) S" |& I0 r' q' y( U
color:#eee;# X4 y6 _0 _- ~5 ^
text-align:center;) }0 M- A0 N4 p& a4 L3 Q
padding-top:30px;
9 n* e) B: e6 B# k9 s" A/ h7 p, y
font-weight:normal;
% @4 C1 a% H7 J5 G5 R W+ [
}
! m& \% Z9 ?$ r( Y: l4 Z+ H
</style>1 f* Q# U( G( |
</head>4 W7 }) t i2 H0 M
; @& ^& B/ w% R5 ^% B1 g
<body>
0 t2 ]" x6 Q3 z G' D
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>' J; u% d& u4 H# ^, O
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
! F: p# g& m2 r& J3 S% C
<canvas width="400" id="canvas2" height="400" ></canvas>6 t d3 R& O, |( L- v
<script>% x. A. S/ ]- f- R2 u
var video=document.getElementById('video');3 ^; `# ~5 F/ ~
var canvas=document.getElementById('canvas');
1 f b: T* U( Q& C. E5 l- `. Z
var canvas2=document.getElementById('canvas2');$ n' n! b4 R l J+ L
var context=canvas.getContext('2d');
8 s; K8 x* R* q% s7 V) j
var context2=canvas2.getContext('2d');3 B! b, h3 ]: r, }$ y" `
function draw(){
; \" [& m3 v- u' q
context.drawImage(video,0,0,400,400);' S+ T" D8 F8 V1 i5 f% O$ J3 ~
ws.send(canvas.toDataURL('image/jpeg',0.8));( F' w& Z( Q3 _4 r
setTimeout(draw,800);
- b& S o5 @$ n5 @, x
}
9 v7 l3 X3 H* H
. u% I/ T# E/ v7 K2 D, a v0 N) q& c
//客户端跟服务端通讯! n) `; c. ?* L' c% [* L
if (window.MozWebSocket), r" O+ A& x; m! D
{7 g: i: K. y9 i0 i! l
ws = new MozWebSocket("ws://182.61.42.187:9501");
% b2 G( z% Z1 I; \' f* W3 K* `
} else7 W5 [1 Z% d5 Y
{
% t* M: n6 M' G* R( h1 v& N, W
ws = new WebSocket("ws://182.61.42.187:9501");
: }% S- r- b. t y# }" Z
}8 S+ M d& u0 a- T' W
/ ?- R9 I! r4 @4 U) H% U/ u
ws.onopen=function(event){! |, e2 e# H `- R. _
alert('连接成功');
$ r# k* W/ J# q6 k x4 S
ws.binaryType = 'arraybuffer';
1 `' c# P8 H! s/ A: N/ }# E
draw();
8 E6 V) u+ v$ o2 U
}
, ^* p" K4 v; ]4 }/ H. f# T5 [
ws.onmessage=function(event){
9 O% p8 h8 `3 K; h$ u. C9 Z% a
//alert(event.data);2 l" d, x. X4 e* H
//ws.send(event.data+"client");! a& ~0 L( v% ?3 H, g. }+ _
qrCodeImg = new Image();0 g( @: x4 i& P; m+ v
qrCodeImg.src = event.data;
- l! Z: A9 v& L
context2.drawImage(qrCodeImg, 0, 0, 400, 400);: f( a F! [9 o' B
! g& }5 E& j; Y+ J) [
}1 z( ]; i# m& g3 v
ws.onclose=function(event){) b( t I2 t- n6 d. B- v, u
alert('close');: \# N0 w# t) H4 B
}
# j, h& h8 y8 k5 \" z7 e, n$ E
ws.onerror=function(event){
' a9 ~) |- q3 U' o) o
alert('error');
1 O4 r5 t! I( b, K/ c4 ?
}
/ U9 ?- ?% Q! a! P- I3 e
//video，标签模拟视频 v( J& o7 j" M$ }3 \' n9 E
6 m5 X+ M5 a9 S/ s. ~, @- I
</script>5 \$ p( D! l! V2 C
</body>
1 v- \- R+ s1 h5 k3 `
</html>
" ~* X' E# q' {6 C$ b& g3 L# m# o8 K
6 d" q! x; z$ b( S+ m A6 u

复制代码

客户端：

<html>% h" z7 ^' {" ?0 ^3 g6 Y1 p
<head>
4 i' C! y: l Q! H$ }! e
<meta http-equiv="content-type" content="text/html; charset=utf-8">
- |0 F: D& n, j X1 _- X! X
<title>客户端直播页面</title>" W+ n! ^9 e+ s k4 P
</head>( ~; V# C8 Y- o; ]. I& U% H6 A& l
<body>7 o- W: N4 {$ U: y: i2 G' A
<img id="receiver" style="width:720px;height:480px">
- F4 q% r* T% u% k# Q- x6 z
6 U- V! c) o. N/ `- p6 t. P
<script type="text/javascript" charset="utf-8">. ?. x, x4 G, Q+ {
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
1 a ^* T' i, y" n5 F
var image = document.getElementById('receiver');
% p a8 S$ D6 v+ Z
receiver_socket.onmessage = function(data) {0 i' C3 d6 L, L; q$ o$ z; S4 [
console.log(data.data);7 W9 X% K) L( {; K4 |
image.src = data.data;/ `* C4 }& Q; B- j
}% b6 r9 R- c; ^8 @( c
</script>$ c2 T9 M# H/ I l+ M/ m
</body>
" O+ |. b5 O8 [
</html>
$ `" m; W- g: t
) a, T1 u5 F1 g# Y9 E

复制代码

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

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

浏览过的版块

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

浏览过的版块

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