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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);* Y* {3 a# a8 F& m! M, K
$client=array();
; g. o+ r3 C8 _% v& \1 a0 r
$serv->on("open",function($serv,$req)use($client){& ^; M% r% Y3 V8 T
//echo 'connect'.$req->fd;) R# O0 L: U h) B) R3 t9 f5 O
$client[]=$req;
6 Z+ R/ G4 [2 K! E5 E4 r
//var_dump($client);
$serv->push($req->fd,'aa');2 C6 B) ?" `# M% l1 l/ b
});2 [4 C$ _$ y( a9 h5 y
8 Z5 e% D: T4 a9 t/ _
$serv->on("message",function($serv,$frame)use ($client){# s2 E8 ]2 v3 a+ F
/*var_dump($frame->data);
4 ^% X8 N* C% Z/ h/ W7 Q) O! y4 Z
foreach($client as $key =>$val){: ]2 t- M( b; o; Z9 J
$serv->push($val->fd,'aa');" S+ h+ ^/ s, d5 t1 k
}*/! b: K2 b2 r' Y# K
$client=$serv->connection_list();1 K! ?8 I0 A9 t. I* a
var_dump($client);* T3 g$ ~$ H; h, q* Y# ?. \9 ^3 S
foreach($client as $key =>$val){! \1 ?- o+ x" [
if($val!=$frame->fd){
5 U7 _- s- G- ~6 ~3 d/ ~
$serv->push($val,$frame->data);4 x$ Y: m, d8 @7 P. ^& O/ K. s
}; k* C: \/ }7 Z1 i
}
3 u3 z" B+ H5 ~5 H4 d
7 Q& l# E- c" \$ R
});
, S6 \) `- g4 @7 Q2 z8 ]. w
& P& O& T$ D6 Q( j
$serv->on("close",function($serv,$fd){/ V* z8 O& j5 B3 s7 ]5 `, ^
echo 'close';. K8 Y7 s9 l1 ?2 k, o
});' B# w7 B$ P9 F, z9 E' c! m. d: P
$ u$ J. R; R: p$ M5 i- B2 J
$serv->start();& F, _% ]4 @5 d5 h6 i, C0 C
$ h4 \7 l! R! j/ E! v

复制代码

主播客户端

