swoole 直播

admin

主要使用 webstocket
7 s5 w; H- K6 T' w' a- u6 f& U上代码

前端

观看页面

1. <script type="text/javascript">
     Q2 r+ r$ y: d7 U0 _8 c! f
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   8 ?  `  I- v6 B+ ~3 U
3. 
   / E1 Z+ O6 H' N! H2 A5 R- q
4. ws.onopen = function() {
   ) Y. _( [! d) j# k8 U3 }  Y8 ?/ b- X! g
5.     console.log("连接成功");
   
6. };
   & ]$ @$ W$ Y- E' \: B( ~
7. ws.onmessage = function(e) {
   # K8 _* c7 m. r. V7 f2 N2 K8 m. W
8.    console.log(e);
   
9. 
   5 O; Y$ y0 e7 H# F2 p" w& i7 X
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    7 _9 m0 h# V& R) f& x7 |8 w
12. };
    2 ]/ v3 T6 f7 O: E
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   . O, _( q  o; ~2 m
3. 
   * y2 A' D- j. f0 _# i0 \
4. 
   3 Q" O0 E$ F. C) o' h0 D: Z
5. <script type="text/javascript" charset="utf-8">
   
6. 
   ; a! `4 g4 H" v
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   # u5 y) I( S. l9 K; I9 s! b
10. 
    ! n' C2 i# a1 f+ Z+ x- i
11.     var back = document.getElementById('output');
    & y/ Q" |* Y' o
12.     var backcontext = back.getContext('2d');
    $ ~0 W# ^, x% v2 Q( b
13.     var video = document.getElementsByTagName('video')[0];
    9 W3 C- j  u' B8 i; p0 t
14.    
    4 e2 }  Z3 D4 [
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    ' v$ S1 r3 A+ u8 V& m
17.     }
    
18. 
    4 Y/ ?$ B+ T! G- o, ?- q0 H! a
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    / ?$ y, [; R2 j% y
22. 
    
23.     var draw = function(){
    + r# e: s+ N7 b' I  T- ^3 u1 {
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    . b1 [! ^0 l' @0 O( ^" b) b
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    * \( u/ W4 S4 [# f, q* Z1 `1 f8 b: ^
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    3 D9 c+ G$ b- u  f
31.             }
    # E9 U; g6 r  {& l4 I
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    2 C' J0 B+ a( ~# E/ N+ T
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   & y! }: H) P4 t; ^* x
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   8 o3 ~: ?& G1 p/ N
6. 
   ' i$ C1 L1 U0 `& A: d  |
7.     echo "新用户id:{$request->fd}加入了\n";
   / O; K- K! `' E+ A  G# J
8.    // echo "server: handshake success with fd{$request->fd}\n";
     [0 A; D' t) C) T8 w: m
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    : z$ v% Q  ~1 I7 R/ G" R4 B! Y
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    : n: b- y8 F5 E& b& F5 f  g5 v
17.     }
    - a) m0 B2 R  I! x6 X, P6 R* v
18. 
    4 O3 c0 [, k' h9 E
19. });
    
20. 
    2 M. M$ u) d" s0 F; X# D
21. $server->on('close', function ($ser, $fd) {
    - M0 j" y2 n0 y9 e) @7 n
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    
25. $server->start();

复制代码

" Z6 z! F! u5 @* D

4 l4 |# C* X# T6 t$ [) y+ @
' V( n5 [4 y4 p) p' E



) V. G$ f3 x+ A7 \% {- H/ A4 j