swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   - ]* b4 ]: |1 T, Q2 Y0 F. `
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   3 D: m# S) [. h( a6 ?, X
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   $ O% F  p" X! b% C
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    : r- R' t$ O+ C) C
12. };
    
13. ws.onerror = function() {
    ' [6 }  Y, x! {3 z- k! O) B! W" y8 q
14.     console.log("关闭连接");
    + ~1 e" F% h# ]6 D/ s  L
15. };
    % ~. q1 [/ O6 l
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   - l/ ]( c: d4 l' {. a; `( |8 E
2. 
   & _7 q9 l) l- a+ x& R
3. 
   # W" f& p) m% G& U3 y
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   3 m' a% V7 P- X2 X2 S: X
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   % I2 y& ~# Z4 ?
10. 
    . O8 K! d& \0 R6 ~" q
11.     var back = document.getElementById('output');
    4 s6 v3 ~. S, q
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    6 a( k# Z+ Q9 O" t
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    : B9 Y, M8 q! w* F3 ]9 G0 _
19.     socket.onopen = function(){
    & c. Z1 `; }$ z# o  X  F
20.         draw();
    
21.     }
    ; i5 y) |" X8 Y2 C- d2 ?( f9 b
22. 
    3 ^' F3 s# W; }. L) n. X
23.     var draw = function(){
    1 {2 K: y* c3 ]. K9 A
24.         try{
      h1 R: s9 m2 w2 h; M: k
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    & ~; V  Y+ l( h8 u
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    9 Y  W) y: U  m' o' Y
30.                 throw e;
    3 P! o) o9 w3 n. m: n6 Y
31.             }
    
32.         }
    6 C: c* [6 `7 \/ _
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ; ?2 }9 Z% W  d, U0 A+ g1 z
35.         }
    
36.         setTimeout(draw, 100);
    3 v6 d9 H! b' z+ |7 m. `( ~- B
37.     }
    ! J. Z0 X# A4 H2 X
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    # Q% v0 |& J: L- `9 @
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    8 r) o9 n* G8 F/ d" s
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    1 \0 X$ r* u4 P
41. </script>

复制代码

1. php
   ( s) ]. C# t$ s) q. V, ]
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   " Q+ K6 ~. t5 ~% U* G
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   * {+ m! y. {/ G0 I. e: A
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   ! b! X9 h) A; Q" a; F  _& g
8.    // echo "server: handshake success with fd{$request->fd}\n";
   - ]- f/ Z( z. t& [
9. });
   
10. 
    1 `2 @8 N! I# d! \: E1 d% |
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    4 a9 |5 O1 |) N- f* w4 ~
13.     //循环所有数据
    % Y9 w$ }* s) y7 U$ K  t$ b0 m. C
14.     foreach($server->connections as $fd) {
    / }% h8 d8 e8 h& h- p% |; S
15.         //返回数据
    & `, ~9 U6 k8 y/ s7 G
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    - M. Q  f5 n5 P/ h: L
19. });
    2 b' n2 O0 B8 q
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    # E& E+ m- _7 h9 \
25. $server->start();

复制代码

: L  X" d3 h9 c6 M( Y9 j% M2 T
8 g6 s% r, F" P9 {, D7 \) q

) E- H2 u/ m  u! ]% J; w7 T


9 Y2 x3 T& w, v: D! m

$ d6 h, m9 [6 w
5 n4 L: z* ^6 m* p3 t- g6 f