swoole 直播

admin

主要使用 webstocket
* |: o, G+ H- `6 @上代码

前端

观看页面

1. <script type="text/javascript">
   ; u6 G+ t. ]4 o7 Q0 E% v3 V
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   3 C5 }7 `9 _6 o. K% ]. h$ u
5.     console.log("连接成功");
   
6. };
   - E! n, m7 z/ O& \8 F& D& T
7. ws.onmessage = function(e) {
   - d+ i6 q! N9 j
8.    console.log(e);
   
9. 
   9 T' `. h2 {6 L* J$ L7 g" N
10.    var data = e.data;
    1 R* o( L( ]) K# E/ |. q1 w
11.    document.getElementById('player').src=data;
    9 W5 I! _5 h% |
12. };
    + H" }) |$ n( j( h5 M" f2 \' J. j
13. ws.onerror = function() {
    + Z* J4 z0 [% e, K  q
14.     console.log("关闭连接");
    
15. };
    : E7 ^3 j. |* r( U" L, K0 p
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   ! z- e  M: J$ E9 l
2. 
   ; U: a/ O( j! O7 X4 V" D
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   1 u) J% i: D: b
6. 
   : h" U& Z: E& f! ?& |
7. 
   # R' u. }* e( I- Z2 d: F
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    9 Z8 W( Y: C% E# f$ K' J
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    9 T: _5 J* c. T" _8 B
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    . t5 p8 p: J. d9 }% z* `3 B
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    & K, m* x% g. |: G0 {( v
24.         try{
    * e# F& n' d% _
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    9 S. o/ m* k/ V
26.         }catch(e){
    6 J  I4 U* |- K2 d7 I
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    0 B4 S+ K- a+ w: |) j1 ^
30.                 throw e;
    
31.             }
    
32.         }
    ( J3 R3 Q. ^$ ~
33.         if(video.src){
    5 H4 b$ p& k* l  |  ?. X, [
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    3 ~6 A4 Z+ X1 ]9 W! m. B5 S
35.         }
    
36.         setTimeout(draw, 100);
    * E' b0 q/ i' \# O& d" M' }. h7 H2 a# ]
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    # w+ `  d5 m' S* C& v
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    % M7 f0 N& e8 U
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   * v3 E+ [: L0 o: @
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   6 G% k& z( a5 R
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   . U; q4 J. K: L+ g% j
6. 
   - {8 F8 C/ z7 I7 G% I& ]2 `8 R
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    4 {4 z+ j0 \9 |" H7 ?
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    0 v6 h3 ~8 u7 _/ B9 N+ G0 x
12. 
    5 M1 {1 Q/ X9 V7 {
13.     //循环所有数据
    * F" D7 H" ~4 a- I+ M$ a
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    3 ?5 K* y/ `2 I7 m) x
16.         $server->push($fd, $frame->data);
    7 j; E6 R$ G* }
17.     }
    
18. 
    
19. });
    
20. 
    : q5 m2 t& _' V3 l: W
21. $server->on('close', function ($ser, $fd) {
    9 i: @: s. f4 u( Y7 ~
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    % |2 ^' n! X/ H9 ?( d! j
25. $server->start();

复制代码

9 a; }1 F1 I$ h  Q, C


4 ]% z& q9 a/ w; [' _) P+ b' j
( x+ a. X  k+ y) ?2 _
: E: {3 f% a8 b
2 i/ f* C6 t- H5 G8 ~
# u/ g) N& n8 y* [7 ^( i# j4 ?8 S
8 \" n1 j' B$ i
# j8 W8 Q2 u1 x
9 x6 U9 z5 p1 c
1 j$ v! _3 k+ Q; G