swoole 直播

admin

主要使用 webstocket
" m* n# Z! v2 j5 C上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   4 Z3 g) w8 P3 j( [( U% M- L  K
3. 
   7 l" Z+ C, F5 k! _0 ^& d9 l& V( Z. ]
4. ws.onopen = function() {
   # o( P3 ?3 g) {4 t! k
5.     console.log("连接成功");
   + V0 G4 r: e& A& g3 f( o6 s: f
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   ; _: T2 ]  X, I  g/ j  n
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    & c, a# y8 c) t6 q, Y! ^
12. };
    2 b  D& H5 Z! Z) w
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    # Y/ a  z4 {/ v& d# B
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ) d. {4 E- r* S, x7 @8 ~
3. 
   0 r) F. k3 g. y& r. \) M- g
4. 
   
5. <script type="text/javascript" charset="utf-8">
   4 g3 r' F& i( B1 S- ~
6. 
   
7. 
   ; m# M6 B! |' O1 B1 u* l
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
     W* B  I" U4 S9 Q4 p4 j
9.     //socket.send("嗨我登陆了");
   ! a5 M0 r' b3 z6 G1 |1 ~
10. 
    - R' t1 b8 H, M8 g$ k
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
      o0 W& M. y" J: b
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    ( @% @1 s  r& Z7 n
16.         video.src = window.URL.createObjectURL(stream);
    ( ?+ {0 p4 \( f- ^( m
17.     }
    
18. 
    
19.     socket.onopen = function(){
    0 }, z  A$ C' {5 A. @
20.         draw();
    
21.     }
    % {8 V9 e* g9 L2 b
22. 
    
23.     var draw = function(){
    - ~# \1 p2 f5 e- Q1 D$ X  D
24.         try{
    4 _1 j, y: Q" c+ |7 Y) [! p
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    5 m( x8 |+ V; o6 _' ^! y9 s% W- E9 d
26.         }catch(e){
    - j9 j) I# _( y& H% f$ e0 p
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    6 K/ v. c# X! m. Q( w+ E
28.                 return setTimeout(draw, 100);
    
29.             } else {
    + |5 J; l" @; h4 D
30.                 throw e;
    
31.             }
    / J+ M( D9 V0 v! V) I& H
32.         }
    ; u" N3 G5 @9 c1 ]/ t
33.         if(video.src){
    ; q" s5 E5 @/ z& J9 Z8 H
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    " G  K/ j  a4 }& V  B7 O7 Y
36.         setTimeout(draw, 100);
    2 T& ~! w; A% i: s5 Q, G# f/ ?, {
37.     }
    7 O# E' ^3 n; c- ^4 b5 J+ ]0 p! {" `
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    ) j% S3 S* D9 o
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    % ?% i% _/ N. m2 y* f
41. </script>

复制代码

1. php
   
2. 
   1 a1 o/ T$ ~' s$ O  E
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   % C( |: A  Z$ ~. \4 v) ^2 a
4. 
   7 `& p! `) F( x6 y4 C
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   , u) x7 ?/ k0 S6 ]# H; ~9 Y( Z+ i* b
7.     echo "新用户id:{$request->fd}加入了\n";
   . }/ T( q# u4 C; a) d/ ]+ w0 p
8.    // echo "server: handshake success with fd{$request->fd}\n";
   & F* P; n; x' R3 u
9. });
   
10. 
    # D! n) o/ }4 w: \8 Y) e7 ^
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    ! }3 J4 T: N6 Q* M4 h
16.         $server->push($fd, $frame->data);
    6 q' w& o) S) k; s8 t  Q
17.     }
    
18. 
    
19. });
    . w+ @' X) `8 R: Z  h5 l8 X
20. 
    * P! o, T& C4 u6 H; \; ?
21. $server->on('close', function ($ser, $fd) {
    7 D0 Z& [5 V: G7 `4 j  X
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    0 N! w- l- P% U$ e* W$ r. A$ a! r% |8 K8 Z
24. 
    9 \) C1 `# h1 |+ l7 n' g
25. $server->start();

复制代码

, B, a) V# U2 I; n; Y




4 }- u/ M, y6 n% K
! v2 y" D- {/ k) u, J: ?0 ], d



" I- Q3 u0 U7 O3 b9 ^# l1 ^
$ J! Q9 I# f5 L3 i- t1 }