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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);2 V( U8 ^0 N$ g4 }8 e% v! k: _
$client=array();
% Q0 ]' @$ ~- B: h9 c) }
$serv->on("open",function($serv,$req)use($client){; v% [7 ?% A; q5 J
//echo 'connect'.$req->fd;: x$ S9 R3 [) K
$client[]=$req;
. |% `% d* c1 { W
//var_dump($client);& B' ` A# w$ y$ X0 A; ~
$serv->push($req->fd,'aa');
& R. i8 @. H. y
});
$ f' v0 G; Z% H7 i
2 k( o6 B" f9 y/ }
$serv->on("message",function($serv,$frame)use ($client){! [: r" h. l# G- `
/*var_dump($frame->data);
: G% Y; \' T X% u: c
foreach($client as $key =>$val){
. K' m1 b1 E, x v) P+ O& b! F
$serv->push($val->fd,'aa');3 _& l4 \6 @$ k+ e& p8 f& P
}*/
& n! R6 S& N! [/ M, i# W
$client=$serv->connection_list();7 M$ |6 e4 N& v
var_dump($client);7 }7 z0 n5 P X* v4 E& r
foreach($client as $key =>$val){
^7 S0 }8 O9 t5 d( ?8 k6 P9 j
if($val!=$frame->fd){
* I. s; \* N( U$ H9 q: i
$serv->push($val,$frame->data);
1 {4 J3 D0 T& y/ g
}% N2 L6 E* f5 A+ p% o# C, B* B
}/ X& g4 H0 Y. `. X0 {
4 d" c: E% V0 x3 p h' J) u% J
});8 I, q3 z! [. b$ w7 k- B5 Y- v+ r* N
$ l2 e4 M" x. `# d3 F+ j
$serv->on("close",function($serv,$fd){
/ n4 S6 N9 U5 k
echo 'close';2 f. h# A, Q! X) E0 U. [
});8 t2 T, u4 W7 p- [
4 F' v5 A4 A8 d! f5 m$ u+ k b8 Z
$serv->start();- ?2 ~3 b- f2 L
. r7 Y1 T& y: ?! {6 Z

复制代码

主播客户端

<!doctype html>. G. w# \/ t) G& D$ \# I1 |
<html>( L+ Z, E# v3 K5 p
<head>& K" ^( r c, h6 Y7 T1 a2 R# y
<meta charset="utf-8">9 D9 B$ v+ Z8 D- z1 \8 i v _
/ w& }4 ~' E# ^$ Q: `8 q( Z& e
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
) g' A' q; g6 J- ]
<title>404</title>
$ e1 I# }2 G/ P6 C$ `3 z
<style>& e! g' j( h h0 }+ |
body{
3 B" B7 a" W1 q8 c5 W9 z3 W
background-color:#444;
+ p$ [% n: j# K1 l
font-size:14px;6 d+ c! s4 j: Q0 O5 f
}
3 V' i* N& Y# }9 @: Z
h3{
4 B+ ?' b3 u* j @) e. ?
font-size:60px;) \6 m5 M' D* ]) i/ M2 I, E3 |
color:#eee;
. j; n( \4 t! `( Q& t6 F
text-align:center;
6 [1 Z" j9 `% O+ j3 ]) n& w, V
padding-top:30px;9 O0 s& k0 C5 u% C* N$ R d
font-weight:normal;
# O5 O* P- D S
}
# m3 W8 J( A4 K& O/ p @: s8 y
</style>2 q8 G- m2 j6 \6 t- D
</head>9 Q9 f2 w6 ^9 d5 y
R! I5 O6 E( P, N
<body>
. G. s7 K9 T) n* l
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>. J! B9 K% y& S: J
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>; h1 a9 E8 j1 D5 y4 A, t, [2 x
<canvas width="400" id="canvas2" height="400" ></canvas>7 z% B# H) k5 \' d! t* }1 ^. A
<script>* n `8 T" q# v7 k4 o. s( J
var video=document.getElementById('video');3 P# h# F* s2 w% Z# K
var canvas=document.getElementById('canvas');
7 l, ?8 a( Q. k8 J- W
var canvas2=document.getElementById('canvas2');
, J C' I0 c4 v/ x2 ?; p
var context=canvas.getContext('2d');
3 a/ h( C! K& ?" `9 S3 `! {4 M
var context2=canvas2.getContext('2d');0 G# ^! S A I* I3 w1 }# T
function draw(){
( f. k( o, K- O+ {
context.drawImage(video,0,0,400,400);3 m$ Z5 S3 D; j* M2 ?+ u8 y
ws.send(canvas.toDataURL('image/jpeg',0.8));
# v; [* b1 a( f7 c3 E3 T
setTimeout(draw,800);* M; V+ J. g( I9 u* c4 _
}
- z5 U+ \, h5 R# j/ u$ W- n
0 Z5 O. b6 d- j& y |# |) r
//客户端跟服务端通讯
$ C$ J8 |7 Z; Q8 h" c
if (window.MozWebSocket)
$ [. U5 I' w. c3 H; ]' v* o, v
{4 l- l! G, Q$ g2 G
ws = new MozWebSocket("ws://182.61.42.187:9501");
D6 P6 a8 Z! a
} else% |- Q3 _4 L$ ~8 `! L. m H( O4 Y
{% o, A8 ~9 M6 n. R k2 z4 X7 E
ws = new WebSocket("ws://182.61.42.187:9501");
+ \) u) a( ?2 ` R
}* D$ X+ ~1 K* U
/ A+ z. ~9 V4 Q/ b4 n/ s% `
ws.onopen=function(event){% V Z2 F; v" i; N" L2 f
alert('连接成功');
# H) z0 u! I7 Y; D" F
ws.binaryType = 'arraybuffer';
6 R0 x2 D0 \. s
draw();
; e6 Z4 z' P6 g/ {$ [' @
}
( [; o0 S R5 C5 [% S
ws.onmessage=function(event){4 s1 Q2 v6 B$ V
//alert(event.data);; p) ^* J! p& q' u
//ws.send(event.data+"client");
& [5 c- X- N7 F' w4 O! h @& P# Y7 m
qrCodeImg = new Image();; S" y5 M" U# _3 ?, }: x
qrCodeImg.src = event.data;
% G# b f" `, E) W* ^6 q& x) K
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
9 y4 B" i5 K5 g T/ ^6 q1 b
; T! w6 \0 q1 B$ l$ F
}( L& X1 e& C- Z V# W
ws.onclose=function(event){
$ Q1 @1 [3 e$ x+ g
alert('close');" }2 s- E0 |/ v2 t$ [/ g
}$ g6 v) y. J* p0 c# o' g
ws.onerror=function(event){
4 g; H2 v# _' `; H
alert('error');9 I' ~5 w# b" r4 s' F0 ]( H8 I
}/ G* f9 I( @2 `
//video，标签模拟视频
% K, \: G, M1 c
' M3 ?: h' v V( x n
</script>- G8 l) x, _; J# k& t! t5 R1 z
</body>
0 M" Q) b0 A9 u& l- B% N" [
</html>1 n1 `1 Q! [# ^& J) I4 p) P, G
4 D* G$ S; R! E- ~

复制代码

客户端：

<html>5 }2 n" D" E5 J; }: Y+ q! {
<head>/ O! r! ?5 X' {/ s: D2 u9 M
<meta http-equiv="content-type" content="text/html; charset=utf-8">: n d5 n5 i* _$ E) Z" _
<title>客户端直播页面</title>4 ] F2 c8 i( J& x
</head>8 E7 x: K+ q/ q3 R
<body>
+ l6 W3 A( S/ C4 A/ I4 o- Q" J
<img id="receiver" style="width:720px;height:480px">
V i9 R5 x$ X/ z6 M' b
. y$ Q8 a- V. r
<script type="text/javascript" charset="utf-8">' q. W2 E% B" t, G1 H
var receiver_socket = new WebSocket("ws://182.61.42.187:9501"); J# B. _/ L( u# q
var image = document.getElementById('receiver');2 o. r+ C5 V6 P2 Z
receiver_socket.onmessage = function(data) {
% s8 t. a& B( P' `, ]% S
console.log(data.data);
) A% K f# f; {# i
image.src = data.data;
; N$ K: i& m/ g5 o* g; L# w' k/ `
}
8 M7 Q9 U- Y: @4 Q% x$ D
</script>
7 y! ]/ \, t! z4 N" a/ b0 [
</body>
/ l1 F7 Z( h: Z/ d
</html>
9 I3 {# E% o6 m2 v; E2 u f7 Q
6 G" N) n; Z; z0 z8 B' d! U

复制代码

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

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

浏览过的版块

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

浏览过的版块

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