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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
( A0 {- F: u" z/ w( O& w( t
$client=array();
$ E& V- w$ G7 q; a
$serv->on("open",function($serv,$req)use($client){
g+ @3 V7 H- o: }
//echo 'connect'.$req->fd;0 D5 A( a) V: f6 j9 K/ \. {; U
$client[]=$req;( Q. u6 G# c3 h7 n
//var_dump($client);
% b9 @0 u' g! Y0 v5 a
$serv->push($req->fd,'aa');' u. p, g7 E! R- G3 I0 k, l
});9 A: ^9 L+ A) {7 l5 @
) h# J5 ?. E v* a4 ?6 B* z
$serv->on("message",function($serv,$frame)use ($client){( v- t5 `, o8 n% x1 Z" f# q- n
/*var_dump($frame->data);
: N& b2 x) i9 J
foreach($client as $key =>$val){) M3 n8 C& l$ H: U
$serv->push($val->fd,'aa');: L9 b' k; ~& a5 T1 n
}*/
$ B" q' C- t: C2 \" `# R
$client=$serv->connection_list(); _5 T3 Q$ [6 d$ ~) y+ f3 W
var_dump($client);
, e1 p' r, x# b- U6 Q
foreach($client as $key =>$val){
; u4 i S$ y' {. E& M
if($val!=$frame->fd){
) M) M2 [9 G- L* e0 I
$serv->push($val,$frame->data);
) f. p7 ^6 R2 b$ W4 o2 V3 l, [
}
- P) ~. P% m! k5 |3 `+ a7 k
}
) _2 r! P& X) j! k' K# W7 e( o! V
7 e/ B, A* f" ?3 m6 a8 A
});) I5 @6 a8 P: O* {& y" F
! \% c; l; p4 I0 c
$serv->on("close",function($serv,$fd){
g1 d; h' ^* s$ V2 n1 r a4 v
echo 'close';8 I7 c; |9 \7 V; G2 y6 _ c
});9 b$ S( B- y. p: }
6 H7 t' p; K4 `# N$ q
$serv->start();
% ~+ l) P: X$ E
; |1 E* ?: ^0 m$ G2 \

复制代码

主播客户端

<!doctype html>
) g; i! I4 l6 n
<html>
! E' ?- v, M- ]1 D8 Y$ O
<head>/ d; `6 X; k# A9 L( }3 v& z) E
<meta charset="utf-8">$ \, ]: U. K3 }6 |4 _5 Y# o
! _& ? T4 \* \2 R& |' A0 D" _
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
) N: e# i$ X. [
<title>404</title>
+ \( U) {1 G; w; Z% i: U& ]4 Y* v
<style>
6 E+ S& p" g- c3 \. b/ G0 K
body{/ k5 V5 \ K" [. w2 ?3 N& ?; D
background-color:#444;
0 _9 L* ?& G6 ?6 _
font-size:14px;
; R! C0 a5 Z7 p
}
3 [' q3 @# u9 f7 x$ r& @
h3{& l/ L/ O0 }; M& }
font-size:60px;- Q: f L" r. Y6 O4 G' O
color:#eee;
5 Z: F8 Z: _/ ^
text-align:center;
" A6 |4 ]& B/ t% ~
padding-top:30px;
5 F, d2 d2 Y) ^, h+ q
font-weight:normal; e( I0 ~& x! v$ H& k1 A
}, |' p. E5 S- e' J7 Z4 ^
</style>
4 t9 O. g: G& Y/ s9 t- r
</head> z' f: Z6 L+ R/ S$ J* }
u& I) {7 h6 j# X
<body>
$ h I! l8 W: L8 ^6 b
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
2 A. i e) A8 A* w- _/ E8 Z5 E
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>' Z5 _ D! l" ^& ]. {+ j* R1 ~1 ^
<canvas width="400" id="canvas2" height="400" ></canvas>/ C2 o( `# u% K* k0 o4 t$ X$ h
<script>( ^# X* ~# ^) e R( J2 |6 b9 U9 W
var video=document.getElementById('video');
) {" e* b' ?8 @* i+ [1 Q! e+ v5 Z" \
var canvas=document.getElementById('canvas');1 q- S6 s5 i7 d$ {/ e5 r
var canvas2=document.getElementById('canvas2');* t3 Q/ k: `" v7 q/ C1 i8 b
var context=canvas.getContext('2d');. a' V8 } ~3 f0 Z% A5 y* Q
var context2=canvas2.getContext('2d');
1 t* v/ z: f& A0 A: V
function draw(){1 o& J& G" @2 W/ R, J" b& `
context.drawImage(video,0,0,400,400);
$ g, s' Z1 W5 Y R: w
ws.send(canvas.toDataURL('image/jpeg',0.8));( a) w) w9 z8 U7 u1 I
setTimeout(draw,800);
, I# ~) p, ?$ i, U$ A" u
}
% C3 |7 `/ d& Y7 R% \8 T( |7 @
8 k4 L ~9 i1 B) E5 o% h2 F
//客户端跟服务端通讯
& M# x2 j& X! ]! Z7 v" R
if (window.MozWebSocket)
2 u3 {; Q A. Z
{
) a/ M6 p4 v& e) r2 Z
ws = new MozWebSocket("ws://182.61.42.187:9501");4 k: I3 m5 t2 L: d
} else; B4 h/ }, u" J K1 T( [
{
8 p% H q( c. p& D4 }
ws = new WebSocket("ws://182.61.42.187:9501");
* t' b0 }& v; y
}
% T& F/ p4 R' ^4 l9 X. x! P
/ c+ ?% H$ Y( n! R! D& ^
ws.onopen=function(event){
7 @( w! M9 o7 k5 d0 R/ f# w& ?
alert('连接成功');
4 m- S9 T5 c9 z4 |
ws.binaryType = 'arraybuffer';7 c1 u4 ]& i5 Y
draw();5 _, f/ w# T0 L& [
}
6 j) N$ H% d/ y8 G0 [
ws.onmessage=function(event){
+ R$ R7 Z; k) H& p
//alert(event.data);9 Z+ V3 L# `, }% V% s3 _3 X% {* {) G: {
//ws.send(event.data+"client");8 ~; u' C+ U- [4 v+ e% F
qrCodeImg = new Image();
/ x7 l4 ~# @; m* N! H
qrCodeImg.src = event.data;
Y% W& C0 V; Q" x5 x! s. B+ p; c
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
) S+ U8 y3 ]( j! d. l
2 }* u; ?- I- f3 B+ X5 a
}, E: B! [ g5 w" ~* S
ws.onclose=function(event){
: V8 c8 q6 x& y1 d; ]6 @& Y
alert('close');
; y# S7 G9 ~" S2 s
}
, S8 U. ^" a+ [$ A x# `
ws.onerror=function(event){! x- y! D1 }/ M
alert('error');+ D4 V h" g# E
}
& c" N3 m3 g. i7 H7 P! z7 U# x- t
//video，标签模拟视频
) x+ I# ^& r, P* y
7 Z8 @1 E0 ]) Y2 t/ |! }( `" _
</script>
" E$ X8 p) Y; k9 n
</body>
; e3 |3 |$ x: {! d$ u2 Z1 [7 G
</html>8 X" w0 k& M1 j2 a
; y5 x* R6 B, t

复制代码

客户端：

<html>
; z# f. d, E2 |4 e/ ^
<head>
c& D$ f9 N9 z' o; u% G* R( Z" F- U
<meta http-equiv="content-type" content="text/html; charset=utf-8">
T. }/ I1 P; { @7 A R
<title>客户端直播页面</title>
/ p7 I" Z% v' L z
</head>3 Y- v- Q+ b* X2 h; E
<body>
! m# n/ d4 Q& \ Q, _9 Z' k! z
<img id="receiver" style="width:720px;height:480px">
+ W1 q# g9 m/ [
/ Y4 ]0 Q4 y7 A' ^- j3 s
<script type="text/javascript" charset="utf-8">7 S8 W2 ?* O( L8 M) l
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 C& v. E# y4 s( A2 |
var image = document.getElementById('receiver');
: } H' R$ E; y- ]% }$ I5 E
receiver_socket.onmessage = function(data) {/ ?# o& h* F+ d
console.log(data.data);
* j5 @/ v% c6 f4 C( a: R
image.src = data.data;- ] h. n9 Y! k5 a- \1 K( r: `' N& p
}
* }# m4 ?0 V$ X# y0 W
</script>
9 F- c1 u2 ^. }( g
</body>! P ?- P ^6 j* t
</html>. @% @1 U( g! D1 E, _4 T) g1 k
8 e' E7 c; r ^% Q8 w, o

复制代码

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

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

浏览过的版块

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

浏览过的版块

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