swoole 直播

admin

主要使用 webstocket
9 t( Z1 O# _0 U' ^1 e1 q" J$ x# [4 H上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
     x- i& m3 {4 U& b
3. 
   . r$ r& h$ F8 N1 \" H2 _0 W! r
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   6 ]- Q2 n) B7 n( Y
8.    console.log(e);
   . S+ m* b/ c, B- n1 I. p' N
9. 
   
10.    var data = e.data;
    0 m( u7 l) h# r! |8 y' w( C& k* B
11.    document.getElementById('player').src=data;
    
12. };
    $ h3 z# g' r! s+ X- N
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

7 q1 |" P) f$ v

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   2 A  ]% W, Z3 h& s
4. 
   % u+ X- R7 @4 o% `
5. <script type="text/javascript" charset="utf-8">
   , v0 X# j% {% g2 n
6. 
   
7. 
   " X% C$ t( C8 Q9 v8 d
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
     v/ L7 u1 p5 X2 k: k+ [( @
10. 
    : W" x  z. h4 `! E" R
11.     var back = document.getElementById('output');
    0 r, h& E* ^. ], S& s- b
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    7 q$ I0 H2 y7 j  t8 P/ P0 b
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    2 k/ k3 |' \) ]1 }( k
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    $ f8 C; ^# A. F% F& X
22. 
    
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    3 @4 A' J) Z( @9 H: L% R
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    7 x- t6 Y9 d4 z: X" l% I; j
30.                 throw e;
    
31.             }
    , P3 ~; u  z& W
32.         }
    
33.         if(video.src){
    % j& z& `% `1 j4 k
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    7 w5 X' G& @! Y5 M
36.         setTimeout(draw, 100);
    
37.     }
    0 w/ Y2 G( [1 z1 E, N  t2 o9 D
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    0 [2 i  U  ?. E9 C
41. </script>

复制代码

1. php
   ! R. I0 f) f8 j& l- h/ |" @
2. 
   : S, ?* |' J' M
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   7 x  {9 }7 r/ ^
4. 
   0 U; O& N0 j6 o# E9 t
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   9 J. R9 M# y) d( w6 O
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    . l: i4 ?1 d. [0 a- _( c
12. 
    4 D& @9 y4 H; Q  E( X
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    + N/ h' T  [" ~- H$ M
18. 
    
19. });
      n: \. ~& K2 A, x9 q% c/ D" S7 T! g
20. 
    ! u4 C# g1 g8 a3 G
21. $server->on('close', function ($ser, $fd) {
    5 \3 U: H0 a# o/ l( ]) P
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    : d+ T3 C2 ?( P( a
24. 
    
25. $server->start();

复制代码

9 E) l- b( X$ a1 @/ j$ i/ A
4 e. X( E" H8 z& B+ j6 J5 \


; q+ _7 S& K3 \
4 b% _) k: e3 e% d7 D9 M

, Q- Z1 x7 J" d1 _6 L3 h1 r
8 d0 G; x/ w  g2 ?
+ k2 H$ p1 W; F$ p7 l