- 浏览: 1444668 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (691)
- linux (207)
- shell (33)
- java (42)
- 其他 (22)
- javascript (33)
- cloud (16)
- python (33)
- c (48)
- sql (12)
- 工具 (6)
- 缓存 (16)
- ubuntu (7)
- perl (3)
- lua (2)
- 超级有用 (2)
- 服务器 (2)
- mac (22)
- nginx (34)
- php (2)
- 内核 (2)
- gdb (13)
- ICTCLAS (2)
- mac android (0)
- unix (1)
- android (1)
- vim (1)
- epoll (1)
- ios (21)
- mysql (3)
- systemtap (1)
- 算法 (2)
- 汇编 (2)
- arm (3)
- 我的数据结构 (8)
- websocket (12)
- hadoop (5)
- thrift (2)
- hbase (1)
- graphviz (1)
- redis (1)
- raspberry (2)
- qemu (31)
- opencv (4)
- socket (1)
- opengl (1)
- ibeacons (1)
- emacs (6)
- openstack (24)
- docker (1)
- webrtc (11)
- angularjs (2)
- neutron (23)
- jslinux (18)
- 网络 (13)
- tap (9)
- tensorflow (8)
- nlu (4)
- asm.js (5)
- sip (3)
- xl2tp (5)
- conda (1)
- emscripten (6)
- ffmpeg (10)
- srt (1)
- wasm (5)
- bert (3)
- kaldi (4)
- 知识图谱 (1)
最新评论
-
wahahachuang8:
我喜欢代码简洁易读,服务稳定的推送服务,前段时间研究了一下go ...
websocket的helloworld -
q114687576:
http://www.blue-zero.com/WebSoc ...
websocket的helloworld -
zhaoyanzimm:
感谢您的分享,给我提供了很大的帮助,在使用过程中发现了一个问题 ...
nginx的helloworld模块的helloworld -
haoningabc:
leebyte 写道太NB了,期待早日用上Killinux!么 ...
qemu+emacs+gdb调试内核 -
leebyte:
太NB了,期待早日用上Killinux!
qemu+emacs+gdb调试内核
这个需要注意
https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate
先测试ios上的wss的websocket是否好使,否则会报错
iphone连接mac后,可以在mac上的safri上调试ios的safri,这个很重要
https://www.cnblogs.com/rglmuselily/p/7047814.html
测试websocket的代码
需求:
想做个webrtc的demo,测试iphonex上的safari的支持情况。
遇到的问题,webrtc需要https才能用,webrtc需要websocket建立第一次连接,https就需要wss的websocket,
https最好有个测试域名,
wss在ios的safari上没有验证的证书会报错(即使mac上的safari和chrome能过)。
所以现在想要:
1.测试的手机能访问的域名,
2.再制作个自制证书,让ios的适应https的wss的websocket不报错。
1.让ios设备能访问自己的域名
ios没越狱不能改host,但是我们可以使用瓷瓶charles作为代理
这样mac设置了host,ios就通过代理也能访问这个host设置的域名
#########################
安装mac上的工具瓷瓶charles
https://blog.csdn.net/qq_37336604/article/details/80521056
按照常规安装好charles软件之后,打开软件,点击工具栏中的help --> register
输入如下信息:
安装完后http://localhost:8888 如果有反应则启动成功
本机mac配置host
/etc/hosts
192.168.0.101 haoning.com
本机ip设置自己的想要的域名
ping haoning.com可以通
在ios设备上配置网络
2.自制ca证书如下
如果https的websocket连接没有证书,ios的safari是会报错误的,但是mac下的chrome和safari正常
参考
https://www.cnblogs.com/xinzhao/p/4950689.html
自制一个ca证书
再用ca制作一个server证书
server的证书和key放在nginx里
ca的证书发给客户端
制作证书
在制作server.csr的时候注意一下,common host要输入你的网站的域名,
比如haoning.com
ca.crt导入mac和ios设备
server.key 和server.crt放到nginx配置
所有的key都生成在nginx/conf/ssl下
nginx配置
ca.crt这个ca的证书用邮件的方式发给ios,ios打开自带邮件的时候证书可以安装,微信传不行,设置,然后ios设置里搜索 “证书信任设置”
针对跟证书启用完全信任,把刚才装的证书启用信任
nginx挂了一个tap的3000端口的websocket
启动
node server.js
缺什么npm自己装吧
新版支持ios的safari的webrtc的h5的代码为
测试,mac下
https://haoning.com/webrtc.html
ios设备下 https://haoning.com/webrtc.html#true
实现两个设备的连接
备注:
在mac下如果安装证书
chrome里面
或者找到系统钥匙串
设置信任
在mac上 装完之后chrome虽然还是红色不安全,但是已经可以用了,safari测试完全安全了
https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate
先测试ios上的wss的websocket是否好使,否则会报错
iphone连接mac后,可以在mac上的safri上调试ios的safri,这个很重要
https://www.cnblogs.com/rglmuselily/p/7047814.html
测试websocket的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <script type="text/javascript"> var ws = null; function startServer() { console.log("---start---->"); var url = "wss://killinux.idwk.top/tap"; //var url = "wss://killinux.idwk.top:3001"; if ('WebSocket' in window) { ws = new WebSocket(url); document.getElementById("hehe").innerText="WebSocket"; } else if ('MozWebSocket' in window) { document.getElementById("hehe").innerText="MozWebSocket"; ws = new MozWebSocket(url); } else { alert('浏览器不支持'); return; } ws.onopen = function() { alert('Opened!'); }; // 收到服务器发送的文本消息, event.data表示文本内容 ws.onmessage = function(event) { alert('Receive message: ' + event.data); }; ws.onclose = function() { alert('Closed!'); } } //发送信息 function sendMessage(){ var textMessage=document.getElementById("textMessage").value; if(ws!=null&&textMessage!=""){ ws.send(textMessage); } } </script> <body > onload="startServer()" <div id="hehe">ha meiyou </div> <input type="button" onclick="startServer()" value="start"> <input type="text" id="textMessage" size="20" /> <input type="button" onclick="sendMessage()" value="Send"> </body> </html>
需求:
想做个webrtc的demo,测试iphonex上的safari的支持情况。
遇到的问题,webrtc需要https才能用,webrtc需要websocket建立第一次连接,https就需要wss的websocket,
https最好有个测试域名,
wss在ios的safari上没有验证的证书会报错(即使mac上的safari和chrome能过)。
所以现在想要:
1.测试的手机能访问的域名,
2.再制作个自制证书,让ios的适应https的wss的websocket不报错。
1.让ios设备能访问自己的域名
ios没越狱不能改host,但是我们可以使用瓷瓶charles作为代理
这样mac设置了host,ios就通过代理也能访问这个host设置的域名
#########################
安装mac上的工具瓷瓶charles
https://blog.csdn.net/qq_37336604/article/details/80521056
按照常规安装好charles软件之后,打开软件,点击工具栏中的help --> register
输入如下信息:
Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4
安装完后http://localhost:8888 如果有反应则启动成功
本机mac配置host
/etc/hosts
192.168.0.101 haoning.com
本机ip设置自己的想要的域名
ping haoning.com可以通
在ios设备上配置网络
2.自制ca证书如下
如果https的websocket连接没有证书,ios的safari是会报错误的,但是mac下的chrome和safari正常
参考
https://www.cnblogs.com/xinzhao/p/4950689.html
自制一个ca证书
再用ca制作一个server证书
server的证书和key放在nginx里
ca的证书发给客户端
制作证书
openssl genrsa -out ca.key 2048 openssl req -x509 -new -key ca.key -out ca.crt openssl genrsa -out server.key 2048 openssl req -new -key server.key -out server.csr openssl x509 -req -sha256 -in server.csr -CA ca.crt -CAkey ca.key -CAcreateserial -days 3650 -out server.crt
在制作server.csr的时候注意一下,common host要输入你的网站的域名,
比如haoning.com
ca.crt导入mac和ios设备
server.key 和server.crt放到nginx配置
所有的key都生成在nginx/conf/ssl下
nginx配置
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; autoindex on; sendfile on; keepalive_timeout 65; upstream mybackend { server 192.168.0.101:3000; } server { # listen 80; # server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; #location / { # root html; # index index.html index.htm; #} listen 443 ssl; server_name haoning.com; ssl on; ssl_certificate ssl/server.crt; ssl_certificate_key ssl/server.key; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_protocols SSLv2 SSLv3 TLSv1; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; } location /tap { access_log off; proxy_pass http://mybackend; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
ca.crt这个ca的证书用邮件的方式发给ios,ios打开自带邮件的时候证书可以安装,微信传不行,设置,然后ios设置里搜索 “证书信任设置”
针对跟证书启用完全信任,把刚才装的证书启用信任
nginx挂了一个tap的3000端口的websocket
//http://www.blogjava.net/linli/archive/2014/10/21/418910.html var express = require('express'), app = express(), server = require('http').createServer(app); server.listen(3000); app.get('/', function(req, res) { res.sendfile(__dirname + '/webrtc.html'); }); var WebSocketServer = require('ws').Server, wss = new WebSocketServer({server: server}); // 存储socket的数组,这里只能有2个socket,每次测试需要重启,否则会出错 var wsc = [], index = 1; // 有socket连入 wss.on('connection', function(ws) { console.log('connection'); // 将socket存入数组 wsc.push(ws); // 记下对方socket在数组中的下标,因为这个测试程序只允许2个socket // 所以第一个连入的socket存入0,第二个连入的就是存入1 // otherIndex就反着来,第一个socket的otherIndex下标为1,第二个socket的otherIndex下标为0 var otherIndex = index--, desc = null; if (otherIndex == 1) { desc = 'first socket'; } else { desc = 'second socket'; } // 转发收到的消息 ws.on('message', function(message) { var json = JSON.parse(message); console.log('received (' + desc + '): ', json); console.log('otherIndex ---(' + otherIndex + '): '); wsc[otherIndex].send(message, function (error) { if (error) { console.log('Send message error (' + desc + '): ', error); } }); }); });
启动
node server.js
缺什么npm自己装吧
新版支持ios的safari的webrtc的h5的代码为
<html> <body> <div id="hehe">mei da kai</div> Local: <br> <video id="localVideo" autoplay playsinline></video><br> Remote: <br> <video id="remoteVideo" autoplay playsinline></video> <script> // 仅仅用于控制哪一端的浏览器发起offer,#号后面有值的一方发起 var isCaller = window.location.href.split('#')[1]; // 与信令服务器的WebSocket连接 //var socket = new WebSocket("ws://192.168.0.100:3000"); //var socket = new WebSocket("wss://192.168.0.101/tap"); var socket = new WebSocket("wss://haoning.com/tap"); socket.onopen = function() { document.getElementById("hehe").innerText="dakaile" ; }; // stun和turn服务器 var iceServer = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }, { "url": "turn:numb.viagenie.ca", "username": "haoningabc@163.com", "credential": "12345" }] }; // 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域网下通讯) //var pc = new webkitRTCPeerConnection(iceServer); var pc = new RTCPeerConnection(null); // 发送ICE候选到其他客户端 pc.onicecandidate = function(event){ console.log("onicecandidate-->"); if (event.candidate !== null) { socket.send(JSON.stringify({ "event": "_ice_candidate", "data": { "candidate": event.candidate } })); } }; function gotRemoteStream(e) { console.log("gotRemoteStream---->"); if (document.getElementById('remoteVideo').srcObject !== e.streams[0]) { document.getElementById('remoteVideo').srcObject = e.streams[0]; } } pc.oniceconnectionstatechange = e => onIceStateChange(pc, e); function onIceStateChange(pc, event) { if (pc) { //console.log(`${getName(pc)} ICE state: ${pc.iceConnectionState}`); console.log('ICE state change event: ', event); } } pc.ontrack = gotRemoteStream; // 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出 // pc.onaddstream = function(event){ // // document.getElementById('remoteVideo').src = URL.createObjectURL(event.stream); // document.getElementById('remoteVideo').srcObject = event.streams[0]; // }; // 发送offer和answer的函数,发送本地session描述 var sendOfferFn = function(desc){ console.log("sendOfferFn--->"); pc.setLocalDescription(desc); socket.send(JSON.stringify({ "event": "_offer", "data": { "sdp": desc } })); }, sendAnswerFn = function(desc){ console.log("sendAnswerFn--->"); pc.setLocalDescription(desc); socket.send(JSON.stringify({ "event": "_answer", "data": { "sdp": desc } })); }; function successFunction(stream){ console.log("successFunction--->"); //绑定本地媒体流到video标签用于输出 // document.getElementById('localVideo').src = URL.createObjectURL(stream); //向PeerConnection中加入需要发送的流 const videoTracks = stream.getVideoTracks(); // console.log('Got stream with constraints:', constraints); console.log(`Using video device: ${videoTracks[0].label}`); window.stream = stream; // make variable available to browser console document.getElementById('localVideo').srcObject = stream; //pc.addStream(stream); stream.getTracks().forEach(track => pc.addTrack(track, stream)); //如果是发起方则发送一个offer信令 if(isCaller){ pc.createOffer(sendOfferFn, function (error) { console.log('Failure callback: ' + error); }); } } function errorFunction(error){ //处理媒体流创建失败错误 console.log('getUserMedia error: ' + error); } navigator.mediaDevices .getUserMedia({ "audio": false, "video": true }) .then(successFunction) .catch(errorFunction); // 获取本地音频和视频流 // navigator.webkitGetUserMedia({ // "audio": true, // "video": true // }, function(stream){ // //绑定本地媒体流到video标签用于输出 // document.getElementById('localVideo').src = URL.createObjectURL(stream); // //向PeerConnection中加入需要发送的流 // pc.addStream(stream); // //如果是发起方则发送一个offer信令 // if(isCaller){ // pc.createOffer(sendOfferFn, function (error) { // console.log('Failure callback: ' + error); // }); // } // }, function(error){ // //处理媒体流创建失败错误 // console.log('getUserMedia error: ' + error); // }); //处理到来的信令 socket.onmessage = function(event){ var json = JSON.parse(event.data); console.log('onmessage: ', json); //如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述 if( json.event === "_ice_candidate" ){ pc.addIceCandidate(new RTCIceCandidate(json.data.candidate)); } else { pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp)); // 如果是一个offer,那么需要回复一个answer if(json.event === "_offer") { pc.createAnswer(sendAnswerFn, function (error) { console.log('Failure callback: ' + error); }); } } }; </script> </body> </html>
测试,mac下
https://haoning.com/webrtc.html
ios设备下 https://haoning.com/webrtc.html#true
实现两个设备的连接
备注:
在mac下如果安装证书
chrome里面
或者找到系统钥匙串
设置信任
在mac上 装完之后chrome虽然还是红色不安全,但是已经可以用了,safari测试完全安全了
发表评论
-
srt学习笔记一:srt的helloworld
2020-03-27 19:13 5641。无服务的方式:udp, 2。srs作为服务端:rtmp推收 ... -
nginx push_upstream模块的websocket
2018-05-04 23:27 1156参考 https://www.rails365.net/art ... -
openresty聊天室的helloworld
2018-04-22 19:25 724openresty的websocket + redis的sub ... -
openresty websocket
2018-04-18 17:08 1411mac安装openresty brew install o ... -
nginx模块开发(三)upstream模块
2017-08-20 23:48 792使用nginx-1.13.4版本 三个文件ngx_http_ ... -
nginx模块开发(二) 使用gdb-dashboard调试
2017-08-11 18:47 1921gdb-dashboard或者 gdbgui 或者gdb自带 ... -
nginx模块开发(一)
2017-07-29 22:44 524决定重新整理nginx模块开发 helloworld con ... -
nginx带进度条的上传超大文件
2016-12-12 18:40 382211年写的 http://haoningabc.iteye.c ... -
nginx rewrite替代apache rewrite
2016-10-18 20:30 786清理chrome的缓存 chrome://appcache-i ... -
ffmpeg+nginx 的直播(2,直播摄像头和麦克风)
2016-05-28 20:21 4258假设我的服务器是centos7 192.168.139.117 ... -
ffmpeg+nginx 的直播(1,直播播放的视频文件)
2016-05-26 17:11 651964位操作系统centos7 ############ 1.一 ... -
webrtc学习笔记九 (datachannel在jslinux的应用,java版本)
2015-10-15 17:45 2461目标:使用java的websocket作为datachannl ... -
webrtc学习笔记八(datachannnel同步textarea)
2015-10-09 16:47 11142020年5月12日更新 出现错误 websocket Fai ... -
webrtc学习笔记七(datachannel在jslinux的应用,nodejs版本)
2015-10-09 15:34 802目标: 两个浏览器的jslinux可以进行数据交互 fa ... -
webrtc学习笔记六(datachannel+websocket)
2015-10-03 00:12 14952020年5月12日更新 5年前的例子又不好使了, 出现错误 ... -
webrtc学习笔记五(视频流和datachannel一起使用的例子)
2015-09-30 23:57 36372020年5月9日更新,5年前 ... -
webrtc学习笔记四(获取真实的ip)
2015-09-28 14:47 3957<script> function getI ... -
webrtc学习笔记三(截屏快照)
2015-09-25 14:46 2194需要注意的问题: sizeCanvas这个方法帮助解决的 ch ... -
webrtc学习笔记二(datachannel)
2015-09-24 17:57 2397https://www.webrtc-experiment.c ... -
webrtc学习笔记一 (视频流)
2015-09-24 17:39 4412google官方的 socket.io的源码 https:// ...
相关推荐
WebRTCiOS WebRTCapp是我的最终学位项目的一部分,只是一个小细节。 该应用程序旨在成为主要使用WebRTC技术创建的小型视频会议应用程序。 使用它,您可以通过Web套接字连接进行呼叫。OpenVidu 该应用程序是在连接到...
webrtc静态库,可用于webrtc iOS开发,封装已完成!webrtc静态库(iOS)
一个跨平台的音频混音器,支持android、ios、macos和windows。由WebRTC、FFMPEG和吉尼提供支持。
iOS webRTC 提取的webRTC的音频降噪的源码,配合这篇博文使用https://blog.csdn.net/ffffuckyou/article/details/90902281
srs服务用于测试webrtc推流是否成功
srs webrtc前端拉流播放(附带测试地址)
# 新建文件夹 命名webrtc ,将该脚本拷贝到 该文件夹内,然后 cd 到该文件夹,然后 ./build.sh -i -u # 如果本地已经下载过代码 则 ./build.sh -i -r # 如果想编译生成 xcode 工程 则将GENERATORS="ninja" 改为 ...
上传了我本人测试通过的WebRTC Demo
这是一个使用库的 WebRTC 测试页面。 它旨在测试 WebRTC 是否在特定设备上工作,帮助查找用户设置中的错误并识别palava-client库中的错误。用法本项目使用生成静态内容。 安装 Wintersmith 和此包的依赖项: [sudo]...
从RTSP到WebRTC 后端kurento-media-server实现rtsp流转webRtc播放
google webrtc视频语音本地测试客户端 自己编译的最新版webrtc本地测试客户端
webrtc 官网的iOS端源码下载和编译步骤,整理的比较清晰
http://blog.csdn.net/ren65432/article/details/53815832
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案,延迟降低到了0.4秒左右,...
aiortc - 使用Python的asyncio实现WebRTC和ORTC
iOS支持WebRTC bowser ,在iOS上运行支持WebRTC,基于OpenWebRTC。是爱立信公司的开源项目。
一个简单的本地WebRTC演示iOS应用程序,使用swift。 免责声明 该演示应用程序的目的是演示建立与WebRTC的对等连接所需的最低要求。 这不是生产就绪代码! 为了拥有量产的VoIP应用程序,您将需要具有真实的信令...
google webrtc视频语音本地测试服务端
适用于ios/android的flutter webrtc插件
基于skyrtc ios版本,服务基于skyrtc的服务。绝对值得拥有