swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   9 b% _1 s1 O; e9 i# U
3. 
   
4. ws.onopen = function() {
   * W/ F& z2 `' V2 G4 ^5 a' Y
5.     console.log("连接成功");
   7 [0 E, S! W9 \5 k
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   3 g6 D3 n$ {2 \: |  F/ W$ b8 L) \
9. 
     ?( ]5 y! p7 q& b
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    * Z( I9 A3 ^% C
12. };
    
13. ws.onerror = function() {
    8 K+ X, k& ~/ t& Y/ N  V! G
14.     console.log("关闭连接");
    
15. };
    7 Y4 U9 U7 x: N# q
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   - U1 J7 A% W; v  R& m
2. 
   
3. 
   ( J& n  L( A! \' C6 |, L+ ]& Z
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   : i1 t" o- Q7 x
9.     //socket.send("嗨我登陆了");
     w, B2 M3 S! f* s; p# R9 V- d
10. 
    
11.     var back = document.getElementById('output');
    ' V7 h, D2 B9 Z& d! `( e/ L
12.     var backcontext = back.getContext('2d');
    2 ?  _* Z0 @1 C) o
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    / D9 O0 e) F! o1 d6 L! I% p% s
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    0 H9 ]7 Y5 j. u  b( N4 M
17.     }
    
18. 
    
19.     socket.onopen = function(){
    - g* w( z* |5 \, }% |
20.         draw();
    7 T5 [+ ~, C* |: Q! Z# C
21.     }
    5 G6 V  D6 U4 r0 h/ P+ g
22. 
    $ |; v  g: {, U* \$ G
23.     var draw = function(){
      w$ ]- s& h: H  F* I- {1 Z) A
24.         try{
    ' T# j2 q1 _# y/ d
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    ) B5 i  m$ C2 X8 V
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    - R3 j% R9 ^% @
28.                 return setTimeout(draw, 100);
    # t1 x& r/ S8 w( H3 g/ t
29.             } else {
    
30.                 throw e;
    4 |- R% F! |& a
31.             }
    
32.         }
    # a9 P: J2 z3 f' Q: y- N
33.         if(video.src){
    " W3 ?9 q  Z' X( \
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    9 C+ s! |  Y2 b) ?; c. V
36.         setTimeout(draw, 100);
    ! s, F3 |5 I# M
37.     }
    3 J# I$ g+ j$ E0 y% W
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    ( h3 L# ^2 _- z# I5 ~
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    " Z$ V' l- ]; t% v. A
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    8 R; a1 v) P0 R% w, v
41. </script>

复制代码

1. php
   . m+ g! G* n# u6 Y9 d
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   6 N/ c  z+ b4 z0 y
6. 
   ; D5 g! p- O& K1 X
7.     echo "新用户id:{$request->fd}加入了\n";
   $ n4 k' i0 c! d
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    ( m8 B- x2 v9 s& R- I1 ]
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    ) e' i) S1 j( [5 V1 \
17.     }
    4 y. ^* V0 c9 L; A- s
18. 
    + }- s: j0 f) A
19. });
    
20. 
    0 a. n, v0 p$ O
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    / t. z) g4 z8 L
23. });
    
24. 
    . A5 \  h& O0 J& ]+ Y$ c
25. $server->start();

复制代码

+ z; g( `, `' E# S
/ m( c; ^, T+ r) b) X3 h* n' @, D+ P
; i0 ^: X) v7 t- i
, W7 _& [" e/ U/ K% m# m, ^9 x$ N


% _9 T7 k# Y) P& z) W( v




0 o  H( x6 p* |* P) L0 n5 X9 |, h