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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);( [ l6 N* t/ g# {
$client=array();
1 N; n, z5 a9 U
$serv->on("open",function($serv,$req)use($client){0 A, u5 f6 @$ p0 E9 q8 n( q" O- l
//echo 'connect'.$req->fd;- _0 i7 r9 ^$ |) Y% Z
$client[]=$req;
# E1 U+ S# O7 k9 b1 f( O' u
//var_dump($client);
8 I- u/ G, |9 Z- T+ |3 f
$serv->push($req->fd,'aa');
: F% E3 V6 u( K
});
# G6 |1 r/ Z, I
' V$ h2 t1 _$ V! s+ l. Z
$serv->on("message",function($serv,$frame)use ($client){0 M" m2 l M+ p/ I3 K5 l8 m
/*var_dump($frame->data);
7 m8 e3 E* y% i
foreach($client as $key =>$val){! g0 b& \# @( [5 O
$serv->push($val->fd,'aa');/ r0 n! m" K9 Z, u* B! J! u
}*/% d# V% p' F/ n+ d/ a
$client=$serv->connection_list();- [ F% l: s$ E4 q" e# F6 \2 E/ e
var_dump($client);5 u" q+ b8 m: i0 z$ j, a
foreach($client as $key =>$val){7 A, U) j- D6 q" [1 L$ n! c% u
if($val!=$frame->fd){
! N0 _' n* c4 _/ T8 b9 y
$serv->push($val,$frame->data);
$ W; L7 h/ Y; T8 b5 E# B2 ?& z* K
}
" b0 h4 ?7 L) g/ r* g1 G& o( n* g
}. s0 M7 g3 A. P% d
# J3 i6 M6 e/ P( x9 G. T
});
4 y e7 _! s; V
# o% \6 P c- p6 w3 }; z
$serv->on("close",function($serv,$fd){
: @5 w- @7 L! `4 b; h" K- ^ N% t2 X
echo 'close';
6 w5 }+ b, f/ @
});
9 G8 S" t+ p c( M
) s" R% E* Y7 S( B( M7 r, n: x4 C
$serv->start();
2 S* C- h% q9 [( \
' S+ n6 r8 g% N' ]2 V

复制代码

主播客户端

<!doctype html>
7 S% h' m6 n# [2 s
<html>
- d! W' W/ S: X0 ~8 v1 P: U
<head>& P" x1 m' t4 v" R+ n
<meta charset="utf-8">
& I# I. G* h+ ]
- D( h9 N: Z& J! s$ n1 i4 d m( G
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"># D B9 v9 p; Y8 b# S
<title>404</title>
4 A3 [6 q R) f6 g
<style>
5 \9 t' }$ L; I5 }6 t, j
body{
( w8 H* P' w1 B+ w
background-color:#444;8 m+ A& V6 s- O
font-size:14px;
) M x/ K# y2 \0 x5 u, h; q7 ^
}2 Y% [, P, {! h' O, A7 @
h3{4 _7 M/ T. c3 _ z' @ x F1 U
font-size:60px;
4 r( F' u, ?6 `: l
color:#eee;
) ~: P' R3 ~5 u: b) e, O
text-align:center;3 N! Q+ D* Z8 r% q) @; V
padding-top:30px;
0 o* {2 X1 d. Q2 ?$ \
font-weight:normal;
+ L. @1 c' N" o" w
}; J2 ~ `- _$ D% L+ E0 @
</style>
7 \+ t" z# `# i0 C/ e- m7 |
</head>
9 ?# C8 ?6 H H' ]; L" F2 s5 @0 ^
4 S7 `" n* q& C$ @+ _4 B
<body>! t! a/ Q; L3 Z3 A
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
# L9 f% \* b' s$ O
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>& q4 I* @' E4 M# \# X G
<canvas width="400" id="canvas2" height="400" ></canvas>
<script>) g+ _% K, A3 `$ T" i, r
var video=document.getElementById('video');7 `+ ~' s+ B6 Y! s% V
var canvas=document.getElementById('canvas');
# V8 ~4 D! v Z* q- H$ y' n
var canvas2=document.getElementById('canvas2');
2 B4 U9 p9 o1 L$ E' w
var context=canvas.getContext('2d');8 t _+ b/ B M3 C& E* {9 w. o' l
var context2=canvas2.getContext('2d');$ t( v# s [0 A5 q
function draw(){
& Z+ H# ^1 H0 [% M x/ v
context.drawImage(video,0,0,400,400);
7 N9 M [# d# Y) g. Q
ws.send(canvas.toDataURL('image/jpeg',0.8));7 i3 I- ^- }. A1 p4 G+ p0 ?
setTimeout(draw,800);
8 D9 Y4 g& [. i9 V' ^" n8 f d1 |
}4 l& `8 G2 i# C
6 {. J% o% ^; r: o- |9 [+ C
//客户端跟服务端通讯3 R7 t, @. Q0 N1 Q: Y3 h; ^
if (window.MozWebSocket); z ~. v- J. Y' _4 _& U. S
{- m+ V. v O2 b4 D
ws = new MozWebSocket("ws://182.61.42.187:9501");
M8 W4 j2 ?1 P' @/ b5 t1 O# ~, ]* ~
} else
7 B) L5 Z9 l: g/ H4 v$ \, Z
{
! v/ u' a9 [" u1 [9 E5 c1 \6 E
ws = new WebSocket("ws://182.61.42.187:9501");- R7 B8 N3 k3 S
}
& Q$ O G6 S6 V) \' i9 T( X) @
m1 L+ j% S( T# Y) J
ws.onopen=function(event){- f3 d% @- D6 e! F
alert('连接成功');8 }7 C$ F4 @6 Z! j3 V! o' ?' `
ws.binaryType = 'arraybuffer';5 H/ a+ ~* \5 A: X
draw();
# S" T6 h2 {: ] j6 j: z
}
( Q& P4 P6 t+ @
ws.onmessage=function(event){
& a4 K* |. e$ c; p6 k1 \
//alert(event.data);6 R& T/ z: M* k
//ws.send(event.data+"client");
) {7 u9 b% }. i+ J
qrCodeImg = new Image();
7 ^! P8 [/ r# V7 y6 [0 Y
qrCodeImg.src = event.data;
( j) J8 ^# j4 C- t
context2.drawImage(qrCodeImg, 0, 0, 400, 400);) ^# \! ]" u. I/ B2 F" Y$ Q' h
' R$ [! v" k9 [- ~/ K
}7 f5 m+ m% i, ^5 X: M6 Z
ws.onclose=function(event){
* l1 g) l8 d, [+ P7 X+ |1 \
alert('close');
$ ]$ ], P+ H- q( [
}! R( e; q. J! F% V
ws.onerror=function(event){/ ^# O% |* K& L
alert('error');3 k5 H; _; Q" m- ~7 j! X
}4 y3 `+ _$ B5 |+ i1 G
//video，标签模拟视频
5 L0 [% ]' x# v: k3 V
+ q) e! x7 Z2 ] h- \5 ~% D
</script>5 h: t b. I: [
</body>/ k( o8 D( ]& [2 C" F" w
</html>
, u" M ^& ?! r. |( c
/ L8 C0 Z. |8 p( [* r

复制代码

客户端：

<html>
7 ^" h% k- e L& s8 n x
<head>
7 H" T% V: Y* e4 D
<meta http-equiv="content-type" content="text/html; charset=utf-8">$ P- z9 k/ E' R, E) G/ A3 W8 m
<title>客户端直播页面</title>! K' d8 W" h! m6 {, t# G
</head>
$ a+ ]$ I6 G/ g& j' k4 E
<body>
8 E9 v o# n: ?# k' t
<img id="receiver" style="width:720px;height:480px">
; d7 E5 J, _4 ~- u& f" {7 }' Q
0 a2 J5 Y0 I R7 g# G: I
<script type="text/javascript" charset="utf-8">
" \% O4 i- g" T0 C
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
0 ?9 ?7 e, ?4 Y* m1 z
var image = document.getElementById('receiver');
4 T6 p% y$ J0 V9 f
receiver_socket.onmessage = function(data) {8 c6 ~" Z: J9 b
console.log(data.data);* B4 [& a7 n" z- l2 {5 d
image.src = data.data;0 `2 l* n6 \: p5 \; H6 {7 N+ K( g
}
# M: b7 X& c* e- b7 p2 h. O
</script>
9 y# }: V# A+ B# S+ H9 x9 m. x$ |
</body>" b' C/ w. j. J, o
</html>+ B4 M. ]- b" v: s% \
# m9 x& f) I' H

复制代码

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

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

浏览过的版块

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

浏览过的版块

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