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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
0 ]7 O. t$ M4 d9 F7 O. p
$client=array();
% ]: u7 U7 i' m r+ p" X
$serv->on("open",function($serv,$req)use($client){
6 Z. `7 K* ] o$ L
//echo 'connect'.$req->fd;9 m9 x7 [9 E* Q: J5 F5 S; m
$client[]=$req;
" |9 Q7 c) A0 x) e# W
//var_dump($client);6 o/ U) {: O$ h. p! P
$serv->push($req->fd,'aa');+ n7 l: V4 J4 S6 ?5 {, C
});* |' [. t5 o7 j/ _/ M; F
! ]1 y/ l! Z8 K
$serv->on("message",function($serv,$frame)use ($client){! z. h5 r( P' @+ h0 o3 f
/*var_dump($frame->data);
( q4 q: l: y' q1 P
foreach($client as $key =>$val){& G+ Q) }/ U+ S. a, O! A6 H- d! \
$serv->push($val->fd,'aa');' M8 G: q% [" X* T0 W
}*/5 Q* n' K3 Y; m8 z+ M, n
$client=$serv->connection_list();9 E. q# Y0 V% ]" B. Q5 n
var_dump($client);' |6 T+ n9 H3 N6 A- x4 n
foreach($client as $key =>$val){
* g9 p0 B" x* B1 b. w
if($val!=$frame->fd){
* f/ G5 z+ G) N6 ?7 i0 S
$serv->push($val,$frame->data);2 \( P; m& f( i+ l
}
/ @8 |4 b( p1 c! ^, d
}. P, y& ?& M Y# Q& L( d2 P
. j2 y! _4 a8 {7 I
});
& ?1 ]3 K9 l1 F; i1 D: S; o$ f, c
, N3 `* ^. ~0 p! P
$serv->on("close",function($serv,$fd){. _% l4 A& c1 I/ W/ h6 l" o
echo 'close';' d# g# o9 f; f: {* `& d$ w
});
, j3 T, }. J9 X' u
: x% }- A; P5 \0 a# \# f& O/ ~! W
$serv->start();9 _) [" ?! o7 l1 K& s8 z
8 J; |8 H. ?2 u

复制代码

主播客户端

<!doctype html>* n5 D Y9 h: b/ Q! {7 R! v4 _5 O Y
<html>
& j0 x' F, L' b" T5 b: G! A. W
<head>
4 [# f! P0 j" v
<meta charset="utf-8">) W1 p5 @1 L- N* G) p% O
! r: s8 N7 Y a6 J- E7 c- L$ Q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
) l# l& }# K: d5 s3 T; v7 ~
<title>404</title>$ V# |( d, k# ]3 z7 t
<style>
! t! B; S# o* w9 `8 v* E' J
body{
* M+ ~# m; T5 I: R2 F
background-color:#444;2 K1 [8 @; d/ G- ~( b9 U
font-size:14px;% z1 Q, f) l4 N5 B# M
}
5 b. `4 W) S: H4 D
h3{1 d% @: z9 Y/ @# n
font-size:60px;
# f( \, V# l; P. ]3 l
color:#eee;2 F) L6 p) d4 E4 v1 Y
text-align:center;
% r/ r$ Y+ U& W4 d& w1 i
padding-top:30px;: M, J6 d5 |: l% `5 W' u
font-weight:normal;" V r% U; }+ t$ ~- q$ d2 Q8 I& K. y
}; D% X1 b' h' C* ]4 E+ ~& x
</style>$ S9 [& e# [. N9 i
</head>
) W8 J/ V6 K1 b* q' @
. E# Y4 F. \$ D* S$ n
<body>* Q0 J; i. _# \' M
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
7 H# ~1 W0 ]2 }8 F; H# ^' e
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
2 S9 F0 d( U; O# i) F
<canvas width="400" id="canvas2" height="400" ></canvas>
9 q& x3 n1 k6 [1 i" g4 h7 W
<script>$ O% N% V3 r; X# f6 G' ] l# Z3 T
var video=document.getElementById('video');% U/ F3 A3 C3 u2 @" N; N2 R
var canvas=document.getElementById('canvas');
3 E2 C' u0 H: T# U* ~. O6 ?2 `
var canvas2=document.getElementById('canvas2');2 V: h( ?& a+ c+ f+ l; E6 I; v. x
var context=canvas.getContext('2d');
, N" n' h+ y% i! L K: H
var context2=canvas2.getContext('2d');! v( u) w: ^0 ]
function draw(){5 A: B9 X( }% ]. {$ H S7 k
context.drawImage(video,0,0,400,400);
! F" r3 P, ]1 [- b. A" G
ws.send(canvas.toDataURL('image/jpeg',0.8));9 J' k U% `! \' {3 [* Z1 l2 _
setTimeout(draw,800);; b2 ~1 T$ s, d# [
}
7 M+ m4 p$ R" ?( y. @0 A
& n# Y. r5 G) x! \/ v5 q
//客户端跟服务端通讯
& x. z' R. w2 X% d" P! J3 {4 P7 r- ~
if (window.MozWebSocket), t8 n& p1 ]4 `! W! f0 |& a
{
# R, e; q4 W* N% [& s5 r
ws = new MozWebSocket("ws://182.61.42.187:9501");
' q8 @: {+ c! e% h. X$ O
} else
. P% C: l* j M
{
. ?: R6 y, b+ D3 @( w1 W+ }8 y3 i1 W6 R
ws = new WebSocket("ws://182.61.42.187:9501");7 H. ]8 \) N2 u* n1 B. ?
}4 U v/ s, |1 G( h( g% q; T
# D: T! }; Q# }# x( @2 `
ws.onopen=function(event){" n, r0 u/ n$ i4 u
alert('连接成功');9 s) {7 A9 ^* ^
ws.binaryType = 'arraybuffer';
. N% t% P; X: S5 e7 E: B2 L1 E3 M
draw();
( Q5 F( l. A, b
}9 U* m9 k( g7 }3 R- l# F
ws.onmessage=function(event){( P3 p$ R$ \6 ^* B( }8 @, [
//alert(event.data);
! h1 D- @9 i, B
//ws.send(event.data+"client");
" V3 A2 V" \! X( o
qrCodeImg = new Image();
: A4 f. l5 P" U1 {# q+ R
qrCodeImg.src = event.data;# ^* K8 s2 T3 L& f
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
8 U3 W. ?) o3 w, v! _5 G( \
8 j! F! @# O9 f! m
}
% Y/ | f& U h
ws.onclose=function(event){; j- e' b: c( o0 H; t( h
alert('close');
& V: v$ {6 F+ o0 \0 O) j
}
" ] o w5 `$ z4 v7 d
ws.onerror=function(event){
) P" U3 B' L+ C
alert('error');( B1 u* Q% v5 u/ l9 s6 K% W, U" o
}# K" t! e) H4 B4 I# T( a
//video，标签模拟视频0 X$ P- V* P7 _8 n( k9 V& {
3 f$ j8 h1 n1 t7 M+ J5 j; ?- N$ d
</script># s/ M. P1 _. |! ?
</body>
$ e. K& e, R3 Z5 R
</html>& j. x9 o5 e" w, \/ w5 H! z
' v1 p: \! v b7 V" i

复制代码

客户端：

<html>9 H% U& c5 Y+ p8 D0 H
<head>4 U3 ~- Z$ e3 q
<meta http-equiv="content-type" content="text/html; charset=utf-8"> r3 e E- G, Y, ^2 r
<title>客户端直播页面</title>
" b( m4 n3 \2 i W1 C3 D. m
</head>; F( P' W% d8 f0 ^8 [
<body>* W8 Q8 Z; R0 f
<img id="receiver" style="width:720px;height:480px">
. Q& f. h. D; k( a
2 {# R% @+ Z5 M$ o
<script type="text/javascript" charset="utf-8">
3 D9 V% E2 Y0 T1 R' G; h/ x
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
, W2 k' P, X" M9 d9 K
var image = document.getElementById('receiver');
6 b! `% b. i1 X/ g) Y I/ M
receiver_socket.onmessage = function(data) {
( v! e3 U: t V B4 U! K
console.log(data.data);
" u8 m5 N& M6 E$ N/ m% S& X! h
image.src = data.data;
+ N( W$ S1 i- Q J1 q& R
} A: J9 e4 s" f% `
</script>
4 s, {. D$ H l4 h. d! R% X
</body>
& f1 g& ~$ ^1 q9 z. C# k, E K
</html>' F* E, l2 o# o- i
U2 k: o j L

复制代码

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

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

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