swoole 直播

admin

主要使用 webstocket
- x( }: m6 r! h' p& ]. U上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
     e7 A! F! q) ?1 a' ~' Y6 ~* g
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   6 M$ i8 A1 D- k# S
8.    console.log(e);
   7 Z# ], c9 O9 W$ ]
9. 
   " l1 d& C/ z1 }: B+ p
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    : h1 ^$ q% P  M8 p* }1 J
13. ws.onerror = function() {
    6 I* f5 x) Q" P
14.     console.log("关闭连接");
    
15. };
    $ X# r1 M# `1 @! E* a
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   3 l& s  f# B: a/ V7 k0 j( z
2. 
   
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   1 p. D' C: @, v4 E  c# N  B
6. 
   / X$ J# q! q  V# h4 D
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   & ^* X# ~( s  w+ h, c5 e! L
9.     //socket.send("嗨我登陆了");
   1 W; m! l, D+ c" ^4 b, g
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    ) {2 ~9 S, F" E( Z7 @/ E
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    * _9 h+ J- A" \4 V! b
17.     }
    
18. 
    
19.     socket.onopen = function(){
    ' P$ O7 y1 {& l. l1 X
20.         draw();
    - I- n. o* J9 C
21.     }
    . g0 p* [9 u9 Q" q1 D+ q
22. 
    / T- h! O# V- @4 P( k* ^
23.     var draw = function(){
    5 ]: l5 {/ H3 t4 q2 U+ H+ v! T3 \* b! b
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    8 H1 X/ r- d3 g; T! e( w8 b) y
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    5 p, J6 h1 F- Z8 M; y  i
28.                 return setTimeout(draw, 100);
    0 z3 D$ ~( Z2 W0 ?2 W: O3 d
29.             } else {
    9 ^, p1 R- K! O; J& G3 m
30.                 throw e;
    
31.             }
    
32.         }
    2 U- N' `' y" Z  |" F6 t- E
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ( Q! r6 o9 n' f$ l3 B5 _
35.         }
    
36.         setTimeout(draw, 100);
    % \/ _4 |* ?  M1 @
37.     }
    
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
   
2. 
   5 ~2 v/ f% ]' Z
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   . U8 b* Y9 |/ z8 o, ~6 ^( h) _4 e
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   ' e7 l) n" n" [# W% F
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   - d0 v. M! r) g, l
9. });
   . T' _: ?; b) `! N
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    0 ]" ^- {9 V+ C6 d8 O, d: W
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    - V5 t0 l. o" i& E- g0 _
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    0 J# d& U1 K# {7 l9 s$ |
17.     }
    
18. 
    
19. });
    ( J6 `. e0 T4 u' E9 j3 l& S
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    ) J& o- Y- a) j, D" a4 ]  _
23. });
    
24. 
    
25. $server->start();

复制代码

  t2 w. y) w) ^, @' T. S
" ~3 L# j4 @7 j& t, |5 M& s
" _2 l' t$ d- ?: `

- q( |# ^+ Z: i7 u7 i

) p) @1 Z1 A" _( e3 K2 [


7 K& U( ^" ], C& C& B: X+ s
1 l( p( M" o2 p. s! c
7 }0 Y! y% |8 z. R. l* a