swoole 直播

admin

主要使用 webstocket
/ M( u1 A! w9 Y& z, \4 u上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   - @( c0 L/ W, }. F9 ?4 M* E
4. ws.onopen = function() {
   , `# z) E5 `1 }; |" W  @
5.     console.log("连接成功");
   6 r$ m% H) M7 ~' i2 X3 I' e
6. };
     b( ~  s& J& `0 w8 R$ Y
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   4 E7 C$ V- }6 Y$ q: \
9. 
   
10.    var data = e.data;
    & p+ r$ G* t% n" X8 T0 v
11.    document.getElementById('player').src=data;
    2 {+ ]+ P, ]6 q: t; N# G& x
12. };
    3 f" h# E1 p( p
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    4 {$ D+ i5 M& M. `% x
16. </script>

复制代码

录像页面

  m6 ?( T- ~+ D# `5 m# ~

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   3 H- w9 l$ k& i* f0 F
2. 
   : x1 _  Q. X! |$ A" l6 }
3. 
   
4. 
   5 i5 P/ a: T* h
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   0 _, g9 K! y; {1 l5 A$ y9 E5 n
9.     //socket.send("嗨我登陆了");
   8 U2 M# }8 K+ i1 {4 a. q, b, E
10. 
    8 F4 ?1 S* p. z+ G) Q
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    & q7 z( r( M: }4 Q  B4 L' a1 h0 ?
13.     var video = document.getElementsByTagName('video')[0];
    8 n7 R  q6 b! t7 S
14.    
    ! Z7 r" d" U+ v
15.     var success = function(stream){
    % p& M4 k8 @+ L: {' m
16.         video.src = window.URL.createObjectURL(stream);
    9 B7 w! l/ C: c7 Z* I
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    3 c8 [4 J' h' l9 ]) v+ U
22. 
    
23.     var draw = function(){
    # y( ?+ ]" T2 b! w' m' n
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    : {6 \' C8 z2 {0 s: [* P
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    4 f' F9 g" ^" ~0 q% K
31.             }
    
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    # B6 j& p$ _. q' T) |
36.         setTimeout(draw, 100);
    % O- V3 f, m1 y2 C0 k
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    : N' H9 ?/ l/ Q1 W
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    & T3 V# V# @0 D
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   " ^" z5 E3 p( Z# g1 Y
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   . N' y' h6 A" @+ V# [+ t5 {
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   - z1 I6 [9 M/ o2 j: a
10. 
    " P# a1 L9 }* ~8 |5 V
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    8 q! y# M/ n1 ^$ e" i
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    # O8 X# J) o/ [) v) B
15.         //返回数据
    0 q" b# p- m8 @8 p: Q
16.         $server->push($fd, $frame->data);
    
17.     }
    % L) n% k& r& z
18. 
    
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    + X, P! G6 m1 ]' N7 t" x
24. 
    3 ]  L  v7 r9 {: M( ~9 C
25. $server->start();

复制代码

9 J+ h- W; J' u3 O8 x




! ~3 Z$ S# L9 }! G/ H6 h


% l3 E6 C9 v( k