swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   , u4 w3 _% C9 I, T/ e$ V! B
3. 
   
4. ws.onopen = function() {
   % y3 M& a$ K  u- V  v" T
5.     console.log("连接成功");
   
6. };
   . w; h! d4 }  i# G& I
7. ws.onmessage = function(e) {
   4 N; y: q# E( Y/ w0 ]6 S* |
8.    console.log(e);
   # }1 E& a3 {% k# L
9. 
   : E* |$ G5 Y) r& _
10.    var data = e.data;
    # R# K: }$ w, c7 Q$ r/ K# m5 T7 f
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    . E/ R7 y0 ?9 [5 S) [2 G
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   
4. 
   1 D( @% k$ b# t8 i
5. <script type="text/javascript" charset="utf-8">
   1 ~/ v3 g( }+ z6 T; |: P
6. 
   
7. 
   9 t8 A# _! k, O8 h0 m& @
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   4 x1 k4 r7 y- R
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    8 o% ^5 |( ]* u$ H& J
12.     var backcontext = back.getContext('2d');
    4 ~  l) B+ X, j: I9 L* }
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    ' f7 t; e' B. {
17.     }
    ) j/ y: e3 t) A' j7 b
18. 
    . X  c( o. G+ ]
19.     socket.onopen = function(){
    7 F! u! q) D1 K$ t/ f
20.         draw();
      d/ G3 K' {3 t. h/ h! p  e% L. a
21.     }
    $ p: z  F3 n" p: X- M
22. 
    " J6 t% Y0 i; ^3 K
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    # o* m/ X! A  q" [- K
26.         }catch(e){
    % n! o" W) w' d! G* s4 b1 u& n
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    & J5 A& P( r$ b. G$ p- w& v
28.                 return setTimeout(draw, 100);
    ' W# o+ g  F, [0 q2 O8 Q# Q
29.             } else {
    : r6 g% G! S: k8 _2 t
30.                 throw e;
    8 L# T+ }3 ~4 c0 d* O. }6 z
31.             }
    " f. [9 {) w; g
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    4 p, R% @* H  i$ ?/ ]" V
35.         }
    
36.         setTimeout(draw, 100);
    & Q3 I& ^$ w9 ^5 ?6 V5 |% P( y
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    7 B' g0 n$ w/ M4 l2 f
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    / u6 P& N6 p% k/ s+ t* o1 ?
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   ; a2 A/ J% V( t
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   % f* g. k* J8 g: _3 C
7.     echo "新用户id:{$request->fd}加入了\n";
   % u* Q2 [4 r' a  J$ \/ c
8.    // echo "server: handshake success with fd{$request->fd}\n";
   % w; s' p- j) v0 D2 e0 j0 Q( F
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    / K- t( y# W8 F- A- w
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    ' n0 i8 i! `& ~* B! |) ?
20. 
    4 |, E4 P: D4 t2 s9 x
21. $server->on('close', function ($ser, $fd) {
    ( q( J2 h  T# U
22.     echo "用户id: {$fd} 退出\n";
    / T* C2 |- h' d& H0 W' k8 Z6 C
23. });
    8 k% K6 H- X: Z6 K3 X
24. 
    
25. $server->start();

复制代码

/ o  K1 ]+ U& P8 Y2 c# m8 o
8 t2 W, C8 i' o3 g% T0 o

5 ^( X) h$ \) V& p* k6 a+ Z; y

# T, t! p: y+ S  [


. O# q5 ^5 M7 ?  Z( {7 `
& A& V' Y, D! f' U2 N