管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
服务器代码$ l' L, t, P: {! S, K/ n5 f& L$ s
- $serv=new swoole_websocket_server("0.0.0.0",9501);' k. \, s5 [+ {$ d& \% g, V6 G8 M
- $client=array();1 ^" `5 ^8 U& ]! o
- $serv->on("open",function($serv,$req)use($client){9 ~( v8 o1 `: }1 F( P K
- //echo 'connect'.$req->fd;
6 w# i- [4 p+ k9 y - $client[]=$req;0 k# C8 v# Q% d- H
- //var_dump($client);3 ?' g9 u, U8 A8 B6 m0 S8 k
- $serv->push($req->fd,'aa');7 L0 l, ?* J, O7 d7 P+ z) p
- });
: e. V. k) T+ R6 O- S d% c' s
& A( k: z" r& W' G/ D8 s- $serv->on("message",function($serv,$frame)use ($client){
% r7 Z8 v* {" f - /*var_dump($frame->data);9 O; J! V( U1 g* m: F5 \
- foreach($client as $key =>$val){
4 ?: U& @; O" u( p6 E- L2 w - $serv->push($val->fd,'aa');
l2 u ` G, \3 I - }*/( S1 b3 s7 \1 x3 ~% c" h
- $client=$serv->connection_list();
- O7 B; H1 X$ L9 y% l' F- O# J - var_dump($client);$ Y+ ~. o1 S9 y+ X/ ^
- foreach($client as $key =>$val){& U$ H1 H; Q. k1 t0 ~- ?
- if($val!=$frame->fd){) J) v1 K# C* s3 E3 `. E( p
- $serv->push($val,$frame->data);
/ W+ l' q( z' P0 M( {: l, m - }
- y, N" L: {' ?. e8 N( n - }
$ W) \) z8 Y' r8 a% ~, q, _" Z9 C -
# W4 [. X Q$ i: h4 h) h - });' \& S1 _5 c% \1 r% ] Q, l: T$ C W
- ; I7 Y# ~5 f! \! {$ p
- $serv->on("close",function($serv,$fd){
2 v7 V2 a1 A8 j* _9 a/ B9 `7 M - echo 'close';
9 y* C0 f" ?# Y. p9 M/ M1 X, a' d - });4 Z& V) Y: }$ s! P# }, N
- ( Y0 m; p1 n e2 v) C8 }9 A3 g# f
- $serv->start();& I* }: W+ j7 O% A5 y5 g
- ' l, b' V/ b; S
复制代码 主播客户端
+ [1 ^, H! L& S- v, u( _- <!doctype html>" [$ h4 L' x. ^+ H
- <html>0 |" `5 I! z# ~5 ~* T: f- f$ S* H
- <head>
* h: ], Y7 o/ T9 ^4 t( z - <meta charset="utf-8">
1 s/ ^' b8 H# C8 V! Y: K
9 {8 s# b% w0 c" T- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">! B' m: X! K* i9 Z6 x0 h0 i
- <title>404</title>
, [$ i" ]# U6 j, p# ? - <style>
$ e! u) _9 q& K' p7 P. @& n - body{
/ }+ Z+ A/ n ~ - background-color:#444;$ v5 u0 U: w4 O9 h
- font-size:14px;1 [% @1 q7 g8 z7 X- X
- }
1 N" d. {" F0 `, H/ ?+ v; k - h3{ t& }, `5 B _$ f5 V7 T1 _' C/ B
- font-size:60px;
* d! `/ ?9 l- \ - color:#eee; i: O6 m- {: T& J8 U0 a$ V9 v+ G, L3 p. T
- text-align:center;! l/ u' ^; ^- k7 T/ u
- padding-top:30px;
P. r/ h; K! J2 Q7 O - font-weight:normal;
- {- }1 R# \7 c+ ~8 W, ]3 Y, c) i - }
& g9 D* @2 j4 z5 u5 S - </style>
( e: p/ N' }4 _0 d6 | - </head>
% Y9 A! ] j7 P: ^/ T8 J
: M8 A6 q& A, \- <body>
8 _$ I$ k- O- @3 {! \/ @# l* ~1 w - <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video> _ s9 n9 N, E, G9 T
- <canvas width="400" id="canvas" height="400" style="display:none"></canvas># R+ z o) |( j8 Q x3 Q1 I
- <canvas width="400" id="canvas2" height="400" ></canvas>" r J/ p' e; L6 W( \
- <script>' g! T0 n, |* |" R
- var video=document.getElementById('video');/ c+ {1 H8 ^& b+ Y7 ?
- var canvas=document.getElementById('canvas');
, t$ _' i0 h' O" y q - var canvas2=document.getElementById('canvas2');
8 T4 a" v' t+ C, k! L2 O, U# X* D! F- J - var context=canvas.getContext('2d');5 L/ g/ h6 h1 L! p+ J! k$ R3 s
- var context2=canvas2.getContext('2d');
' S1 F+ Z; H1 e) Z. L - function draw(){
( q4 C: K3 G/ N4 q* T; N! F - context.drawImage(video,0,0,400,400);
) N1 I$ G4 ^1 x% b' I" r, U - ws.send(canvas.toDataURL('image/jpeg',0.8));
, \5 n3 B2 ~5 H/ \/ f. W$ u8 u: v - setTimeout(draw,800);9 `9 z! D8 j- D2 S7 i
- }
* _5 B$ b4 w2 f; b3 A
7 t0 h% b* w. {/ P0 Q- //客户端跟服务端通讯+ i& m: [9 I) x7 V
- if (window.MozWebSocket), `: r: G5 Z8 B" o$ c# u
- {
3 t4 ]" w8 o$ l" C' ~5 w" L: Z7 Z2 C - ws = new MozWebSocket("ws://182.61.42.187:9501");
. V, D% e" C/ ]& W+ X; _ ` - } else/ W7 n+ f+ L, ]% C% Q8 q/ P; p
- {
1 x- g8 \9 B! y; w, j - ws = new WebSocket("ws://182.61.42.187:9501");3 j- {8 e; a* q! @! e) q9 A k) G1 s
- }* |# b9 ]2 h M. V, [. c1 ?
- % p. g% X8 A4 u3 f- w0 f4 B
- ws.onopen=function(event){# O2 y2 A' c2 k3 S" Z1 `, t
- alert('连接成功');) `8 Y% E+ ?" s8 i: S% h# o3 f4 z
- ws.binaryType = 'arraybuffer';
5 q, x% D, g- d - draw();
6 H% M) D' H8 o3 a5 T! G! w* [ - }
( ]9 y, t0 b+ B* f5 W9 [9 |. }! S# d5 K - ws.onmessage=function(event){& X( i0 X7 y. ]: E
- //alert(event.data);
k; `' v1 x% P0 B0 k" {( d5 @ - //ws.send(event.data+"client");
4 {" E+ F- r7 Q/ y7 {) x - qrCodeImg = new Image();0 A* v# h( a; k+ A" ~
- qrCodeImg.src = event.data;( C% p7 `7 N. B
- context2.drawImage(qrCodeImg, 0, 0, 400, 400);
* ~- c, c! o1 }* ?. F - 3 W4 @; R% b8 D7 i4 J+ ?
- }: B: {7 R1 Z0 W
- ws.onclose=function(event){
# T& o4 N3 ~: q/ F: q1 N7 G - alert('close');
" ~. y1 w/ Q# Z. a1 B) R% C2 A - }2 ^: y$ h" R/ w5 Z
- ws.onerror=function(event){
3 g+ h, q! W5 ^ - alert('error');. k1 ]5 E9 H- [ M
- }
/ |1 m! @5 g' ^ - //video,标签模拟视频1 E/ y! Y! w0 Z2 Y8 p+ t" Y: P
- ( U; ?" [( M. F9 V2 ?/ o
- </script>
: |) z0 h9 {, F2 V, } - </body>
! F- g3 b: [' v# {$ E' N% l, H6 X - </html>
0 ?" H) M. C8 g, Q9 V0 l - , s+ x) b1 L, m2 j4 _
复制代码 客户端:
. o% G0 i: M% \- <html>
' p: i3 w4 w+ O - <head>6 ^9 U0 e+ |% Z$ H% }) X W
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
6 W; g1 K+ O! L8 O8 F4 F8 z - <title>客户端直播页面</title>
; V- g7 h; ]1 |* s4 P! y# y/ h" k5 p( b - </head>7 E; ?) n% q& ~; e0 K B# v: V
- <body>5 C" k1 q# w4 O/ z! k
- <img id="receiver" style="width:720px;height:480px">
( H' I9 N9 }- v& D+ } - 6 n7 X' @9 r# F9 n2 Z8 i" X
- <script type="text/javascript" charset="utf-8">
5 r/ X! o7 y) Q' ~, I - var receiver_socket = new WebSocket("ws://182.61.42.187:9501");" k) B7 E! O( H
- var image = document.getElementById('receiver');
0 g2 G4 t2 m1 d" q; a - receiver_socket.onmessage = function(data) {
8 m; x! u! _5 @ - console.log(data.data);
% I' I6 {5 g+ x+ [8 A - image.src = data.data;
1 B" S l8 A6 ~' G+ D7 W5 f - }+ a0 { e' B3 r- Z) L
- </script>/ ?8 S) |9 @) j Y D4 [6 t
- </body>
+ Y) o( {3 [) _! B) u - </html>) o% R: A- M, b/ E- a* u$ f5 {7 I! W
- : s* v2 c B1 R: ?/ b
复制代码
) }, u5 Z. V3 Q9 ^5 F- W1 k1 t3 o) |! A* G W
- e% l7 R+ R: @" e9 I3 l
; {, P) {( ^% Z+ m8 k
5 \" d+ j2 a" P
/ r3 P$ b; [; e5 a/ G. i' j2 d |
|