swoole 直播

admin

主要使用 webstocket
" J3 w" n3 ^" f6 e( s7 S6 d上代码

前端

观看页面

1. <script type="text/javascript">
   : C% j! c2 r. m( v/ a# |$ p
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   5 k$ R/ o: h1 l, V9 i
3. 
   
4. ws.onopen = function() {
   . i: X. M5 k! X5 [3 [
5.     console.log("连接成功");
   # Z: B. T9 ~. l; S
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    1 |* t' q) E' Q9 ~+ g
11.    document.getElementById('player').src=data;
    
12. };
    ( L. ?) C% b1 C, D# p
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    ! \5 c/ v) @7 r# `) T% l
15. };
    ( T* I7 [6 B$ }1 e
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   & U# U' X3 {1 K$ d6 k  D  v
2. 
   * }3 \  F6 T: r# ~/ f
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   8 i: q7 m3 l) {0 ?6 J
9.     //socket.send("嗨我登陆了");
   . l+ b7 v# i# C1 @3 B7 v7 b
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    , Z) d7 H  X! W! p. k3 V( A4 b
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    + n0 [2 m, G( X: {# S& Q
21.     }
    
22. 
    ) J/ k% J( i2 n1 {
23.     var draw = function(){
    
24.         try{
    , q2 E- }! x6 _
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    # b+ a& m' U/ V  J0 y
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    2 `% _* E+ i1 M2 h9 H2 x
28.                 return setTimeout(draw, 100);
    ) N# ~. j* g6 E% h
29.             } else {
    
30.                 throw e;
    
31.             }
    
32.         }
    0 L4 H) t& p  O6 h
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    ) V) K5 r& P% a' ^% C- o& a
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    1 O# R, |  z$ P" I# `1 o3 S
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   / B; Z# V+ [& y; M+ A
2. 
   : k' z$ }& J& M- V
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   4 e" I$ \" E8 b! H* d; D% G. g
4. 
   
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. });
   3 G' G1 u# P& x" ~! d0 ]
10. 
    2 b! `: m6 D, }( @0 P+ P8 c
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    # K7 N; B+ R0 i; Q, z
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    . \' b4 T# ~& ^) l
16.         $server->push($fd, $frame->data);
    ( W8 j0 N- M# j, g$ `7 k
17.     }
    5 ^. s4 t; O& H* H- w, B0 j
18. 
    5 |9 @1 G6 R. ^4 o' i
19. });
    ! r- `* E% V! n4 ]/ z  ^) Z, h
20. 
    ( c: f$ Q: d% g# q- h
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    " \5 C" A2 U5 r" M- T4 L7 E
23. });
    
24. 
    4 Y) v; x  V8 Z3 |
25. $server->start();

复制代码

2 ]1 v9 t* l# W! ]
) X8 s1 |1 f% v! f6 E% y1 _/ X8 F
$ Q5 R+ t0 b$ U6 f

- S& {3 r/ _: r8 M
7 f- F+ \8 w, l' ^
" u  }6 {3 w% F; O; R
" ~# Y/ E. f+ I" y& T

- Q) Z. ?; S5 g& P: H- O0 M  w