cncml手绘网
标题: swoole 直播 [打印本页]
作者: admin 时间: 2020-3-31 19:41
标题: swoole 直播
主要使用 webstocket' S( }+ |' K8 O) {( g
上代码
前端
观看页面
- <script type="text/javascript">
; ~1 v0 D7 J& R" O - var ws = new WebSocket('ws://192.168.0.150:9502');
( @9 s. }: b6 [# ` - , Q r4 s/ ?8 P
- ws.onopen = function() {
" ?6 A% u* A6 M7 @ - console.log("连接成功");
6 D) W# T* _8 a) s( S* q - };! j. W1 u2 L$ {' y, {9 e! g
- ws.onmessage = function(e) {$ t" u+ }2 D/ d h* ]- O
- console.log(e);, L1 L/ V$ i- |/ Q! u y3 T2 q4 T
- . z; D6 n0 |0 `% M$ t1 c8 h
- var data = e.data;# k& I! r. W. I, Y, U3 Q }
- document.getElementById('player').src=data;, }! [# Z! _# o T
- };. Z: _; D% o" W V% ^( t
- ws.onerror = function() {
, F8 v: p' T, x- @ - console.log("关闭连接");8 u/ l) r3 k( N0 r& o- g
- };
- J, w# A. x$ t: l; Z - </script>
复制代码录像页面
3 _7 K2 ~5 s# ^% S1 b9 h+ D( c3 N最好用火狐测试。
- <canvas id="output" style="display:none"></canvas>
7 E" }$ H" y0 w |
% L) s6 z; H: i: f) v8 H) r) Q8 Z- / S9 }# r) R8 d$ F9 |& a& u
- ; Y( c' L8 D4 Y H. t" G) }; A
- <script type="text/javascript" charset="utf-8">
0 q% T; O- e$ R- ~3 h - 8 k2 a) h9 U# q( W0 l2 _! O
-
) a& e: J+ y+ [2 D/ w& ? - var socket = new WebSocket('ws://192.168.0.150:9502');
, G0 _, _/ p- b2 @$ M. X# ?0 Q - //socket.send("嗨我登陆了");
8 m) e- {7 z6 G! e' Z2 _8 v - 0 D3 j0 e9 y& u' C
- var back = document.getElementById('output');
5 T1 k: b' F; g6 D - var backcontext = back.getContext('2d');' V! \- ~: e0 S: |! T, L
- var video = document.getElementsByTagName('video')[0];7 h. R7 U% u j& j5 z9 {$ B5 Q7 C
-
+ C5 i% J+ m4 _: [ - var success = function(stream){8 `) t+ N6 }4 y7 F
- video.src = window.URL.createObjectURL(stream);, E" i, e% r; P6 i4 H( P3 H
- }- E+ _% g# Z8 K( y/ Y$ {5 I/ S" e
4 y Z- d6 f. m+ H- socket.onopen = function(){
( _$ e4 W$ \7 u5 G0 ?5 q - draw();
, M* r8 S: V9 a" d - }
% k" O* S% h" J$ R$ \) }+ P
7 J* |, k n1 u) p' P- var draw = function(){
0 y/ b' F/ c2 ]5 b3 E - try{# p, C7 m- O. G; f L! i
- backcontext.drawImage(video,0,0, back.width, back.height);* A/ i3 F# n: \) W( i
- }catch(e){
4 W9 ]- Y' P% E, d* c+ c - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
9 ]8 T0 i$ ~* l1 U% i' Y4 K - return setTimeout(draw, 100);
9 M% P' u) g# [/ v" Z - } else {) P$ m: D) @& ~! v5 e
- throw e;8 l# P8 ]+ }5 c3 Z& n
- }
+ G; {. P/ F1 [ - }
6 m4 z+ o5 g; T+ b6 g - if(video.src){
7 z: I6 q3 L5 b# K e2 Q - socket.send(back.toDataURL("image/jpeg", 0.5));
4 Y* m2 T6 e7 y- g0 C$ A s - }
( Y J+ I, y8 Z7 n - setTimeout(draw, 100);
# \7 v: v+ q t. x5 c# ^ - }* n7 d1 {4 R2 W7 g2 e& E; Q
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||; ?3 i+ z8 J" j5 s# |9 k6 t
- navigator.mozGetUserMedia || navigator.msGetUserMedia;/ F, w/ D! E9 t
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
" b0 E& Q1 ~# W `1 ?# s) h' m - </script>
复制代码- php
, U$ U M9 _" _) x# `2 v: Y) P
" q. L9 Y; B) I' l9 u, w- $server = new swoole_websocket_server("0.0.0.0", 9502);/ p0 `9 e1 {. V- n" G; F; c
; e, f4 u9 Y' H- $server->on('open', function (swoole_websocket_server $server, $request) {4 v8 Y; f/ }9 r0 r3 |9 t
]( z# X3 E' c$ ^, m( _- echo "新用户id:{$request->fd}加入了\n";
7 W) p) H! H7 { - // echo "server: handshake success with fd{$request->fd}\n";
. ^5 Z) d2 I7 M4 s2 P, `! X - });- T+ E) R; r$ ]* Z, i% I& B: {
- 7 r( ~( j% K% m3 t' Y0 c! {' r; V/ O
- $server->on('message', function (swoole_websocket_server $server, $frame) {5 }( X$ l0 E. _, {% a5 m
- 0 V' \7 w5 ]" U/ B
- //循环所有数据" _: V- } N# ^& I6 B& |
- foreach($server->connections as $fd) {8 f9 g! p4 I" H
- //返回数据
! o: x" o! o$ Z: K - $server->push($fd, $frame->data);6 Z+ r- Z: P. M$ p; X
- }- q4 j r9 s* Y" |
- $ z9 J; Z) A) Z2 X9 j6 i' }1 Z
- });$ S( D4 W) k" J7 H" B
- 7 K- z! @: F; S; _
- $server->on('close', function ($ser, $fd) {/ a; s! q0 C' `7 D
- echo "用户id: {$fd} 退出\n";
! O4 r/ s' k8 M - });
, z4 r; S* | }5 s4 {: O
. O. f8 Z, A0 ]- $server->start();
复制代码 $ E: G% M4 ^' ^; N) I
3 e) a7 h4 [: W9 h0 L2 I0 r* l2 |
- Z. ^* N3 b" ]) Q& ?6 a. e
! o" d2 ?$ ?9 n9 P; o
, |' F5 s+ C$ H$ j5 d9 c: m# n' [: D9 n, v% G9 O
' G5 w8 I) ^# I2 U8 j* J/ U7 W$ s$ Y$ @" U
' S- H8 f" E. ?* b- [- q$ s0 |$ u _
8 g9 o9 h& f& U* h& N& @# F' A W5 R3 E9 t$ t( v
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |