swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   2 c/ \9 ?- O  ^3 t$ T
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   7 s6 D* [; K: [. q$ ^
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    / C6 G+ G( D# [3 N4 v( X
11.    document.getElementById('player').src=data;
    
12. };
    . w: p; W% I0 [. w
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    / Q# X, P, H* Z) O6 C
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   8 `% m" o: @: o- t2 K1 k
4. 
   0 _( d1 ?' C# {: S
5. <script type="text/javascript" charset="utf-8">
   
6. 
   $ M* T* y! r( }6 w: j0 |
7. 
   + N# i. L$ u7 [( w- J8 [1 P
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   % h9 u  ]! z3 _( i6 J7 p9 s
9.     //socket.send("嗨我登陆了");
   - s- G4 r9 V1 q
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    8 ]$ v% k4 g1 G6 j) ^, ?
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    8 ^( v: N( h/ V4 \/ C, j. f+ y. L
18. 
    
19.     socket.onopen = function(){
    ( W+ B* q) ]6 H3 A6 u
20.         draw();
    ( r' z0 L4 W0 @# A2 r2 Q
21.     }
    5 ?& s- h; _! |0 @' ]
22. 
    
23.     var draw = function(){
    ; K4 B8 o: b# i: M
24.         try{
    * Q7 {" p& w; l: q
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    ! c2 w1 ^4 m! }
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    9 t5 u* X9 K. ]/ |
28.                 return setTimeout(draw, 100);
    $ S+ c" M+ j9 b3 M( d( F
29.             } else {
    8 p. U/ v# E* B. g" g
30.                 throw e;
    
31.             }
    
32.         }
    ' [, e5 c- j% O( X8 P2 Z1 A
33.         if(video.src){
    3 K" y9 m8 z1 n4 B* d! n
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    3 u0 W$ E4 p9 s7 k9 B5 R  N. Q
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    / Q) p0 I# @$ M% t! s. b* S
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    9 X' c' n% m! @/ [1 n& l" M. }
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    & c% F0 ?- ^0 u3 P! @' Y5 h: L
41. </script>

复制代码

1. php
   
2. 
     ^& k6 o/ L' n, V" f
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   , A! G5 A/ p- C7 [/ ^4 Y
4. 
   8 m: T) e3 E& U) j6 Z" i, ?
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   ' x0 l# S% Y% j+ |4 x
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   % l+ [+ q$ a* z' g7 E+ q; X
8.    // echo "server: handshake success with fd{$request->fd}\n";
   % p9 H8 R* ~7 c6 [- a
9. });
   
10. 
    $ u" p7 l- b, L( c7 V& w* l# `
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    & L8 a) ], a2 m
12. 
    % f4 y: u6 Q5 J2 g6 G3 k- i: d. l7 ~2 F
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    ; \* [. Z* N% g  }; k/ ^/ k
17.     }
    
18. 
    ! v6 x6 ]: }/ v7 P1 r# c
19. });
    . |9 S3 Y# \' j  Z' [  b, d1 ~* M- d$ v' ]
20. 
    $ r+ P4 |8 T8 d5 I; E! |9 i9 m
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    % ]- t7 w5 F/ ^  @1 N, V' g
23. });
    3 d4 {7 X7 K, _
24. 
    
25. $server->start();

复制代码

# ~) v" j# T. h



5 ~+ Y. l. p3 h# f6 P



# k6 p" e8 _" O' \