swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
     N/ Q, k: v; g
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   ! t/ d; [3 f: J. L
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   " b  [7 x& O: h
6. };
   0 G/ r: v3 H; ~$ c9 ]2 B- Q
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   7 \- [5 o& x4 \! }8 r  g
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    1 }0 j* Q- W: c& D4 ^% Z
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   5 ^1 d# O7 G$ _0 Q! D
2. 
   
3. 
   5 j6 @! a9 \6 e
4. 
   
5. <script type="text/javascript" charset="utf-8">
   # p' {% B6 v9 ]1 q0 Y
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    ! v; h. Y% Z: g
11.     var back = document.getElementById('output');
    ( _8 Y! \% d* ]( Z1 K% v+ d. H
12.     var backcontext = back.getContext('2d');
    : k/ a  ~& Z, M; _. O5 q% f8 ~
13.     var video = document.getElementsByTagName('video')[0];
    . g, ^2 p# |  g' g7 n) W
14.    
    1 c' c6 ?  @) J
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    ' z) G" A* i4 D' E9 g5 F
18. 
    # h! y2 B) N$ ]3 V" b! O
19.     socket.onopen = function(){
    0 n0 C$ D; T$ B3 C, L
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    9 Z/ p: h$ w" m. a, D
24.         try{
    3 Q, W0 N$ p  v, i; m! a! L$ z" F
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    " q+ h/ V) k+ p! i! i
26.         }catch(e){
    , ?3 m& l1 ]' _$ [4 F" T" u, `# i
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    0 t$ h! G/ i( _5 ?' h% c0 ~% m
28.                 return setTimeout(draw, 100);
    1 W  ~4 B+ D5 H" l) S
29.             } else {
    
30.                 throw e;
    
31.             }
    
32.         }
    1 ~5 b' v3 y( K: W$ o' U
33.         if(video.src){
    9 G- K* l( @8 d) K0 Y1 T2 Z
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    3 W* `' \4 f# ^; N( s, \" L6 U
36.         setTimeout(draw, 100);
    
37.     }
    . O6 I: i( a2 D2 f0 n
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
   7 g+ {  Y0 f9 t' S+ A: l
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   + O. P# ~7 L) |  E2 S) D
4. 
   * Y. ^1 m: d6 j0 D3 N; e
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   . ?7 S& Q- g8 a+ \9 m0 J8 z+ D
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   7 n4 Y7 o7 q1 M5 w/ b
10. 
    4 G- Z& F- c+ M9 D
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    : }: u4 a8 F$ t* B
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    ' I- b& F0 C5 s
16.         $server->push($fd, $frame->data);
    % f9 H6 e' N, f( }, U7 Q0 I( k
17.     }
    - u* G7 u1 t' q4 h+ b( f1 A
18. 
    5 W! F6 {" g" N4 P+ ]; G7 ?
19. });
    . ~5 R# x1 N' }* W2 W* u  ^5 e, T
20. 
    
21. $server->on('close', function ($ser, $fd) {
    * d( U. B3 h8 R8 Z& ?
22.     echo "用户id: {$fd} 退出\n";
    / |: `# P8 b3 c, t! O
23. });
    ; r$ C; k! m5 P) `# [( |: L
24. 
    6 h9 f* m4 o' ^  L) D
25. $server->start();

复制代码

4 L. M9 h, Z  f0 V

6 E* C2 \* @6 q9 J2 _
& ~3 I0 T/ t4 A" p! ?




& A3 s6 x, B6 a4 f2 G/ ?8 y+ u" v
# O' E8 ?" K' G: @3 ]

- Z# W$ m! }4 O. F5 O' s+ W  S