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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);7 V* ^" W4 ^1 q' R5 [9 j
$client=array();6 P/ C/ m3 f- q+ h8 A$ v
$serv->on("open",function($serv,$req)use($client){
; q @& @, T4 @) M7 R6 ~# `
//echo 'connect'.$req->fd;
! U ^( l( r) L# r
$client[]=$req;: u$ x& j8 M- ]6 ]( j
//var_dump($client);; ^" Y% P5 b. D: x Z# t' X
$serv->push($req->fd,'aa');
* R$ ]" U$ [- P) q+ k
});5 Q# i9 u- Y" i6 b8 N; v
$serv->on("message",function($serv,$frame)use ($client){# V( o4 ]* L7 ]- v
/*var_dump($frame->data);
' B5 c k8 t, q, k! z
foreach($client as $key =>$val){
. X6 r7 g3 L9 Y1 r6 G0 g
$serv->push($val->fd,'aa');; ]* L9 m1 n/ ?2 B: U
}*/
. M% M) N2 s" s
$client=$serv->connection_list();
+ Q& L2 n7 X% U1 \
var_dump($client);
+ Z! I6 B! ^% t( D% t6 {8 \( G
foreach($client as $key =>$val){
, n" q0 }( e2 h% b, X) w# q. O- O
if($val!=$frame->fd){/ @0 y6 K8 a# [: N. r$ |
$serv->push($val,$frame->data);
. G4 L2 _. M3 E- ^* ? M' j. m) q# u
}% ~: k6 `- V# n' f0 D
}) V8 @) @5 K1 e' T4 U Q
1 C9 M# ~5 @, I7 z/ F
});
( o8 v: W, W, G2 G1 g) S
4 O5 B: N: T. e) w: B4 C8 l1 R4 s
$serv->on("close",function($serv,$fd){
; F9 n: |9 D, z5 {: V R
echo 'close';
. [# I# _# f- Y! ?4 T6 F% P5 p
});
. L4 r, H7 V$ d' o7 O6 |7 W
, M j/ t: n0 { C5 Z4 I2 o
$serv->start();" R. y, `3 _% w% S
$ d) } Z8 j9 P

复制代码

主播客户端

<!doctype html>8 a2 J0 S w: V1 |
<html>% K( j7 d: G; {! v! @1 [. I
<head>$ ?/ \6 N4 q, |, W5 a0 A6 y
<meta charset="utf-8">
* N; N/ @6 `- i% e; B
- Z! s$ I8 f' X. a6 b0 _: P7 O8 q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
9 A+ m0 m9 j2 J6 B! V- M; ^
<title>404</title>1 X6 r* D A2 H( V, M6 ?4 ?
<style>
4 @+ e6 t4 v7 |. _! e
body{
0 p# z7 Q. B7 J( v5 ], u
background-color:#444;6 [6 F4 ^/ f5 A
font-size:14px;
( c) z" C! X6 E" E
}
4 `# A; F1 c* \8 T5 t5 `' `
h3{
! o$ @2 {: @' `0 E
font-size:60px;( E2 p, u! { {# v/ c; O* r
color:#eee;8 t* J6 |7 \( p& L. l
text-align:center;
: s( \" t5 ]( ~4 |- J# V
padding-top:30px;3 V5 o% q/ `$ R5 n1 |$ A
font-weight:normal;1 J$ @) G$ f6 A" u( W+ E
}: @4 u' R! x! O; z
</style>
; q% ~% g0 r- X" ]7 f* o. w
</head>
2 A' C6 h+ W! K$ K+ P; ~
D/ Q' q- ?# H6 P
<body>) U$ ^7 A! {5 H
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>9 \$ l6 x+ n2 W! ^, f
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
' D6 z* s' T2 k
<canvas width="400" id="canvas2" height="400" ></canvas>& N A h5 T% y! V7 Y3 E
<script>
! \" Z) ?# K1 h. ]! \& J: A5 W' e
var video=document.getElementById('video');# r \; X% v4 B
var canvas=document.getElementById('canvas');
4 j ]. r Q( l! H( l1 @. q, `! x
var canvas2=document.getElementById('canvas2');/ I+ f8 v2 I; r4 R5 H
var context=canvas.getContext('2d');
) ^$ g+ D0 o6 C6 J, \0 s) f
var context2=canvas2.getContext('2d');
% ^& ]# @2 A( a {
function draw(){/ N% W. D0 r8 }# a4 Q3 c
context.drawImage(video,0,0,400,400);* X. u9 t4 k7 V5 U* e
ws.send(canvas.toDataURL('image/jpeg',0.8));
& i& H9 {4 p# o2 c+ P
setTimeout(draw,800);9 n: u# \$ b# A. f! ^
}
, }# ^6 ?- J0 [- N6 `5 K- K
& K0 z3 h3 `5 G( r6 a. d2 s
//客户端跟服务端通讯& v4 V; d) t4 e
if (window.MozWebSocket)
4 b; {2 Q8 R' H8 A$ e* C, k
{# D2 V/ O' `6 I' i; U
ws = new MozWebSocket("ws://182.61.42.187:9501");8 j. S ~# J1 L3 X' Y# Y" X$ ?
} else
8 b2 n8 D- X9 ` ]9 i/ z3 a
{
6 W5 [. h) g* A" `- q- ^
ws = new WebSocket("ws://182.61.42.187:9501");
0 c3 i. {, J; x. n3 U1 k, I l# d
}; u. q; N' v% t, j, q6 E% x
; P: [! i ~% t+ l4 ]
ws.onopen=function(event){/ k, o: c# n5 R3 T, T) w
alert('连接成功');; ^1 s( v' {2 E1 N* Y0 @
ws.binaryType = 'arraybuffer';
* b9 G8 L u$ B; J0 j0 b
draw();
: ~ a. t5 R- P9 `- O
}$ y3 L4 M+ r# c
ws.onmessage=function(event){
" s! T. m) J$ W1 l1 S
//alert(event.data);" J+ h. d5 \0 T4 [" z5 `( O
//ws.send(event.data+"client");
2 y4 N1 l3 c! y4 w+ V
qrCodeImg = new Image();% [! e. V7 X4 }/ t3 j) J0 x
qrCodeImg.src = event.data;
# j2 k4 n# d+ a3 g! H
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
- j/ o& ? u1 }+ f. Z' U; { p
% w4 _. \) ~! B3 Y+ G$ J
}
1 x) h4 j! A' u/ G/ M
ws.onclose=function(event){1 H9 {8 r( j: [7 n$ ]6 X
alert('close');
1 \* X3 m% {3 k; R0 t
}
( l$ J% v9 H+ t
ws.onerror=function(event){) b: t" f5 T8 n3 z9 A7 \" f
alert('error');
6 Q9 p/ w- i2 Q$ s$ }% x
}
. n0 K/ m! P7 `6 Q/ Q7 d+ [
//video，标签模拟视频: r; ~3 n3 X3 E( g2 }) O
' ?, S p" j$ v; V, n8 C
</script>
. D& x) d$ `& }, U
</body>
* `) z+ O$ M2 ~. z+ D. t* B
</html>4 ^$ H! ?; `3 y W$ }" l. u
4 o4 W# n/ P4 L# D

复制代码

客户端：

<html>7 l# v9 z2 |8 k K% {, j$ I
<head>
: J" h) A6 |5 R8 q2 B( y$ U
<meta http-equiv="content-type" content="text/html; charset=utf-8">, P& q v/ W" V; [$ {% B
<title>客户端直播页面</title>
: C7 E& x/ g! V/ k' @# p/ G
</head>: ~/ `9 V4 L; U: T3 a/ A: |% Y
<body>
) O) Q* K8 O7 P Z. }3 ~/ G. o
<img id="receiver" style="width:720px;height:480px">
$ @9 N7 Q# J% k4 w5 W
, [8 \: x. n6 w6 n3 U) b( D
<script type="text/javascript" charset="utf-8">
! S* H p. L* f0 s/ l, e, Z
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");; [- Y8 L1 m* X7 O
var image = document.getElementById('receiver');' \. N' [* _& @# X
receiver_socket.onmessage = function(data) {
, t! _7 V& T( ~# p
console.log(data.data);/ L4 p& A0 K3 Z) k: H. Z
image.src = data.data;
; c" J. J/ ~' R% w1 a: I( ~
}
/ q2 ]: o6 m! {. E0 Z
</script>
! \: e* `. }) z$ Q& G- `, g4 ~
</body>. K U! n- Y: C( p; a$ n9 Y
</html>% B2 h+ O0 v) @5 v N2 E
6 }. {9 S" {/ ]( e8 O7 F

复制代码

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

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

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