swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   6 [% t3 C8 ]2 \4 i, N$ `4 Q
4. ws.onopen = function() {
   # c3 T0 Q- a2 z6 a
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   . ?5 l, R9 k7 g, r
8.    console.log(e);
   , A0 b! k0 |* x/ y2 V  y
9. 
   * G% G/ L4 ^5 m, e, g+ ]" C5 Q
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    7 ]; z1 _6 H1 u% Y/ U
13. ws.onerror = function() {
    1 g! E' h$ P- n' s
14.     console.log("关闭连接");
    ' h5 I7 D, Y7 a  `
15. };
    4 Q" P# l. N4 C1 T8 j
16. </script>

复制代码

录像页面

# {$ i# r+ \$ ]3 `3 W* x

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   ) A& x. e; |, T4 h$ \. z; b9 M
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   & ]/ L5 Z# S, I8 P9 X! I1 t% i5 m
7. 
   ! ^4 ?) V" }' T# T
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   2 J) H4 Z/ u/ k. J) U
9.     //socket.send("嗨我登陆了");
   . W3 a3 C3 B- e, y5 C9 j
10. 
    
11.     var back = document.getElementById('output');
    3 `8 g  w0 m$ m5 |5 r- r
12.     var backcontext = back.getContext('2d');
    / c/ l$ l' ~& m! n2 n
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    ) H; w2 T# ~( x; v
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    6 Y, N& X' p: C* n! V
21.     }
    ' N# T9 v' C2 A  A
22. 
    
23.     var draw = function(){
    5 w; I9 h: R0 s
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    / Y) i  r' ~6 l% U8 Q
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    3 w) E8 \9 ?  ^
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    . x$ ]# Y8 K9 Q
31.             }
    
32.         }
    ! ?* ?' n4 u" ]1 q, P
33.         if(video.src){
    - N* u8 |. W8 T: s; l' Q( f$ T( t2 U
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    8 A6 C1 r% w' \% B' d$ B
35.         }
      p/ q2 ~0 P% L! u" S( R
36.         setTimeout(draw, 100);
    0 Q/ V, ^& w- ?2 s( Q8 G# j
37.     }
    : S! i6 g( {8 L# b' W
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    % r; O  ]6 e0 p, x, ^0 D
41. </script>

复制代码

1. php
   : Z) Y1 K& K) ?& }: {, B5 e
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   , w4 b$ _" w% Z# V( o* l& `
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   ( \4 H# P7 A- h$ Z
6. 
   ) H/ s3 W/ h5 N% ~" X  p
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   & T. r! ~4 }# U
9. });
   & b- }  b9 ^& D0 A2 W
10. 
    5 j# u0 Q1 o; D4 Y  r- D
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    7 J) F7 b) S. M- O6 F5 W4 z" N0 d: A
15.         //返回数据
    1 K! d/ C( B8 S
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    4 d% v9 e6 ?8 n( b+ ]0 _3 _% F" Y
25. $server->start();

复制代码

( K' e3 {" }+ F, S


4 e! j5 Q* ]- i


. l& x. F( ~; \