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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);2 h7 z) V! T. E1 O4 x6 Y% D* m
$client=array();
' M) J( |1 F5 H, a" P
$serv->on("open",function($serv,$req)use($client){
: p& c: {1 h1 O+ d
//echo 'connect'.$req->fd;
. r5 Q; D0 P6 f$ Q
$client[]=$req;
0 j/ n% x% R4 x M2 E7 b! e) \7 [
//var_dump($client);7 {. Y+ d8 j% F+ S* m" n
$serv->push($req->fd,'aa');/ N, a7 y6 b+ F2 q0 E9 H
});; Z5 T' {, C& X. W# K% e# G
6 ?$ K$ \7 C8 N7 y1 P0 T
$serv->on("message",function($serv,$frame)use ($client){
i% L! X7 E) \7 ?
/*var_dump($frame->data);2 j- r2 ^. u6 a/ i1 X
foreach($client as $key =>$val){
& {3 t6 e% w' t$ ~+ u+ {
$serv->push($val->fd,'aa');
( T( f3 q9 O" S9 `' I* ?
}*/! g2 ]9 s9 u1 X; R5 {
$client=$serv->connection_list();
& V7 ]: \2 q3 X9 C
var_dump($client);
$ b" P: I3 t1 v% a5 `
foreach($client as $key =>$val){
; [) S; q9 C0 k
if($val!=$frame->fd){
: d( D3 P& d; ?6 J+ R% }
$serv->push($val,$frame->data);1 G! F; c9 q6 T6 Y
}, N( A7 l* ^3 \( f
}
7 B" t# A4 A4 G3 V
; r! B3 R* Z0 A4 }/ ^2 k% f, J
});" s8 R: O; O/ F
' T1 O8 V# P" E9 o' N0 Y
$serv->on("close",function($serv,$fd){
- H4 P: G/ G4 f% G
echo 'close';
" T9 ^- `3 I) l( [1 Y* q
});; J4 Y3 e2 Z& ^; c6 N h3 G
; X7 [8 E/ ]' F% Z# W' I0 g
$serv->start();
0 Y' j- e& [* S& a# F
2 C' d" g) H& d) H/ j; k

复制代码

主播客户端

