swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   0 ~, ]$ t+ D' k9 |& E; v% G
5.     console.log("连接成功");
     y& J8 }, w# C. A
6. };
   
7. ws.onmessage = function(e) {
   # ^, R% C3 X0 x" H# s% g
8.    console.log(e);
   8 e8 S/ o+ v" _
9. 
   - ?4 b0 p+ F; o
10.    var data = e.data;
    2 ~, F( s( `6 C. e6 _
11.    document.getElementById('player').src=data;
    
12. };
    + C  P+ R! ]7 E; e
13. ws.onerror = function() {
      u# @- Q2 ^) R% ]6 P7 b$ Z
14.     console.log("关闭连接");
    ) ?; d8 t, j6 J! j% g* w0 a
15. };
    9 S4 T1 r0 _; Z; a" ~' j
16. </script>

复制代码

录像页面

% {3 X( j6 ^% b

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ! z2 G8 ]  q, ?8 N, T+ k5 \2 H
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   * B* T- e' L* I7 e) o* e
6. 
   2 |% r  P- n8 m# e2 T
7. 
   7 t9 v3 U, G. @$ \
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    , s, B' g0 C& A5 ~
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    4 H" h# g5 x/ n% y6 e
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    # Q5 b) @/ b4 H+ v6 b
18. 
    3 n9 X2 k8 a$ q5 p; D
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    
22. 
      u; Y) ~, e! q- j# \
23.     var draw = function(){
    
24.         try{
    - b& ]6 W4 |; j1 _6 P8 j
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    * J) F# l& A0 E* Z5 e
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    ! V: G( C, R. u7 ~5 O
29.             } else {
    
30.                 throw e;
    * S9 r8 ]$ L2 j4 f+ B5 l1 p% {
31.             }
    9 Y5 z( c+ F" a. `0 K1 O6 l" d
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    + A( Z/ z. |; ]
36.         setTimeout(draw, 100);
    & W$ j6 @+ l4 }* u& A/ H2 Y
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    0 j9 M6 C% |: f3 V: b
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   ; c5 r- h. t. \( t$ `
2. 
   7 M8 D5 R1 U& W0 }. _  P5 Y
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   % s! |8 k& K; H+ n9 g& B3 s/ n0 k
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   , o9 M8 J' g; }5 f( S  b
6. 
   ! r! O! t3 a. P* u. p* M
7.     echo "新用户id:{$request->fd}加入了\n";
   ' y2 C# G* ], L' P' D  k
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   . ]/ K2 L8 |3 `  [! Y
10. 
    , r) o( m! d+ S* E( u, U# u
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    / y1 z6 p+ M1 J8 n
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    : D6 V$ {1 F2 T( Y4 [
15.         //返回数据
    ( F# c( _8 G' E! m3 n; w8 z
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    ) D. M) M, }& F- Z/ J* W
19. });
    
20. 
    , u+ ^' n" C% `
21. $server->on('close', function ($ser, $fd) {
      H* N7 Z8 C- _0 {) T  p
22.     echo "用户id: {$fd} 退出\n";
    3 W# |2 |. W3 e0 v# Z6 C
23. });
    
24. 
    + [! h8 {+ k6 [7 O0 n
25. $server->start();

复制代码

( f% I. s; K+ c" Y
$ n' b# ]# O% D9 \
: N6 ?, j/ O3 _; @- b- O; `
$ Z2 H4 g! O( w4 U, p5 V



- [( b7 n8 N3 H9 u( t: ~( T

3 x5 F. M" N% W