<!doctype html>
6 `4 q) P+ G6 S5 s0 [. Y
<html>
/ x: S3 F @# d* T/ S8 X
<head>
" A# k; `. L9 N: E _% c; c ^7 M
<meta charset="utf-8">
& j" N* L3 B; E) [" n4 Z
1 D& U$ V7 i; R6 _. U& z
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. f4 p- g' E! R
<title>404</title># u: N% z L7 C' M" B |% L
<style>4 c! a4 p6 V. z: _% B5 L8 D" o+ P/ _5 L) W
body{
$ |3 ?9 w# {9 \0 n0 n; P0 T
background-color:#444;
/ T6 K9 \6 j# a# B& U% ]
font-size:14px;( K) |# [- Y- n) h2 `: V6 p
}6 S3 K9 r5 j, E+ \: K
h3{- H% P8 C4 c) M( E+ e3 a
font-size:60px;; I) o" o- P6 O& ~
color:#eee;
% N- q/ b# e3 f" z; v
text-align:center;
6 m) O1 v5 z( l6 {, z
padding-top:30px;! C' w0 O: C* o: X
font-weight:normal;
' r8 g( P* K- X+ V
}
& ?- q' N" E0 D0 l
</style>. N. _4 Q' W7 A
</head>
* _, h* U. n2 f0 e8 I
+ `) t4 p& i. z$ {/ y) K$ x
<body>
* t" ~" k# M- G' ~- p
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
5 w2 k2 x' }! X# t. R
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>3 [2 }/ P9 n, P# z7 P' Q8 S; h3 h
<canvas width="400" id="canvas2" height="400" ></canvas>, n7 l1 o! Z% j! A/ p/ k- Z3 j
<script>& V) _) ?# ] d+ ^- j- Y$ j+ t1 u3 R
var video=document.getElementById('video');
4 D$ x/ z/ C$ E4 n( s
var canvas=document.getElementById('canvas');
0 h7 T% w( f; U( z; k" U
var canvas2=document.getElementById('canvas2');: R) m" e9 d5 E6 q O
var context=canvas.getContext('2d');
) V6 M+ }1 o' `+ D* F1 q: w
var context2=canvas2.getContext('2d');
2 \% v) |- F5 d' P- t
function draw(){
% ~5 V, s1 E- e7 J! P4 A) R2 c) X) W
context.drawImage(video,0,0,400,400);5 Q* l# n" V+ M ~
ws.send(canvas.toDataURL('image/jpeg',0.8));
7 L2 R2 E* t3 Y; U) Y
setTimeout(draw,800);, U6 M) C: W v# R( D2 w; ?- z
}
$ a: Y# z c3 H: z! S8 p
, U/ L, I2 L' n3 X I
//客户端跟服务端通讯
/ j2 T. ~# E8 T
if (window.MozWebSocket)9 O' Q0 F' `$ W; n9 E6 u) n0 S
{
- R4 u6 a" U2 m2 N; l
ws = new MozWebSocket("ws://182.61.42.187:9501");
- T& {4 O5 n$ t, n6 E' Z/ S
} else) L! V5 v* ]; Q; Y+ h/ g x, x$ w
{
# y' ~$ T+ @) i. \! v7 l
ws = new WebSocket("ws://182.61.42.187:9501");
7 Q& b& Q% R5 V
}
0 A- Y. j P/ T
. G% E1 L- E" \" f+ b" H/ w
ws.onopen=function(event){7 O6 e! p0 q! D* f# ?6 b; K9 W1 ?
alert('连接成功');
$ w9 k# T1 O" H. n2 N
ws.binaryType = 'arraybuffer';& @4 r e" a4 X5 T) v2 ^6 b
draw(); R7 B3 M- Z, S! ^
}
6 T P" i/ T1 W8 d
ws.onmessage=function(event){( y6 o2 C% H3 j- z$ Z( A- H
//alert(event.data);( D8 h! E* u7 M+ j) {
//ws.send(event.data+"client");
& c* B( O* B) }2 l6 s9 X
qrCodeImg = new Image();1 l/ [, J, o# q( Q) b
qrCodeImg.src = event.data;
8 h0 e: v- B5 @4 Y. q5 c; m( ^
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
% H5 b/ W% E. F1 F- d5 w6 _5 T# E
/ t7 X8 H! r! x+ F/ c, A
}
1 _6 K0 X$ s/ m% a$ D% ^
ws.onclose=function(event){$ _& X- r/ j. g- m
alert('close');
3 c. M! G# _3 Z( G
}8 M+ _7 | U6 L2 R( d
ws.onerror=function(event){% U8 w( m- ]. _) E0 S2 m w8 }* _
alert('error');9 T& Z, |( F7 l, W4 Y
}3 U# @7 V0 K( Z; g: ]! J# d4 B/ O
//video，标签模拟视频) B5 A$ a8 B1 j0 T2 P5 B3 ?# D/ ]
9 b5 K/ n$ p' m. c( U+ i
</script>
% L/ g, u& V' V1 C x% @' S
</body>3 ^8 Y3 }* o, h" d
</html>5 y2 k! f: I/ @! `( |
2 x$ c0 @, o2 r1 ?, t7 {" s- }

复制代码

客户端：

<html>6 c$ X& S+ {+ g/ a
<head>6 w0 b8 ?( m+ A) i
<meta http-equiv="content-type" content="text/html; charset=utf-8">* s- F) e0 r# s& Z- b
<title>客户端直播页面</title>6 c# F2 P& L: E* N5 B5 a; I" |
</head>+ o. ~, C# v/ d
<body>: B% R% d. S9 m) N0 H
<img id="receiver" style="width:720px;height:480px">
! ]: y4 b2 M( |) [1 k
; E8 D6 n4 B) y# h) r | J
<script type="text/javascript" charset="utf-8">, J# O& ] X7 ?9 w# G2 C3 A1 I
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 h8 C7 P0 V! x2 x! s: m8 o5 l
var image = document.getElementById('receiver');8 o2 } T% L1 D% y& L+ k; n; s b" D
receiver_socket.onmessage = function(data) {
; d2 s" X X/ c3 a
console.log(data.data);0 C4 N, c" D3 I) u
image.src = data.data;+ r( O5 [2 B. v# U. q1 w' J
}4 f% M# I ]. j5 B; I+ i @
</script>4 P' f6 `; {2 Y
</body>1 G/ @+ F. C6 n. {
</html>0 f! m J ~0 }1 X) o- y
0 L- \! ?& H7 }" q/ \: A! M' R2 X

复制代码

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

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

浏览过的版块

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

浏览过的版块

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