<!doctype html>- j4 z# p ^& W' P) K
<html>
( L S7 X Q! L) O9 A
<head>7 j4 Q6 h) S! X! s- t( q
<meta charset="utf-8">
( x+ {4 T5 n2 Q8 H9 Z
; K2 t9 u5 I# X- |. T% w, L$ y5 p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">: z1 j+ U9 A: w6 H
<title>404</title>
6 o, F9 e& z( m# b/ s3 x
<style>
, {4 C* Z3 u4 D3 T1 ?1 y! l
body{5 X5 S; b# M* c# u
background-color:#444;
- }6 b/ l) m# X0 o
font-size:14px;7 w5 e' V( u7 m% |
}( f) U3 F$ x$ u+ m! ^
h3{
, F$ P( Y1 \. q" Z
font-size:60px;
" V R- X4 g) M$ E; M5 Y7 \; q
color:#eee;1 e$ A4 F* q+ X
text-align:center;
C$ t+ o! _2 p J; n
padding-top:30px;
& y: ^# x& c ^6 ^" D' ^ a" q
font-weight:normal;7 o2 q# m2 K/ }" I% p
}2 k/ X7 L; k2 ^4 `0 u
</style>$ A W3 g4 K* a3 f. q( k! K
</head>
: U7 R* s3 Q7 c5 e5 Y+ h0 `
; \, Y" d$ x0 `- t6 G$ ~
<body># r! }7 }! T, L3 r
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
* t; m' h& T$ f+ L
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
) d7 c' Y4 _4 J8 Y: W- ?7 {
<canvas width="400" id="canvas2" height="400" ></canvas>
5 V+ H, H- f" ]
<script>4 o- y* h/ I# |% o
var video=document.getElementById('video');
, |# p N- i& Z% p3 M% c2 }
var canvas=document.getElementById('canvas');
0 p u% A0 r" f; C6 j
var canvas2=document.getElementById('canvas2');5 V8 p2 O; d5 P1 W
var context=canvas.getContext('2d');
+ C: l1 Y/ j& k- B: ~
var context2=canvas2.getContext('2d');1 ]9 a" r9 n& N7 Z5 s1 k
function draw(){
f5 I& P7 ]* m2 L& j* g' e
context.drawImage(video,0,0,400,400);% W1 J4 q+ b) {$ S. p* b4 M u
ws.send(canvas.toDataURL('image/jpeg',0.8));
' ?% X2 Q8 E; X
setTimeout(draw,800);/ R4 [. U4 W# r2 n7 S; Q- @
}
. F. E J' Z6 S! I
# ~: l" _- \7 j' i
//客户端跟服务端通讯# Q' b9 H9 L# E" i8 D
if (window.MozWebSocket)- n* [. j: c( {
{
E/ V0 W4 p0 k, V9 E" K4 |* G+ w3 Z
ws = new MozWebSocket("ws://182.61.42.187:9501");
0 j; {& j8 n4 X7 B
} else
: s+ W% e9 x7 L: D$ V
{: E+ O- n; G$ B" J) ^& B
ws = new WebSocket("ws://182.61.42.187:9501");
2 s6 \) g C; F e( p+ h
}( U" h" O+ `# \* M3 f. h0 m2 s
4 Y( W% S9 g. e3 A* T4 ?. e
ws.onopen=function(event){
# U/ v# E% z' p
alert('连接成功');
6 _" c3 H5 [% J8 }- J
ws.binaryType = 'arraybuffer';, d) M; Q2 p( X- f2 S1 o
draw();5 r' x X1 N, M5 @' L
}
7 @+ c) e5 U& u+ _( V
ws.onmessage=function(event){' g5 f7 g1 G b5 S
//alert(event.data);
6 Z: E( h$ t: V
//ws.send(event.data+"client");6 Z3 L0 G* d8 s0 r8 W& \! z& H
qrCodeImg = new Image();
' x# q0 L* W. Q4 A
qrCodeImg.src = event.data;
) _. f, H' [2 n( b* j- I
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
! \- }5 s" u3 ]6 Q6 w* n
5 n" t. `( j0 N& N) X- L/ f6 d# q, D
}
, H. X7 C$ u, o- i
ws.onclose=function(event){
2 n' u+ P; O, g2 o6 ?' A
alert('close');
0 W I0 l: U4 Q8 g
}
4 G/ v2 O% Q( Q0 a
ws.onerror=function(event){
1 C" v+ \6 ]% C! P' Z2 V! Q9 i
alert('error');6 i% |; N: `0 N$ c2 O
}
5 i; u0 X( U8 {$ P$ `0 j
//video，标签模拟视频
) d( [+ L' ^; N
0 S/ k4 W( G B2 l+ j; K
</script>1 ]" f4 q7 T6 A" G$ U% o
</body>
7 ]" ^, A0 m' n+ Q" u8 o K
</html>7 J R) L7 Y! B0 m) }0 p+ k- A
' `. s3 P' c" B( N9 t u

复制代码

客户端：

<html>
$ h! h6 V# B b) K7 h
<head>
( D, x4 J) t" E; M
<meta http-equiv="content-type" content="text/html; charset=utf-8">/ `+ F' x% @: j4 O! W8 h6 }* `- a
<title>客户端直播页面</title>
6 K! N% m& p% B8 R3 X
</head>
<body>; r4 [& G2 n, c; s; b
<img id="receiver" style="width:720px;height:480px">" N% R5 J! v, ]! w+ Q3 n8 j; j
( z" v7 M e7 {: ]" ?) t
<script type="text/javascript" charset="utf-8">! P5 M$ b: v! I( ~4 H6 C9 E
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
# c3 w) [) A8 v* \7 l( h
var image = document.getElementById('receiver');8 u; I6 R' f3 L# N1 m6 Z1 d
receiver_socket.onmessage = function(data) {
, {* @2 ~* p% H: i" t& r. g
console.log(data.data);+ Z5 d0 _% |* n4 M7 {9 R
image.src = data.data;$ L" ^( r6 B# g) g5 r
}
& m' o# N$ J1 g0 B" b: \) E
</script>
% l8 D3 S) Q0 }0 u! R
</body>+ w8 z2 K$ j$ ^! L) w9 ?8 R
</html>
) |4 U) Z7 C3 L: z& Q/ D
Z( U* Y0 O4 K6 ?

复制代码

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

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

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