swoole 直播

admin

主要使用 webstocket
6 s: X  T& M9 p上代码

前端

观看页面

1. <script type="text/javascript">
   & c# ~& f) Y4 i  q4 C, }6 y' n
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   * \  A$ I  D+ ~! N# Y3 v8 ]) {
7. ws.onmessage = function(e) {
   + S! J; S( S4 L7 X* Z% ?
8.    console.log(e);
   ! K5 N. S* {0 N8 l! t4 ~% Z
9. 
   # E) o8 X& r' H/ d6 L+ M1 R" w
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    . p$ X3 `9 q( H: M+ ^
13. ws.onerror = function() {
    9 b0 J0 o/ w* N2 f# T
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   ; Z9 E/ b/ [- m8 D9 `. D' n
2. 
     P% S  D& Z; x7 y0 H
3. 
   7 p( \% O" ^9 O. n6 B- B  j; }
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   4 z/ B' w" h) ^0 d# f$ H! B
9.     //socket.send("嗨我登陆了");
   
10. 
    , ^$ t) M  y) `2 M5 S7 Q0 `
11.     var back = document.getElementById('output');
    + J: V# o* D( ^) H" X8 G3 l6 v/ e
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    ( D9 |1 e. q1 S" A2 O# A0 I
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    0 k6 S+ ~. I4 L' R, w6 C0 o3 V0 H
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    3 f; F: R4 d- n' k6 c' R
24.         try{
    & J4 u) l( K/ P
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
      }6 b9 n2 V3 v  l/ o6 c
28.                 return setTimeout(draw, 100);
    
29.             } else {
    5 m( {9 j" ^# p, Y4 y
30.                 throw e;
    
31.             }
    
32.         }
    + E. a8 g# {& w* w
33.         if(video.src){
    ! W& Z- g2 G4 c  U3 r7 z& R% ?
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ( E; X9 N8 o4 l- s. z
35.         }
    6 k, h5 q5 R! V: o2 \0 r7 T" }
36.         setTimeout(draw, 100);
    
37.     }
    ! c- [1 d& Y% j. I% U
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
   5 C) M4 z& ?( o
2. 
   0 ?5 q( F5 b, C
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   3 h) ?; C8 W- w- y3 J
4. 
     _6 i$ O$ q8 S/ u6 j
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   * @9 ~  ?" E  U% K+ e& T
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   : u3 j& _, x1 ?4 @  M6 l
9. });
   ; p+ d4 S+ z# I9 Q/ \
10. 
    7 F; Q; b( X2 Y, n+ Z
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    " C3 ?; ~! f- v$ _- T, m7 T3 J* J
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    / J, `  T0 \$ W6 l% D+ q7 R
15.         //返回数据
    - t& L: b& \0 ~( w$ P' P( V
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    ) @, v7 B. J# W
19. });
    ; l( l0 \9 D: l. N
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    2 F# z/ G! L- ]( U, M+ K: O5 Q
23. });
    
24. 
    
25. $server->start();

复制代码

* {! k. f# C6 ~' D/ V) V; W, N
5 d  X- E' ]8 m8 b9 |! z9 n
8 V6 z% C1 M* I: L% p" d
4 S( Y: C# w, L) [

& h" Q% X7 s$ s
7 }( j% J4 e: r8 b" \




8 }, x, _! `6 @3 s; p. }4 ^