swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   6 @3 L* e. z: M0 {7 d
4. ws.onopen = function() {
   , w& h6 {" [4 k) {8 t2 l- `
5.     console.log("连接成功");
   
6. };
   9 S( y) M' U+ k( t1 w
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   5 Z0 e( X8 K6 w; c7 ^- r9 S6 M
9. 
   9 m% m* |- U( o% B8 v  P- _
10.    var data = e.data;
    1 i# u& N9 V) W
11.    document.getElementById('player').src=data;
      K( k' c0 [# \- m6 k' e; K! C
12. };
      _! R0 v- \6 j# p
13. ws.onerror = function() {
    , I+ k/ b; E& c0 X
14.     console.log("关闭连接");
    
15. };
    3 N1 |. K8 L. ^
16. </script>

复制代码

录像页面

6 J  ~4 M( m! _" M4 u

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   4 _+ e6 H- c' \0 Z; c3 M
3. 
   
4. 
   4 l4 S; A% \2 ~9 v% G
5. <script type="text/javascript" charset="utf-8">
   
6. 
   ( _4 M% ?9 l1 _4 L6 n  _! W; p
7. 
   8 |! M0 L( a/ X, I* D
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   & C9 _$ v0 n% r: G
10. 
    + l7 t. ~- R9 H9 f/ V; j
11.     var back = document.getElementById('output');
    $ C2 F' _( z- W  k! W
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    3 o& X% N4 |0 A* m
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    * {4 j" N* @# |% P" A+ W
22. 
    
23.     var draw = function(){
    * g( N* k: A1 d& N+ c, ?( x" d3 _5 }3 j1 R
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    ' W, q7 r% W" h% w8 C
28.                 return setTimeout(draw, 100);
    6 I1 S  D. J* [' ~
29.             } else {
    
30.                 throw e;
    
31.             }
    1 s, a& F9 R' M3 j
32.         }
    $ L+ k3 L# {1 b
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
      l# o3 X# G1 G' ~9 a
35.         }
    . l' z  \* N/ @
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    % c, b# i$ d. o5 \! R
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ! P/ y/ p- L7 @: Y! o6 r
41. </script>

复制代码

1. php
   
2. 
   * ~) l6 {" {9 {/ H0 r
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   " y0 U8 B! `4 F+ V0 D. H; i) b
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   + K, z' _! l) v
7.     echo "新用户id:{$request->fd}加入了\n";
   , A3 O" C5 ~' \4 a
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    + u& C: C- d% @4 ^
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    3 _: i! N4 b2 v" v9 S0 k
15.         //返回数据
    6 n1 ~  @$ x  M; L
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    0 q9 @  v" z4 t0 E+ J7 C
20. 
    
21. $server->on('close', function ($ser, $fd) {
    $ g! c# b, U8 ~5 r1 b" k' M
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    
25. $server->start();

复制代码

: I* |# p5 v' [+ ~5 _$ g6 ^
4 M+ J% Y+ ], g; Q% d6 j
1 p$ F5 G0 K  G$ f7 \3 q( [. G

/ v: {: Y2 `; F8 ^, I
. U) [( v8 A: w' G: s8 k  [
5 F  T: e. u0 H+ l3 F8 Z


% T% Y7 E8 o" C% j; h) [* a1 T
7 U8 W5 \. D3 @9 k  d6 x8 i  _) [$ A