swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   4 O) b% B, a' u+ w3 v! H( R, D
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   " P4 X5 t  H: @3 e- @4 R% Q, ]6 I
3. 
   " _' C5 z" J: A
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   5 Y7 K$ Y( L% E) b5 s
6. };
   7 n* w. h0 f# i$ `$ B! ]2 r1 D
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   + ?0 }  c& J& f* v# J. T
9. 
   + J/ ^  `& j5 q9 c3 E: [5 S$ d
10.    var data = e.data;
    4 J: _0 M5 s, G$ l9 ^) v; m
11.    document.getElementById('player').src=data;
    $ ~& `/ q+ i; v6 x
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    $ z3 A* ~" p3 ~2 L% }
15. };
    0 H- K) s9 C) Z% T3 ?: o: t
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   2 M" S' y* s& T+ S
3. 
   
4. 
   4 j9 q% P3 s; ?5 `% W; `  H
5. <script type="text/javascript" charset="utf-8">
   
6. 
   4 E+ Q% k, [) @* q, E# d
7. 
   6 d  m. n" }# I& k
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   : ]" q2 G: X3 F- Z& \
10. 
    ; A9 l+ I3 o$ |, u
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    ' O7 {$ {( Y  L7 G% V
14.    
    
15.     var success = function(stream){
    6 M& x0 c3 q% R! W& g1 x
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    5 m) W8 A+ i5 |6 D+ S$ r# j( Z
18. 
    
19.     socket.onopen = function(){
    1 s$ r5 s0 v2 l. {4 l6 X
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    & G7 R9 M1 B: t9 q$ e
28.                 return setTimeout(draw, 100);
    ' f' v; w. a6 m' ^: a& S% f9 _3 _
29.             } else {
    
30.                 throw e;
    
31.             }
    - r8 r& ]  t: b
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
      I. z  @: I; V+ B* |/ U) B& I
35.         }
    % V8 P( e7 l1 Q9 g
36.         setTimeout(draw, 100);
    # Z  T2 h& T& k3 U8 X! H
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    / `5 ]$ B9 K$ C6 l8 g
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ( U6 j1 {1 R4 N& q* @7 L; m, e: G; w
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   . h$ ^/ B" n' r. w5 j1 p
4. 
   
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. });
   
10. 
    ' K' x7 y& Z5 V8 L# ~
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    4 S: z; ~) X( ^& z; N1 ^
14.     foreach($server->connections as $fd) {
    9 m4 H" O7 t0 {5 o
15.         //返回数据
    8 n& s; Y# x% E$ M0 F' E2 v0 @
16.         $server->push($fd, $frame->data);
    3 y3 S2 ]: R! r8 `
17.     }
    
18. 
    8 i4 j( _  |& O2 ~# O( v$ S* T+ P8 f
19. });
    
20. 
    8 m% h; p' m% A3 d
21. $server->on('close', function ($ser, $fd) {
    ' u( _- _, k; h& ~; O, u! L( W
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    ' Q8 H* q7 R+ u  y9 R
24. 
    & n: b- |# x: T9 P; M$ n9 V
25. $server->start();

复制代码

9 S7 M) F* {" l& t0 J; T

: c+ ]! b( h- ]6 p  \

+ d1 m" x, f) Y
4 z1 q3 t- ~8 V' M8 V+ r

/ P% g9 Y% y: T* d$ }  k( ]