swoole 直播

admin

主要使用 webstocket
) J- H: ^  a; e5 m( I上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   6 A# p* B; ]0 C1 X+ X3 t
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   3 [4 e( M  w. S/ ^+ @/ A3 m
6. };
   * I/ w7 _3 L5 d" K
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    % o) {4 A3 M0 K- }5 `- q. g$ h9 z- P" z
11.    document.getElementById('player').src=data;
    : l* w' `) N" Y# o% a. H! ]
12. };
    - H! U! M5 t2 T8 l
13. ws.onerror = function() {
    $ U6 Y6 K& E. Z9 ~
14.     console.log("关闭连接");
    $ t- V  T( m, I, U% L$ V
15. };
    8 o% j! y0 Z8 f  l+ V
16. </script>

复制代码

录像页面

! i( J/ D1 G, \: P2 e

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   . @" b- d( a; n
2. 
   3 z, E- a5 T2 G
3. 
   # G- Y6 R1 ^9 C) y
4. 
   6 m& S. j) E6 q. _/ @$ }2 ^/ v' l
5. <script type="text/javascript" charset="utf-8">
   2 Q! f$ }) F8 k3 G6 b2 K
6. 
   4 N+ m3 m% v- o- v+ r
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   3 i! ^1 ~4 Z* {1 w1 ~# m0 d) ~
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    , G" e2 d9 f) \! V" \
13.     var video = document.getElementsByTagName('video')[0];
    5 Y) M5 }4 y% m- J
14.    
    
15.     var success = function(stream){
    1 f1 ]& _# s1 m8 E6 N
16.         video.src = window.URL.createObjectURL(stream);
    * _" h- |: K! X! O+ S0 V0 a
17.     }
    ! ~1 X& u9 ?5 S4 L$ R- B; \5 G
18. 
    
19.     socket.onopen = function(){
    3 w! T: n. F- P% D  t9 _
20.         draw();
    
21.     }
    0 i  l, h( Y+ I* [' d+ c9 N
22. 
    ( X& h) Z+ F! r6 A5 S5 I
23.     var draw = function(){
    
24.         try{
    : N4 z/ A' }% @6 P* B: R
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    2 H* {: M4 M$ R3 g4 Q! `
31.             }
    
32.         }
    
33.         if(video.src){
    ( x3 |! e7 p7 k! ]* m; \
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    . k- P6 J* t  j0 ^" A
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    5 y4 _, p% m! x
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   ( S% M4 f) H6 E- l& Q( b* a0 ^/ i
4. 
   + ~7 \) Y: z# @' a+ d
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   . ^8 }3 q1 e3 I9 G
10. 
    & G+ y8 {& D5 R9 s# n% a
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    & ^8 _$ i1 F2 v9 F1 l# A4 `8 h
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    : {/ l( ~5 ?4 c# U* q0 o
17.     }
    
18. 
    
19. });
    1 n' \! n* x1 T  h  c4 m
20. 
    : E( G( P/ a2 Y
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    / k8 E. d, D" E# n8 s6 U
24. 
    
25. $server->start();

复制代码

! z% w0 e- w! @2 B* w6 d

3 I! B8 T9 K) }7 o

$ ~( i, C- }5 M9 U" a






" c+ L, h* R$ B; i+ Q