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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
1 n. ]+ v$ b- R$ {% t
$client=array();
8 U0 y& S6 Z) ^, q5 U S! T
$serv->on("open",function($serv,$req)use($client){3 i* X# [) K. ^+ e3 T
//echo 'connect'.$req->fd;
% ^( y1 ?6 F- l h0 H, W, |
$client[]=$req;0 {# L# H& |9 Q; Q
//var_dump($client);
( {: ]5 f4 u3 l8 |! M4 Q5 h
$serv->push($req->fd,'aa');
1 G( Y! a+ B! `5 }/ B# D% `
});# c" \* ^- w" \) p7 \6 l' j& h
: {* p+ V$ _, h9 |3 B& }; C
$serv->on("message",function($serv,$frame)use ($client){0 O) u* e4 u- S6 |4 b3 }& h, P
/*var_dump($frame->data);
" f; q% B# |* h0 x1 Q: `9 ?
foreach($client as $key =>$val){( B% ^4 k3 U" h) t
$serv->push($val->fd,'aa');
% P0 s; I( I' N, O( N
}*/# n F( `1 A+ m4 E( P
$client=$serv->connection_list();
3 J9 g/ Y' F z2 n5 p+ l, u% y. L
var_dump($client);' H* M) Y. H, [, k/ |% z
foreach($client as $key =>$val){# Z$ ^- V4 {% L i& O+ r
if($val!=$frame->fd){" l) q' u0 S0 i
$serv->push($val,$frame->data);
/ b5 U. B |' X4 y0 v' ]5 V
}
/ I0 t+ P ~9 T9 P4 v2 m/ e
}
. T- n# r. U0 g: v3 x( v* F8 Q
& l8 W# V$ H) @
});
, t3 L7 I( P2 b1 F
2 a' ]' ^8 H( G* _. N1 t2 |) j! Y
$serv->on("close",function($serv,$fd){, ^ I0 o9 _) v
echo 'close';+ S p% Q9 d0 M( b, _
});5 t) p! [" P, c/ {' j t
5 z4 P9 T% s) \9 S* F9 D
$serv->start();: @/ k/ ^3 ]9 I. G i
! O8 U! [3 j0 E

复制代码

主播客户端

<!doctype html>
2 K/ K4 Z x% I+ ~ I& `: E9 G
<html>
; }' }, H# R+ K ^
<head>$ o o1 ~7 g: p4 l! n( F% t4 E
<meta charset="utf-8">
% W3 c4 {! v6 h- U
$ P* y P3 n5 F8 q: Q: l H: M
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2 v$ ^; a* l0 b2 i- t$ M
<title>404</title>
. ]" H$ ]0 V% @4 K
<style>) ]% N% n+ x% v; m4 `" F8 n H
body{
& \& Y- y7 f4 m( D G' q
background-color:#444;5 U9 i# _5 H3 J/ P2 s
font-size:14px;0 N3 R, F1 h1 n- w- ]% m, i
}
, M0 S* L$ x9 x8 ]7 a N7 ^1 A
h3{
7 a9 {0 ^, ~+ @- l7 c6 X% _
font-size:60px;
8 }! t; K. H, m: j. ]: J
color:#eee;( }, i# F0 g1 C! u9 K
text-align:center;
" I5 D4 B4 j+ ?* Z% R
padding-top:30px;$ r7 v8 [" g% i: y0 L* N5 o
font-weight:normal;! k: s" \4 a# I* U4 a; o
}1 J C0 d5 K! C9 a7 }8 [2 s, l: `
</style>" F1 c( U( _! _( \! ~
</head>2 D3 j: j1 s% ^2 R* C
7 ^/ y8 `6 I6 O+ u, u d# ]
<body>
h- w+ U6 b0 {
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>9 _6 ~8 O) I" B4 f1 K. }
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
$ s* C( u. B, p. N3 M- Q, f4 m
<canvas width="400" id="canvas2" height="400" ></canvas>
. M0 E& q7 z" n1 [2 ~6 e. T
<script>
4 A' {( a3 ]: x% d1 y K( |' Q
var video=document.getElementById('video');, }5 j- R: r& H: Y' L, x
var canvas=document.getElementById('canvas');3 r3 f# }6 h C) r
var canvas2=document.getElementById('canvas2');
# K5 H$ \" |( n& D
var context=canvas.getContext('2d');5 t/ ^* I$ h# b* F: ~
var context2=canvas2.getContext('2d');
% A6 {7 b8 X4 e Y" J* l* N' i
function draw(){
! _" @2 S2 A A0 Q/ {7 i# U8 B
context.drawImage(video,0,0,400,400);; u! d: U6 T" v8 T
ws.send(canvas.toDataURL('image/jpeg',0.8));! Q4 q# d: w, V9 i' G! t
setTimeout(draw,800); m, B; z; N6 u8 e4 t
} w' j2 P6 M! e( y+ H- p
( Y' [% a1 ~2 p& v1 [! T) s
//客户端跟服务端通讯
4 Z& O, Z0 V# O& s* z$ |& z- m
if (window.MozWebSocket)! l8 j: w; t) H: j% N
{' e+ F6 f, a: o% b7 n
ws = new MozWebSocket("ws://182.61.42.187:9501"); A/ m" c+ C/ T0 S9 i; q Z5 W4 q
} else
; ^8 q& y( C/ Y8 n& ~
{; _8 ]6 M% B- R, {* R( g, a: H; p
ws = new WebSocket("ws://182.61.42.187:9501");
4 v* p- q8 c+ N9 T' i3 K( W5 v
}# U- Q. \0 E3 Y" c
5 y: }' A' n2 E0 K
ws.onopen=function(event){" [/ j& ]" c; h5 G
alert('连接成功');: ?. p; c6 G6 v( m% y, b& [' |$ P- [
ws.binaryType = 'arraybuffer';
1 J' ` o8 O/ E5 T
draw();
* k$ `1 I7 z9 R
}
. j5 J. B9 m, v, X( o
ws.onmessage=function(event){
/ J1 Z( r+ ~3 `7 ~7 x
//alert(event.data);% p3 @' N* a7 Q; |) |1 X+ K5 t0 Q: E* I
//ws.send(event.data+"client");$ U+ S. p+ }& w
qrCodeImg = new Image();
/ J! h( z# `; `1 ^% t
qrCodeImg.src = event.data;7 L6 Q( h9 R& p& S: y
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
' x& f- e' f- c6 t+ N3 U
# r& F8 D# v7 V
}
3 D1 P8 B d- ~: z3 I4 x% w
ws.onclose=function(event){
8 [$ p; E( y& u1 c, x0 k
alert('close');
3 ^' s- Z( H% p( n s9 m/ F
}8 X' L. }7 m+ _' P" l
ws.onerror=function(event){6 u, c% b/ k1 ?9 K% B% [1 b7 D
alert('error');
/ t6 C& ?4 i. f* `
}
7 M; P( S) ]/ U( C+ E% k
//video，标签模拟视频6 p8 o V. R8 U8 {0 v1 r
9 M7 n1 ^; W' k! V2 v% i* a: x2 {3 n
</script>
8 o9 r8 g/ L3 m& {% f
</body>" ]9 W; K$ m4 F# N# S
</html>
, o: x, q$ e6 Q1 j
1 _3 @+ q, z! \$ M: n* F: v7 `

复制代码

客户端：

<html>! h' I& X1 r/ F" k) z5 Z2 O# E3 }% k
<head>
* H1 g" u, |9 p8 f
<meta http-equiv="content-type" content="text/html; charset=utf-8">3 A: X4 f0 f4 i# J2 ~( @" F9 `
<title>客户端直播页面</title>; C( f8 v ^$ C, @7 ~+ N1 X
</head>
w3 e' c+ W( x, Z
<body>
; ^6 O, ]" x: `$ v [% A
<img id="receiver" style="width:720px;height:480px">, J$ ]. c' D* U! s5 o1 y% `
0 q5 X: T& t. i" ]; ?( e: {
<script type="text/javascript" charset="utf-8">; F3 P6 D: W8 @; V$ h( _$ S& m1 g
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");- ]6 D* N, K. ?/ w5 v, Q+ F
var image = document.getElementById('receiver'); e4 ?& m: E+ F9 r" j# C: P
receiver_socket.onmessage = function(data) {- M( F5 n6 N. G5 z
console.log(data.data);. A# {* Q; i# O! G+ ~
image.src = data.data;
Q1 l1 c7 }6 ?. C: ?9 E; z
}/ D' @# I; S( s8 `$ a0 l' T7 I- y$ _
</script>. }7 G; J y) N, f% ?3 v: }
</body>0 H: H; I. R+ m7 ]
</html>
, }0 E# b( {! g; A( B8 Q
4 _4 @5 j* C( P6 {0 K* l

复制代码

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

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

浏览过的版块

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

浏览过的版块

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