swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   , W) a. L- I' w3 ]/ \$ _( [
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   5 Q9 i( ^/ E& F  C9 ~( I) `: Q; q
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    8 Z& O  w5 d$ A0 ]- I8 ?% b* u
12. };
    
13. ws.onerror = function() {
    & P. f7 z% V$ T
14.     console.log("关闭连接");
    , v' T) t5 a4 U/ {
15. };
    0 [/ [0 L7 h* y7 V5 K
16. </script>

复制代码

录像页面

2 u0 j/ Q( F7 t' E: n) E9 c8 T

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
     A9 r# Z3 d4 s5 o
4. 
   
5. <script type="text/javascript" charset="utf-8">
   ( G$ E$ }4 ^9 x1 K0 ~  I5 A# u
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   4 E5 Y+ n$ a1 I4 R8 ?" O
9.     //socket.send("嗨我登陆了");
   ( H) e; c" |: e" J+ e
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    ! S0 m+ }0 X0 l% d4 j  i
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    / r) X( `% x% I8 |2 k4 H4 p; p7 Q/ G
15.     var success = function(stream){
    7 z  c# c& j% l; N( ?9 [8 r: L  T
16.         video.src = window.URL.createObjectURL(stream);
    $ s# [" V# Z, |
17.     }
    
18. 
    $ |# D. |. T0 x! q) C2 w, ]9 o
19.     socket.onopen = function(){
    / S" n" h$ S% x* o+ c' B
20.         draw();
    5 U/ K" Z; C6 m( X2 ?& Z
21.     }
    
22. 
    : b. r5 x: S& m* }& r' E
23.     var draw = function(){
    
24.         try{
    1 [+ {+ u6 h- {: S6 S
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);
    + q) s+ H: d2 a; [/ _
29.             } else {
    3 ^+ K* b! z4 c4 `  w$ S  O9 \( m2 d8 {3 o
30.                 throw e;
    
31.             }
    ) t4 i8 D+ ?) X8 ~' L& \8 D
32.         }
    
33.         if(video.src){
    6 w3 K5 m9 |; p; J9 \( t* Q# @
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    2 \( g) ~2 w3 q: t8 t
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    9 [% B4 o) |& v+ t
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    1 w+ [* S) u$ R
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    6 ?' l& X! x- ~7 z
41. </script>

复制代码

1. php
   , ]" B! r# i, U, K+ y8 M
2. 
   " C, a& u$ K8 \. E
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   " O- T7 @" r  O" K) x
4. 
   ) c; K, K% l3 z1 ~& M
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   % z' f* B7 x. W5 U; d) I
8.    // echo "server: handshake success with fd{$request->fd}\n";
   6 a1 J' l. Q7 l2 Q
9. });
   ( C8 m# {/ I$ W+ h7 S& R6 k
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    + U+ W# H5 B4 p( u
14.     foreach($server->connections as $fd) {
    . y* k+ x& D+ ^* a; T4 |# {* p9 E
15.         //返回数据
    $ H2 z' {! H- x8 y
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    & f; S# u' a( E7 t) u6 E; J, O: Q- l
20. 
    . G1 l* q! B% y
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    5 |9 H# t* X# W, G" J! j
25. $server->start();

复制代码

0 h/ O1 G2 I& q2 k# d& T  \
( \+ n; i7 s7 ?- P0 N7 ]3 ^9 C9 l
7 s: h3 D# z; Y! o9 r9 R
- k- ?: p0 ?' |# ]& C& r
- B& v5 L$ n9 I2 B- _: G" {

& n# e- V7 x; `. }4 l& }; `


: u7 L% F9 F# n* y! }