swoole 直播

admin

主要使用 webstocket
: a& C# _1 W5 Z. r$ ~上代码

前端

观看页面

1. <script type="text/javascript">
   0 I5 @# r0 R# m& p+ d
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   - b5 _  [$ l# t- q5 u1 t
4. ws.onopen = function() {
   + f* C+ @, H1 o; H9 O5 _
5.     console.log("连接成功");
   7 F" `; u8 r& V2 a% A0 M. v; y
6. };
   2 U. n/ x) t6 w# i" i
7. ws.onmessage = function(e) {
   3 [% Y; s  f/ `$ i
8.    console.log(e);
   
9. 
   6 P$ @; Z. f5 D! s; t8 h
10.    var data = e.data;
    ! ?% f  S9 A- _, ?, `. M
11.    document.getElementById('player').src=data;
    # D; U+ h# e# X7 z, ~! K
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    , }' [2 y( n" t! m- A
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   : }6 ~* f1 J% |3 n
2. 
   
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   5 l2 J- t) X1 @( {( {) `" T% \
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    $ X: f! B8 q( W& f
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    " m; J+ @$ ^; h% w6 }5 O' Y
18. 
    * _! T% W3 f4 k& J# B/ s
19.     socket.onopen = function(){
    ! v; R6 _" q$ ^, @" F" Q" }5 D
20.         draw();
    
21.     }
    
22. 
    9 A0 n( u  ~7 d3 K7 N& _
23.     var draw = function(){
    + ^* D9 o5 K/ p: R; E5 {
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    6 X$ L$ H0 v: s) x1 }$ S# a
26.         }catch(e){
    / t8 W( p3 p9 Z4 \2 k0 e+ s# |
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    - A6 I; p" o& }, \2 D) [# c
29.             } else {
    " M& C9 Z* J3 {( \) n9 e  _
30.                 throw e;
    
31.             }
    
32.         }
    4 b! {0 u  o" q  e5 {% @
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ) X3 ~" E+ Q; R* s& f% i& G& n
35.         }
    2 N" K" t4 R; f6 D1 z
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    ; K1 t' ~& a: D# z) B
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ! n; R" p7 s& }. l. z1 b* v- X9 s* P
41. </script>

复制代码

1. php
   
2. 
   2 H7 w. ?4 c0 F9 Z. c& p2 w7 I
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   * ~" ~0 u+ D/ o
8.    // echo "server: handshake success with fd{$request->fd}\n";
   : ]0 U& b# X. p. E
9. });
   
10. 
    ) M1 j) c6 J( D3 E& Y; c  ?$ }
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    ) o; j/ p/ a1 Y  P0 }4 i7 L% ~
13.     //循环所有数据
      W: C7 T  L  Q7 X
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    + M0 D5 ?2 Z8 a) k) c! [8 \
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    ' P6 r+ c2 v# @+ G0 c3 K
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    # n1 d! R& A! g5 v* v  h
24. 
    
25. $server->start();

复制代码

& x; ^& s) ^) m, \- P& I# g' B
. ^6 n) T! X6 j7 c

9 Z' A7 u/ A7 }$ _( ]

4 l* A' p( `9 E" I$ h6 A2 a


/ ^* j" q8 T. B, v$ `