- 浏览: 1474363 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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调试内核
2020年5月9日更新,5年前的例子运行不了了,更新下html
主要是chrome的URL的api变了
在mac的chrome上
把 document.getElementById('remoteVideo').src = window.URL.createObjectURL(event.stream);
改成
document.getElementById('remoteVideo').srcObject = event.stream;
参考:https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url
视频和datachannel一起使用的两个页面的例子
网上的datachannel只能在一个页面,
根据视频的改了下两个页面可以传数据了
疑问:ondatachannel似乎没用上
先打开192.168.137.27:8081/js/webrtc2.html
另一台电脑打开
192.168.137.27:8081/js/webrtc2.html#true
视频正确两个都显示了才正确,
websocket三个页面有问题,没优化
server.js
webrtc2.html
主要是chrome的URL的api变了
在mac的chrome上
把 document.getElementById('remoteVideo').src = window.URL.createObjectURL(event.stream);
改成
document.getElementById('remoteVideo').srcObject = event.stream;
参考:https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url
视频和datachannel一起使用的两个页面的例子
网上的datachannel只能在一个页面,
根据视频的改了下两个页面可以传数据了
疑问:ondatachannel似乎没用上
先打开192.168.137.27:8081/js/webrtc2.html
另一台电脑打开
192.168.137.27:8081/js/webrtc2.html#true
视频正确两个都显示了才正确,
websocket三个页面有问题,没优化
server.js
//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}); function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; description+=i+" = "+property+"\n"; } console.log(description); } // 存储socket的数组,这里只能有2个socket,每次测试需要重启,否则会出错 var wsc = [], index = 1; // 有socket连入 wss.on('connection', function(ws) { console.log('connection:'); //writeObj(ws); // 将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 ---('+desc+')(' + otherIndex + '): '+json.event); wsc[otherIndex].send(message, function (error) { if (error) { console.log('Send message error (' + desc + '): ', error); } }); }); });
webrtc2.html
<html> <body> <button id="sendButton" onclick="sendData()">Send</button> <textarea id="dataChannelSend" >abc</textarea> <textarea id="dataChannelReceive" ></textarea> Local: <br> <video id="localVideo" autoplay></video><br> Remote: <br> <video id="remoteVideo" autoplay></video> <script> function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; description+=i+" = "+property+"\n"; } console.log(description); } var isCaller = window.location.href.split('#')[1]; var socket = new WebSocket("ws://192.168.137.27:3000"); socket.onmessage = function(event){ var json = JSON.parse(event.data); //console.log('onmessage: ', json); //如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述 if( json.event === "_ice_candidate" ){ // console.log("_ice_candidate:---->"); // writeObj(json.data.candidate); pc.addIceCandidate(new RTCIceCandidate(json.data.candidate)); } else { // console.log("not _ice_candidate:---->"); // writeObj(json.data.sdp); pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp)); console.log("---------------->pc.setRemote"); // 如果是一个offer,那么需要回复一个answer if(json.event === "_offer") { console.log("------->createAnswer"); pc.createAnswer(function(desc){ pc.setLocalDescription(desc); console.log("---------------->pc.setLocal"); socket.send(JSON.stringify({ "event": "_answer", "data": { "sdp": desc } })); }, function (error) { console.log('Failure callback: ' + error); }); }else{ console.log("------->receive Answer---('"+json.event+"')"); } } }; var iceServer = null; var pc = new webkitRTCPeerConnection(iceServer,{optional: [{RtpDataChannels: true}]}); try { sendChannel = pc.createDataChannel('sendDataChannel',{reliable: true}); } catch (e) { alert('createDataChannel() failed with exception: ' + e.message); } sendChannel.onopen = console.log('--Send channel open state is : ' +sendChannel.readyState); sendChannel.onclose = console.log('--Send channel close state is: ' +sendChannel.readyState); // 发送ICE候选到其他客户端 pc.onicecandidate = function(event){ console.log("onicecandidate----------->"); if (event.candidate !== null) { console.log("event.candidate != null"); socket.send(JSON.stringify({ "event": "_ice_candidate", "data": { "candidate": event.candidate } })); }else{ console.log("event.candidate == null"); } }; sendChannel.onmessage = function(event) { console.log("-sendChannel--★★★★★---ondatachannel"); document.getElementById('dataChannelReceive').value = event.data; }; /*pc.ondatachannel = function(event) { console.log("-receiveChannel--★★★★★---ondatachannel"); receiveChannel = event.channel; receiveChannel.onmessage = function(event) { document.getElementById('dataChannelReceive').value = event.data; }; receiveChannel.onopen = console.log('--Receive channel open state is: ' + receiveChannel.readyState);; receiveChannel.onclose = console.log('--Receive channel close state is: ' + receiveChannel.readyState);; };*/ // 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出 pc.onaddstream = function(event){ //document.getElementById('remoteVideo').src = URL.createObjectURL(event.stream); document.getElementById('remoteVideo').srcObject = event.stream; }; function sendData() { var data = document.getElementById('dataChannelSend').value; console.log("---->>>>sendData():"+data); sendChannel.send(data); } navigator.webkitGetUserMedia({ "audio": true, "video": true }, function(stream){ // document.getElementById('localVideo').src = URL.createObjectURL(stream); document.getElementById('localVideo').srcObject = stream; pc.addStream(stream); if(isCaller){ console.log("------->createOffer"); pc.createOffer(function(desc){ // console.log(desc); pc.setLocalDescription(desc); console.log("---------------->pc.setLocal"); socket.send(JSON.stringify({ "event": "_offer", "data": { "sdp": desc } })); }, function (error) { console.log('Failure callback: ' + error); }); } }, function(error){ console.log('getUserMedia error: ' + error); }); </script> </body> </html>
发表评论
-
srt学习笔记一:srt的helloworld
2020-03-27 19:13 7571。无服务的方式:udp, 2。srs作为服务端:rtmp推收 ... -
ios的safari使用自制ca证书测试webrtc
2018-08-20 13:31 2426这个需要注意 https://stackoverflow.c ... -
webrtc学习笔记九 (datachannel在jslinux的应用,java版本)
2015-10-15 17:45 2518目标:使用java的websocket作为datachannl ... -
webrtc学习笔记八(datachannnel同步textarea)
2015-10-09 16:47 11662020年5月12日更新 出现错误 websocket Fai ... -
webrtc学习笔记七(datachannel在jslinux的应用,nodejs版本)
2015-10-09 15:34 854目标: 两个浏览器的jslinux可以进行数据交互 fa ... -
webrtc学习笔记六(datachannel+websocket)
2015-10-03 00:12 15832020年5月12日更新 5年前的例子又不好使了, 出现错误 ... -
webrtc学习笔记四(获取真实的ip)
2015-09-28 14:47 4047<script> function getI ... -
webrtc学习笔记三(截屏快照)
2015-09-25 14:46 2247需要注意的问题: sizeCanvas这个方法帮助解决的 ch ... -
webrtc学习笔记二(datachannel)
2015-09-24 17:57 2481https://www.webrtc-experiment.c ... -
webrtc学习笔记一 (视频流)
2015-09-24 17:39 4475google官方的 socket.io的源码 https:// ...
相关推荐
这篇“webrtc学习笔记一”主要关注的是视频流处理,是WebRTC技术中的核心部分。在深入讨论之前,先了解一下WebRTC的基本架构和组成部分。 1. **基础概念**: - **Peer Connection**: 是WebRTC的核心组件,负责...
在这个场景中,我们将探讨如何使用WebRTC从SRS(Simple RTMP Server)服务器拉取视频流并在Android应用中播放。 SRS是一个轻量级、高性能的RTMP服务器,它支持直播和点播,广泛应用于视频直播场景。WebRTC通常用于...
### WebRTC学习笔记_Demo收集 #### 一、WebRTC现状与历史背景 WebRTC(Web Real-Time Communication)是一项开放的、免费的技术框架,旨在使Web浏览器能够在无需插件的情况下进行实时音视频通信。该技术最初由...
本demo采用web网页作为客户端,webrtc作为服务端,实现多路rtsp视频流在网页端同时实时预览。 其中包含两个文件夹:webrtc-qmy为客户端;webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release问服务端。具体使用流程...
在这个场景中,我们将探讨如何使用SRS与WebRTC结合,实现在前端拉取流并进行播放。 首先,了解WebRTC的基本架构。WebRTC包含三个主要组件:RTCPeerConnection、RTCDataChannel和RTCIceCandidate。RTCPeerConnection...
在实际应用中,如视频采集,开发者首先需要创建`webrtc::VideoEngine`对象,然后通过`webrtc::ViECapture::GetInterface`获取`ViECapture`对象,再调用相应的接口进行设备管理和视频采集。例如,`...
在"WebRTC学习笔记01-最简单实现一对一视频通讯代码"中,我们将探讨WebRTC的基础知识以及如何通过简单的代码实现一对一视频通话。 首先,WebRTC的核心组件包括: 1. **RTCPeerConnection**:这是WebRTC中最关键的...
使用详情查看我的博客《kurento-media-server和cotrun打洞的服务器的安装及部署,实现RTSP转WebRTC视频流播放》,链接:https://blog.csdn.net/weixin_40717107/article/details/122422896
webrtc 视频数据流流程图,整理了视频数据流发送及接受流程.
WebRTC的核心组件包括:PeerConnection用于处理音视频数据的实时传输,MediaStream用于捕捉和操作媒体流,以及Signaling用于协商连接建立。WebRTC-Streamer是WebRTC的一个扩展,它提供了一个服务器端的解决方案,...
webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案,延迟降低到了0.4秒左右,...
在微信小程序中嵌入H5页面来播放监控视频流,特别是使用WebRTC技术,可能会遇到1到2秒的画面延迟问题,而这个问题需要针对iOS和Android两大操作系统进行优化以实现良好的兼容性。以下将详细探讨这一主题,以及如何...
1. **WebRTC核心技术**:WebRTC包括了音视频采集、编码、传输、解码和渲染等一系列环节,通过MediaStream API获取本地媒体流,RTCPeerConnection API建立并维护 Peer-to-Peer 连接,DataChannel API则用于传输非媒体...
SuperWebSocket是一个轻量级且易于使用的.NET库,用于创建自定义的WebSocket服务器,而WebRTC(Web Real-Time Communication)则是一种允许网页浏览器进行实时通信的开放标准,主要用于实现浏览器之间的音频、视频和...
本示例主要探讨如何在Android上集成并使用WebRTC进行视频在线通信。 首先,我们要了解WebRTC的核心组件。它们包括: 1. **MediaStream**:这是音视频数据的基本载体,包含了音频轨道和视频轨道。 2. **...
- **创建WebRTC客户端**:使用JavaScript或其他编程语言,调用getUserMedia API获取本地音视频流,然后创建RTCPeerConnection实例,设置必要的会话描述(SDP)和ICE候选信息。 - **建立连接**:WebRTC客户端通过...
WebRTC包含一系列组件,如PeerConnection用于建立和管理两端之间的连接,MediaStream用于捕获和处理音频、视频流,以及Signaling用于信令传输。 3. **H5播放RTSP视频流的挑战**:HTML5的原生`<video>`标签并不支持...
用户可以在浏览器中直接参与视频通话,得益于WebRTC的API,开发者可以轻松获取用户的摄像头和麦克风权限,并实现视频流的发送和接收。 后端则采用了Java和WebSocket技术。WebSocket是一种在客户端和服务器之间建立...
在本项目中,我们主要关注的是使用Vue3和NestJS构建一个1v1的WebRTC视频通话系统。WebRTC(Web Real-Time Communication)是一种开放的API标准,它允许浏览器之间进行实时通信,包括音频、视频和数据共享,无需任何...
一般来说,开发这样一个应用会涉及以下步骤:设置开发环境,构建WebRTC库,设计Qt界面,实现音视频流的捕获和播放逻辑,进行调试和优化,最后打包发布。 总之,“WebRTC学习之三:录音和播放”项目是深入理解...