swoole 直播

admin

主要使用 webstocket
3 ~  T2 J/ l. a% |, K上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   5 ~2 `2 p- r9 x0 z5 F
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   $ B. e) w, e$ ^
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    7 }5 u$ t. A1 `; Y% n
14.     console.log("关闭连接");
    
15. };
    0 R8 U3 C/ s$ [! L
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   9 W2 b) T4 W6 v$ L. V- z
6. 
   
7. 
   2 a3 k1 y) P, d- X0 i
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   0 l( Z3 w0 ~# ?/ A: g) G3 p" W' f& b
9.     //socket.send("嗨我登陆了");
   
10. 
    / r9 W& z9 [( Z! J1 ^: Q
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    8 z9 E/ ?$ k) \6 T. r
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    * E5 X# C/ P: h
15.     var success = function(stream){
    4 r8 C; o3 O! _+ V( @: g0 h
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    9 x5 }5 `# q' r$ Y( e
22. 
    6 a  F: C) Q6 ^) Q, g" Y- `8 C. [1 S
23.     var draw = function(){
    ! S8 j( |9 A4 O6 Y' _8 R
24.         try{
    : F% e# V6 s& R: y; P
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
      v+ ^5 Y# o; @1 e7 N4 V
28.                 return setTimeout(draw, 100);
    
29.             } else {
    - E2 K$ b, Y2 }& _
30.                 throw e;
    7 u: E4 c$ _1 |+ L2 @
31.             }
    3 a. i4 o2 }$ u3 d% @
32.         }
    ( o2 X2 C2 }. E  O
33.         if(video.src){
    + H. C+ E! U( D
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    0 F5 j; v. p: Q  m7 u
35.         }
    + g9 B" ?8 \! l0 m' |2 N+ \
36.         setTimeout(draw, 100);
    : H- ~4 |9 c2 x8 K' c
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    % E6 Z  }7 r" y; V1 P& X* A
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    ' j- E: F/ w6 k2 {3 d7 l
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    $ Y" M4 x* s7 D6 k
41. </script>

复制代码

1. php
   0 G! U2 E+ Q; q7 L, d0 R6 o) U3 u
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   : e" L# p+ Q6 c& S8 {7 q
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   / J  o4 V, D" E$ B
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   1 j4 n, I/ ]' J' U# ^5 D) m" G
9. });
   
10. 
    * D  G" S5 ]  y& s$ \' z  h
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    , t* k2 B1 a7 W* |' W! x* u
13.     //循环所有数据
    : Z0 x7 s+ b" _- a! [! k& o
14.     foreach($server->connections as $fd) {
    3 h- x6 h8 p2 Z7 x
15.         //返回数据
    / u% ~. X3 C6 b
16.         $server->push($fd, $frame->data);
    ) D  g( b1 K0 x2 _8 Z4 h
17.     }
    
18. 
    " r# H- S5 l. Y6 q
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    ) ~' G2 w, m1 c, O8 B
22.     echo "用户id: {$fd} 退出\n";
    & S  q% _$ z" Y/ c4 Z) {
23. });
    
24. 
    
25. $server->start();

复制代码

2 m; k8 N1 W: v  |& i
! a4 \& [4 N4 C$ p

' J5 Q1 M6 z: S% _# K* R6 {" Q
+ a' y* j* y7 |
0 e- k: [6 J1 u6 k1 g

) e" g" w2 o1 w4 M
  _2 f1 r! @# V; v( d

& R$ c2 [5 u1 G* Z. J  L& `' @! o( k