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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
7 I) i: [- q3 y' W1 s1 [5 s1 _
$client=array();
# H I4 m5 D7 o" j
$serv->on("open",function($serv,$req)use($client){
# ~* y9 O/ ^! Z3 v8 t$ X @! a N
//echo 'connect'.$req->fd;
! T3 L+ p2 J. Z, g* i
$client[]=$req;
5 o H( K7 N0 f$ a$ H8 A
//var_dump($client);
8 m# y' A. l: r0 h! W
$serv->push($req->fd,'aa');
2 L+ C u, }+ m" L0 \! e
});
4 K- H% q8 r- A0 @6 A/ s5 u
; e0 S# t% L' c
$serv->on("message",function($serv,$frame)use ($client){
6 h1 T$ {& a. D/ U
/*var_dump($frame->data);
, M. Z- |3 K; d! S- V) N$ i& _: x
foreach($client as $key =>$val){
8 n* f: H- y: o9 _: R
$serv->push($val->fd,'aa');
* z) \" V' X ^6 y
}*/2 t7 W- }" h7 X& v
$client=$serv->connection_list();
. U/ @% ~5 {9 y' r
var_dump($client);2 u+ i7 t- ~# Q* w/ z t) |
foreach($client as $key =>$val){& N3 F, S+ g# d' ?9 h' P
if($val!=$frame->fd){
2 i% @7 L3 R8 o4 r
$serv->push($val,$frame->data);
' n8 s1 P4 P: [0 N) R
}+ n* k g0 |$ t8 h* K/ m$ L# P, T
}. {2 C& P6 [# u
8 `* M+ B; U" |" \
});
8 a* ~' {0 D% v3 S% M
6 \) r0 _3 Z( C4 m
$serv->on("close",function($serv,$fd){
! O: ~- e/ W* M! W
echo 'close';/ o. V' G' d2 `; m R' |
});
. i5 O j( Z: j6 X
# E8 }7 @) h$ |! Q) T
$serv->start();1 `- e& ?; g( u: I% h
8 }/ A; S3 b$ Y8 w+ h q

复制代码

主播客户端

<!doctype html>
$ z8 D$ n0 p7 l+ E3 l q* Q3 r
<html>6 b* K% L% y3 g" F {1 F7 l+ N
<head>
: i, b5 i& y: Q' e! F
<meta charset="utf-8">/ N9 _! k# K0 Y; l
" I- J9 c2 l+ w# u+ h2 R+ F9 K
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">& N4 w/ T4 j% j# ?; `
<title>404</title>: S3 O% r- L8 ~+ O# M5 U4 J: b3 X3 y
<style>4 {9 I8 f1 S. D' l3 X& L# B) v5 d
body{- ^# l1 u, X: f G h6 Q4 z1 p8 R3 P
background-color:#444; e. I a y) T) o6 u& I" b
font-size:14px;
: ]1 G1 o6 Z8 ^: f' q
}; D/ W/ w- C: u! U+ f
h3{
' n, x3 w: J$ U) s, A' j K$ P, q
font-size:60px;
0 x4 O: b% W/ w# C- I
color:#eee;2 `+ w3 |6 a# a) ?
text-align:center;4 U4 {) J, a# M0 F! e3 k$ Q
padding-top:30px;
" h5 ]8 j- ^7 B0 n" S
font-weight:normal;
; w. J+ O, C9 z/ h+ l
}5 k# D% W) }# d) c; E
</style> f2 D, i( s1 f. A! q* r( c5 [
</head>
9 R9 _" d7 r7 F3 X" e" n
( R1 |4 z( Q' }
<body>
/ d: Y+ s6 M @7 ?5 W
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video> t& G& u( g" b- o' }" Y) ~2 E( ^4 X
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>/ H, [- z& k- B$ {- p
<canvas width="400" id="canvas2" height="400" ></canvas>
8 {: d% \/ u" m" X! a
<script>" P- a9 T* i" v: }
var video=document.getElementById('video');. z' n' b, f9 j
var canvas=document.getElementById('canvas');
0 h& V4 ` ]& ]* x5 v$ L
var canvas2=document.getElementById('canvas2');+ a* A W- l% p; p3 U) Q
var context=canvas.getContext('2d');
" B" r9 }8 p! h' w" `+ ~
var context2=canvas2.getContext('2d');+ f! {3 o: I1 }) F2 G- i
function draw(){
# l* }- [8 k1 E5 F
context.drawImage(video,0,0,400,400);5 L' A3 }2 B+ z; @+ \
ws.send(canvas.toDataURL('image/jpeg',0.8));
5 a' v2 R. T V/ a$ d0 D
setTimeout(draw,800);
' u* X) k0 ^; Z" v
}
! |6 m+ K2 _3 @
+ r% _4 V7 ^/ X( j& ^% G/ h h
//客户端跟服务端通讯
9 g; m' T$ O# k+ _6 ?
if (window.MozWebSocket)
( @& S8 ?7 t7 v0 m, E
{( I% N( r( j+ S
ws = new MozWebSocket("ws://182.61.42.187:9501");
, z" r; @8 N" Y
} else4 p2 R2 I( h% a" I* i
{
8 G. \& s5 l0 Z! y" q
ws = new WebSocket("ws://182.61.42.187:9501");4 l6 r- J: ~+ K w* H0 y- U9 U0 ]5 R
}
& \1 C3 H5 e/ y& k# t
, X: w# C1 Q& d7 A7 G& m) Q
ws.onopen=function(event){8 w7 m, y3 v5 G1 g; t8 m+ y
alert('连接成功');
* L; W4 r/ r; U
ws.binaryType = 'arraybuffer';
$ `5 T# |1 n" D' D/ l% i0 f, q# [
draw();
}
. a3 f: F9 `$ G' w1 d5 o
ws.onmessage=function(event){: T& w8 Q5 ?( Q
//alert(event.data);
* K. H+ P! f- p% H
//ws.send(event.data+"client");
/ A6 p7 A. o0 V2 C% X' D: m
qrCodeImg = new Image();. g9 L o4 n" g+ P; _
qrCodeImg.src = event.data;3 Z/ @1 B8 G3 K' a; c
context2.drawImage(qrCodeImg, 0, 0, 400, 400);8 R; p4 C1 s7 _5 ` j6 T1 U0 u
/ C/ K* H' f# K$ x
}
- l5 ?* t$ `* e9 G0 H9 n+ z
ws.onclose=function(event){" w5 k0 S* t) Z* v% j& ?* t
alert('close');
9 ^/ V" s. Z ]7 i& s. l5 ^) d
}
4 M6 Q+ X9 I) c/ H7 P0 p
ws.onerror=function(event){+ H5 Q% s3 s: I6 L& U9 N
alert('error');
( J% A/ x3 m) W& c" r
}
. ^2 z* e7 M+ Q8 ?% x
//video，标签模拟视频
( b o9 ?+ ^* e4 G
- C* z: b2 m! n
</script>9 x$ L% \2 F6 a0 ?( r
</body>+ \$ q2 a; M& p* L) I' T4 t( D
</html>
3 }) m$ k4 u& k5 u! R' r) H; Y
) [3 k# X0 a! J9 q

复制代码

客户端：

<html>
1 ~# Q+ w5 @% b- I
<head>
8 Q% ]: j- J! g* m
<meta http-equiv="content-type" content="text/html; charset=utf-8">
* @( p0 q3 `( e# L% _2 s6 F
<title>客户端直播页面</title>
j& w* \3 X. R8 Q
</head>
- c/ W0 \" y& q( @0 A
<body> d, L9 o6 g' q% p( B- }
<img id="receiver" style="width:720px;height:480px">+ {: T( i8 C# b! M. p* F2 i, E" M
/ _1 R* c5 r7 g; X) a
<script type="text/javascript" charset="utf-8">
. I* c) C5 K' K+ l8 t
var receiver_socket = new WebSocket("ws://182.61.42.187:9501"); C9 s9 K# q" U* T7 v) g1 V( a9 ~
var image = document.getElementById('receiver');3 ]+ j5 @5 b0 u% K
receiver_socket.onmessage = function(data) {1 m3 b5 J8 w* P3 N6 X
console.log(data.data);9 W+ s+ [; f6 o i) h2 ~5 B* q
image.src = data.data;! b: O& M3 {. j* m# F
}( ~& Y0 }4 y1 b0 m* }0 n9 C+ X- L
</script>
* C% m/ F, a8 P" k" v
</body>
# Q6 ?: o! O% V
</html>
7 w$ t. i* b# l b; L* H8 G. c
/ g/ i8 M3 v7 y/ }. [3 a6 p

复制代码

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

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

浏览过的版块

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

浏览过的版块

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