swoole 直播

admin

主要使用 webstocket
; g% y7 G% V6 ?3 I* q7 n, \( ~上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   : r: p2 Y' ^( j0 {$ w* m
3. 
   
4. ws.onopen = function() {
   0 v+ {) y- a+ {* C! S$ t1 W
5.     console.log("连接成功");
   
6. };
   - K* k+ s$ Y/ q6 q) }+ o- k8 b7 Q2 a
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   0 l+ k9 c1 j! Z8 p
9. 
   
10.    var data = e.data;
    & H5 d6 l2 p/ k$ t$ Y: ]2 }
11.    document.getElementById('player').src=data;
    2 ]6 s# q" i9 ~( u+ r+ }& U/ t& [7 E
12. };
    . [3 Z. s. Z0 ~: D8 k! ~3 b- P+ ?
13. ws.onerror = function() {
    & ]! g' c3 u8 p  x8 M: _) E
14.     console.log("关闭连接");
    $ B5 }4 D% l! x. o+ j- ^+ o/ X) d
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   $ o2 ?3 }9 g) _0 r5 }- H
3. 
   
4. 
   ( z' }+ j, |9 Y; b. i9 e9 Y7 t9 }
5. <script type="text/javascript" charset="utf-8">
   
6. 
   * U% n! \1 J& Y
7. 
   9 @  D' `5 Q& X3 B
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   6 F% z3 W# `3 |& b$ I( p! r& |
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    2 s+ H6 Y7 y. F. t/ p+ }5 t
13.     var video = document.getElementsByTagName('video')[0];
    & R% A) V1 q1 G; ]* [' Q+ T8 r
14.    
    
15.     var success = function(stream){
      [+ `" \  M- E3 j  W
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    3 Z) D  ?3 H  {2 `5 O* J" s
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    , t, g( Y2 m* a& W+ F: E
21.     }
    
22. 
    ! j' ]: T  A3 ^; ]. y% B: S. e' `
23.     var draw = function(){
    
24.         try{
    4 e; ]2 a. U  H3 j3 f. X
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    - R7 l; Z* Z4 |
26.         }catch(e){
    ; J' ]8 T, V! q$ a2 w" I
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    & f$ V9 F) y$ A/ p* n4 t& {
28.                 return setTimeout(draw, 100);
    
29.             } else {
    6 e: N! Z1 x4 |! Y; F$ |8 Z
30.                 throw e;
    ! i" F; \: S0 Q- O0 {
31.             }
    4 ^2 a  l3 m/ D. W; d
32.         }
    
33.         if(video.src){
    8 I0 V- f& ^3 H
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    ' F# X( C, u' }, d) Z1 [, O+ S; o/ I
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ) o' R& c4 j8 G2 ^
41. </script>

复制代码

1. php
   
2. 
   
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";
   ! t2 G2 P3 A8 {9 h
8.    // echo "server: handshake success with fd{$request->fd}\n";
   & k8 S8 k7 h. G+ }9 s
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    ( N% Z& @: }# q- d/ t6 o
12. 
    ! W1 R- Q3 L! ?
13.     //循环所有数据
    " x9 p3 ?0 L7 Q6 y
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    ' z1 l0 i, h+ G# @
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    
20. 
    * R, k: C5 a; T+ ~! V
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    # x2 @+ _9 {- z6 l; |0 Q6 l& u
24. 
    
25. $server->start();

复制代码

2 ]" y: Y# D2 h1 U' J/ T$ w4 N

; u! {5 k4 u+ p9 q' n


+ ^0 \. [1 ~/ \. b
8 P! ^- o1 f7 {. ^4 @

% U" p2 m0 {# g$ `  ]# `5 X
* M4 Y0 |! m; |

6 B% j  S! d# C5 N% `6 p. B/ n