swoole 直播

admin

主要使用 webstocket
: ~) J+ x% D, ]6 l7 a- p上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   0 L* h6 Q/ ^" U: M4 }5 b
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   ' H4 q+ x# O6 A7 w7 T- j/ |
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    * Y* Z. s. M, p8 g
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    2 T7 |  C3 v3 W, _5 v, {
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ! g: _' ?4 D& t, i
3. 
   & I+ N4 U5 o4 c* ?+ n
4. 
   
5. <script type="text/javascript" charset="utf-8">
     L/ n+ z! J0 [3 j4 T
6. 
   : {& d: a- R  w5 l# R. |
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    $ N$ b( u6 M' d: K# w
11.     var back = document.getElementById('output');
    : U  Y. ~5 i: \5 G7 L/ R# y2 _
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    : Y; n5 R# h+ g0 V& ]
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    9 a& l+ N* m$ _0 b: |' M
17.     }
    
18. 
    
19.     socket.onopen = function(){
    1 r% d3 R# N9 m5 N
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    2 L$ ~1 O+ l& l4 W! M; P
24.         try{
    . I1 }+ b3 Z8 Q; O  T1 H* \
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    ' F& J8 V- u! U6 I3 K5 m
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    $ K  C( Z" Y# W8 W# Y$ ]
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    
31.             }
    
32.         }
    2 U6 |: n/ f' m" P1 Q4 |* q3 J
33.         if(video.src){
    7 D7 ^+ x/ `$ q/ V' D9 P* [: r. {/ E
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    ( t; V  h0 P# `! t2 N/ Z! C' J
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    , }, ]9 I) m+ s. L+ Q: C
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   4 [, o; U6 a, G4 J
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   5 _2 m, _+ j1 O# H. N, h
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   " G  o3 `1 B; \& \1 u4 i
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    9 x* o6 ~) R2 W; d5 c- B
12. 
    ! L' i& ?8 j3 A, C: R0 I. W6 _
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
      C, a- f- y- R, o- Q
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    ( l( m- h! `& z, g3 F) \
17.     }
    . {, B0 p+ L2 s5 i( \, n" X/ F
18. 
    $ R- N- W' f, P3 N* `) K
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    3 r" N7 G4 ]! t: V( {
23. });
    + X# m6 K! U5 q, ?8 {- @
24. 
    0 `) A. k- H2 _: s% N
25. $server->start();

复制代码

* V1 i; W; ?+ F: u5 a


9 B  q" D6 Q, j  d0 C( ~  ^) p
6 i" Z5 ?3 \8 u1 C1 ^+ |; D
' L' `0 Z% s; s6 |* j9 F. Q1 G
; x2 E& K# ^' y. z/ }) e1 ]4 Q


3 _: _. v* d7 K% }; @  h" b, ^/ j0 d/ _
  T$ m- Z2 ]$ c2 H