webrtc 学习资源 http://www.cnblogs.com/lingyunhu/p/3578218.html
Realtime/Working WebRTC Experiments
- It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
- No special requirement! Just WebRTC compatible web-browser (e.g. chrome/firefox/opera on desktop/android)
- These demos/experiments are entirely client-side; i.e. no server installation needed!
- You can use all these demos in PHP/Python/Ruby/ASP.NET/etc. everywhere!
How to use?
Each demo has a unique directory. Simply download that directory, upload in your webserver and use it; and it'll work!
You don't need to modify any single line to use it. No single installation or modification is needed :)
Libraries
Library Name | Short Description | Doc | Demos |
---|---|---|---|
RecordRTC.js |
Supports cross-browser audio/video recordings! | Doc | Demos |
Translator.js |
Voice & Text Translator | Doc | Demos |
RTCMultiConnection.js |
Single Library for Everything! Just imagine :) | Doc | Demos |
FileBufferReader.js |
File buffers reader & chunkifier | Doc | Demos |
getScreenId.js |
Single chrome extension for all domains! Again, imagine :) | Doc | Demos |
Conversation.js |
Enjoy Skype-like Conversations! Oops :) | Doc | Demos |
DataChannel.js |
Supports data-streaming among multiple peers | Doc | Demos |
getMediaElement.js |
A library for audio/video media elements' layout | Doc | Demos |
DetectRTC.js |
A library for detecting WebRTC features | Doc | Demos |
ConcatenateBlobs.js |
Concatenate Array of Blobs | Doc | Demos |
getStats.js |
Get peers statistics | Doc | None |
Other libraries:
- navigator.customGetUserMediaBar.js / Demo
- File.js / Demo
- Meeting.js / Demo
- RTCall.js / Demo
- SdpSerializer.js / Demo
Other Repositories
- WebRTC Scalable Broadcast
- Reliable Signaling
- RTCMultiConnection.js
- RecordRTC.js
- Collaborate Canvas Designer
- Translator.js
- FileBufferReader.js
- Chrome-Extensions
- Firefox-Extensions
- DetectRTC.js
- getStats.js
- Conversation.js
- Ffmpeg.js
- DataChannel.js
- MultiRTC Demos
- XHR-Signaling
- PluginRTC: IE/Safari Plugins compatible WebRTC-Experiments
- ASP.NET MVC based WebRTC 1:1 Demo
- WebSync Signaling
- SdpSerializer.js
Important Experiments
Experiment Name | Short Description | Source | Demo |
---|---|---|---|
Pre-recorded Media Streaming |
Stream video files in realtime; same like webcam streaming! | Source | Demo |
Part of Screen Sharing |
Share a region of the screen; not the entire screen! | Source | Demo |
Plugin-free Screen Sharing |
Share the entire screen | Source | Demo |
One-Way Broadcasting |
Same like radio stations; transmit audio/video/screen streams in one-way direction. Though, it is browser-to-browser streaming! | Source | Demo |
Useful Experiments
Experiment Name | Previous Demos | New Demos |
---|---|---|
video-conferencing / multi-user (group) video sharing | Demo / Source | Demo / Source Code |
file sharing / multi-user (group) files hangout | Demo / Source | Demo / Source Code |
file sharing using SCTP data channels | Demo / -- | -- / Source Code |
text chat / multi-user (group) text chat | Demo / Source | Demo / Source Code |
MultiRTC | Demo / -- | -- / Source Code |
Google Chrome Extensions for WebRTC!
- desktopCapture API / Install App Store Extension
- tabCapture API / Install App Store Extension
- Desktop Sharing / Install App Store Extension
- File Sharing / Install App Store Extension
Firefox Extensions for WebRTC!
One-to-Many style of WebRTC Experiments
Experiment Name | Previous Demos | New Demos |
---|---|---|
video-broadcasting | Demo / Source | Demo / Source Code |
audio-broadcasting | Demo / Source | Demo / Source Code |
One-to-One Calls
Experiment Name | Demo | Source Code |
---|---|---|
One-to-one WebRTC video chat using WebSocket | Demo | Source |
One-to-one WebRTC video chat using socket.io | Demo | Source |
WebRTC 1-1 Audio/Video/Screen Sharing | Source | Demo |
WebRTC 1-1 Calls | Source | Demo |
Single-Page / One-Page / Client Side
Experiment Name | Demo | Source Code |
---|---|---|
Switch streams from screen-sharing to audio+video. (Renegotiation) | Demo | Source |
Share screen and audio/video from single peer connection! | Demo | Source |
Text chat using RTCDataChannel APIs | Demo | Source |
Simple video chat | Demo | Source |
Sharing video - using socket.io for signaling | Demo | Source |
Sharing video - using WebSockets for signaling | Demo | Source |
Audio Only Streaming | Demo | Source |
MediaStreamTrack.getSources | Demo | Source |
Experiments to share tab/screen/desktop
Experiment Name | Previous Demos | New Demos |
---|---|---|
Plugin-free screen sharing / share the entire screen | Demo / Source | Demo / Source Code |
Desktop sharing / using desktopCapture APIs |
Demo / Source | -- |
Tab sharing / using tabCapture APIs |
Demo / Source | -- |
Experiments to share region/part of the screen
Experiment Name | Demo | Source Code |
---|---|---|
Share part-of-screen RTCMultiConnection | Demo | Source |
Share part-of-screen using RTCDataChannel APIs | Demo | Source |
Share part-of-screen using Firebase | Demo | Source |
A realtime chat using RTCDataChannel | Demo | Source |
A realtime chat using Firebase | Demo | Source |
Demos using MediaStreamRecorder.js library
Experiment Name | Demo | Source Code |
---|---|---|
Audio Recording | Demo | Source |
Video Recording | Demo | Source |
Gif Recording | Demo | Source |
Or RecordRTC entire Meeting using MediaStreamRecorder.js
Demos using DataChannel.js library
Experiment Name | Demo | Source Code |
---|---|---|
DataChannel basic demo | Demo | Source |
Auto Session Establishment | Demo | Source |
Share part-of-screen using DataChannel.js | Demo | Source |
Private Chat | Demo | ---- |
Text Chat using Pusher and DataChannel.js | Demo | Source |
Experimental (Non-Functional)
Experiment Name | Demo | Source Code |
---|---|---|
Attaching Remote Audio Streams | Demo | Source |
mozCaptureStreamUntilEnded for pre-recorded media streaming | Demo | Source |
Remote audio stream recording | Demo | Source |
Demos using RTCMultiConnection
Experiment Name | Demo | Source Code |
---|---|---|
AppRTC like RTCMultiConnection demo! | Demo | Source |
MultiRTC! RTCMultiConnection all-in-one demo! | Demo | Source |
Collaborative Canvas Designer | Demo | Source |
Conversation.js - Skype like library | Demo | Source |
All-in-One test | Demo | Source |
Multi-Broadcasters and Many Viewers | Demo | Source |
Select Broadcaster at runtime | Demo | Source |
OneWay Screen & Two-Way Audio | Demo | Source |
Stream Mp3 Live | Demo | Source |
Socket.io auto Open/Join rooms | Demo | Source |
Screen Sharing & Cropping | Demo | Source |
Share Part of Screen without cropping it | Demo | Source |
getMediaDevices/enumerateDevices | Demo | Source |
Renegotiation & Mute/UnMute/Stop | Demo | Source |
Video-Conferencing | Demo | Source |
Video Broadcasting | Demo | Source |
Audio Conferencing | Demo | Source |
Multi-streams attachment | Demo | Source |
Admin/Guest audio/video calling | Demo | Source |
Session Re-initiation Test | Demo | Source |
Preview Screenshot of the room | Demo | Source |
RecordRTC & RTCMultiConnection | Demo | Source |
Explains how to customize ice servers; and resolutions | Demo | Source |
Mute/Unmute and onmute/onunmute | Demo | Source |
One-page demo: Explains how to skip external signalling gateways | Demo | Source |
Password Protect Rooms: Explains how to authenticate users | Demo | Source |
Session Management: Explains difference between "leave" and "close" methods | Demo | Source |
Multi-Sessions Management | Demo | Source |
Customizing Bandwidth | Demo | Source |
Users ejection and presence detection | Demo | Source |
Multi-Session Establishment | Demo | Source |
Group File Sharing + Text Chat | Demo | Source |
Audio Conferencing + File Sharing + Text Chat | Demo | Source |
Join with/without camera | Demo | Source |
Screen Sharing | Demo | Source |
One-to-One file sharing | Demo | Source |
Manual session establishment + extra data transmission | Demo | Source |
Manual session establishment + extra data transmission + video conferencing | Demo | Source |
takeSnapshot i.e. Take Snapshot of Local/Remote streams | Demo | Source |
Audio/Video/Screen sharing and recording | Demo | Source |
Broadcast Multiple-Cameras | Demo | Source |
Remote Stream Forwarding | Demo | Source |
WebRTC Scalable Broadcast | Socketio/Nodejs | Source |
Demos using Conversation.js
Documents for newcomers/newbies/beginners
A few documents for newbies and beginners |
---|
How to use RTCPeerConnection.js? |
RTCDataChannel for Beginners |
How to use RTCDataChannel? - single code for both canary and nightly |
WebRTC for Beginners: A getting stared guide! |
WebRTC for Newbies |
How to switch streams? |
How to echo cancellation? / Noise management? |
STUN or TURN? Which one to prefer; and why? |
WebRTC RTP Usage |
webrtcpedia! |
Are you want to learn WebRTC? |
WebRTC Tips & Tricks |
- http://muaz-khan.blogspot.com/search/label/WebRTC
- https://www.webrtc-experiment.com/#documentations
- https://www.facebook.com/WebRTC
- https://plus.google.com/+WebRTC-Experiment/posts
ffmpeg-asm.js && Ffmpeg Demos
Demo Name | Live Demo | Source Code |
---|---|---|
Transcoding WAV into Ogg | Live Demo | Source Code |
Transcoding WebM into mp4 | Live Demo | Source Code |
Transcoding WebM into mp4; then merging WAV+mp4 into single mp4 | Live Demo | Source Code |
Recording Audio+Canvas and merging in single mp4 | Live Demo | Source Code |
Custom Signaling
- Socket.io over Node.js
- WebSocket over Node.js
- WebSync / ASP.NET MVC
- XHR Signaling
- openSignalingChannel
How to record audio using RecordRTC?
<script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>
Documentation page: http://recordrtc.org/RecordRTC.html
var recordRTC = RecordRTC(mediaStream, {
type: 'video' // audio or video or gif or canvas
}); recordRTC.startRecording(); recordRTC.stopRecording(function(videoURL) {
video.src = videoURL; var blob = recordRTC.blob;
var arrayBuffer = recordRTC.buffer;
recordRTC.getDataURL(callback_function);
});
- RecordRTC to Node.js
- RecordRTC to PHP
- RecordRTC to ASP.NET MVC
- RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
- MRecordRTC i.e. Multi-RecordRTC!
- RecordRTC on Ruby!
- RecordRTC over Socket.io
- ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
- Recording Audio+Video in single WebM on Firefox
- RecordRTC / PHP / FFmpeg
RTCMultiConnection.js
You can write entire skype-like web-app using RTCMultiConnection! It supports all complex renegotiation scenarios!
<button id="openRoom">Open Room</button>
<button id="joinRoom">Join Room</button><br /> <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js"> </script>
<script>
document.getElementById('openRoom').onclick = function() {
new RTCMultiConnection().open();
};
document.getElementById('joinRoom').onclick = function() {
new RTCMultiConnection().connect();
};
</script>
RTCMultiConnection Documentation
DataChannel.js / A library for RTCDataChannel APIs
<script src="//cdn.webrtc-experiment.com/DataChannel.js"> </script>
<script>
var datachannel = new DataChannel();
datachannel.onopen = function(remoteUserid) {};
datachannel.onmessage = function(message, remoteUserid) {}; // search for existing channels
datachannel.connect(); document.getElementById('new-channel').onclick = function() {
datachannel.open(); // setup new channel
};
</script>
Translator.js / Demo
Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC!
<script src="//cdn.webrtc-experiment.com/Translator.js"> </script>
var translator = new Translator(); translator.voiceToText(function (text) {
console.log('Your voice as text!', text);
}, 'your-language'); translator.translateLanguage(textToConvert, {
from: 'language-of-the-text',
to: 'convert-into',
callback: function (translatedText) {
console.log('translated text', translatedText);
}
}); translator.speakTextUsingRobot(textToPlay); translator.speakTextUsingGoogleSpeaker({
textToSpeak: 'text-to-convert',
targetLanguage: 'your-language'
});
FileBufferReader.js / Demo
FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
var fileBufferReader = new FileBufferReader(); fileBufferReader.readAsArrayBuffer(file, function(uuid) {
// var file = fileBufferReader.chunks[uuid];
// var listOfChunks = file.listOfChunks; // get first chunk, and send using WebRTC data channels
// NEVER send chunks in loop; otherwise you'll face issues in slow networks
// remote peer should notify if it is ready for next chunk
fileBufferReader.getNextChunk(uuid, function(nextChunk, isLastChunk) {
if(isLastChunk) {
alert('File Successfully sent.');
}
// sending using WebRTC data channels
datachannel.send(nextChunk);
});
}); datachannel.onmessage = function(event) {
var chunk = event.data; if (chunk instanceof ArrayBuffer || chunk instanceof DataView) {
// array buffers are passed using WebRTC data channels
// need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) {
datachannel.onmessage({
data: object
});
});
return;
} // if you passed "extra-data", you can access it here:
// chunk.extra.senderUserName or whatever else // if target peer requested next chunk
if(chunk.readyForNextChunk) {
fileBufferReader.getNextChunk(chunk.uuid, function(nextChunk, isLastChunk) {
if(isLastChunk) {
alert('File Successfully sent.');
}
// sending using WebRTC data channels
datachannel.send(nextChunk);
});
return;
} // if chunk is received
fileBufferReader.addChunk(chunk, function(promptNextChunk) {
// request next chunk
datachannel.send(promptNextChunk);
});
};
getScreenId.js / Demo
Simply use getScreenId.js and enjoy screen capturing from any domain. You don't need to deploy chrome extension yourself. You can refer your users to install this chrome extension instead. Also,getScreenId.js auto-fallbacks to command-line based screen capturing if chrome extension isn't installed or disabled. getScreenId.js throws clear exceptions which is helpful for end-user experiences.
<script src="//cdn.WebRTC-Experiment.com/getScreenId.js"></script> <script>
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
document.querySelector('video').src = URL.createObjectURL(stream);
}, function (error) {
console.error(error);
});
});
</script>
Signaling?
Browser Support
WebRTC Experiments works fine on following web-browsers:
Browser | Support |
---|---|
Firefox | Stable / Aurora / Nightly |
Google Chrome | Stable / Canary / Beta / Dev |
Opera | Stable / NEXT |
Android | Chrome / Firefox / Opera |
Credits
- Muaz Khan - https://github.com/muaz-khan
webrtc 学习资源 http://www.cnblogs.com/lingyunhu/p/3578218.html的更多相关文章
- webrtc 学习资源
http://www.cnblogs.com/lingyunhu/tag/webrtc%20android%20ios/
- WebRTC 学习资源 电子书 WebRTC权威指南 Learning WebRTC
webRTC源码下载地址:https://pan.baidu.com/s/18CjClvAuz3B9oF33ngbJIw 提取码:wl1e 1.<WebRTC权威指南>第三版 中文版 本书 ...
- webrtc 学习资源1
1,http://www.webrtc.org/ webrtc官网,神马编译,神马下载,这里的解决方案才是最权威的. --------------------------------- 2,http ...
- webrtc学习资源
http://www.imaotao.cn/project/webrtc-201604
- WebRTC学习与DEMO资源一览
一. WebRTC学习 1.1 WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/external/webrtc/ ...
- WebRTC学习
1. WebRTC学习 1.1 WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/external/web ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 学习资源asp.net
http://www.runoob.com ajax 同一表单,多部分提交.增加,修改,删除 服务器端控件: http://technet.microsoft.com/zh-cn/library/cc ...
- Git 操作 学习资源 网址
用git 有一段时间了,有点自己的小心得.个人觉得相对SVN来讲他更灵活,更合理. 陆陆续续的收集了一些学习资源: 1.理解Xcode 中的Git 版本控制 http://www.open-open. ...
随机推荐
- IDEA查看源码时提示:Library source does not match the bytecode for class的问题分析
通过Maven查看依赖的源码时,通常是Maven自动下载JAR包附属的source包,但是会出现一个问题,由于使用lombok插件会造成编写的Java文件和编译后的class上有差别,所以IDEA打开 ...
- Mac -- 安装及使用Docker
安装这三个软件. 有两个安装包: 和 安装完使用挺简的. 更多内容官网查看: https://docs.docker.com/
- awk的求和计算使用;awk多个分隔符如何使用?
1.对于下图,如何使用awk求所有各列的和 和:175 16 78 19 方法:awk '{for(n=1;n<=NF;n++)t[n]+=$n}END{for(n=1;n<=NF;n++ ...
- pyquery库的使用
pyquery标签选择 获取了所有的img标签(css选择器,你也可以换成不同的class和id) import requests import re from pyquery import PyQu ...
- Unity3D游戏开发之简单的碰撞检測
在"Project"面板中单击"Create"旁边的小三角,选择"javascript"创建一个名为"collision" ...
- swift学习_xcode6搭建
首先是环境搭建 , 我的是苹果系统 , 我是个穷小子. 8k的电脑离我比較遥远. 自己动手的黑苹果 . 总价1k, 学习够用了即可.期间也学到了非常多东西 . 就是穷人仅仅能发时间去换钱了, 一直在考 ...
- idea主要设置大纲图
idea修改主题和字体大小: 对菜单栏进行调整,不过貌似没什么用: 一般设置:
- PE添加Style
1. <style id="NumberStyle"> <setting> <param name="option"> ...
- EasyRTMP实现RTMP异步直播推送之环形缓冲区设计
本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...
- 基于struts2的学生报道管理系统(附github源码地址)
本项目参考了<java web轻量级开发全体验>,加入了对mysql的支持. 一.基本业务功能 通过struts2框架,结合mysql数据库构建一个学生报到管理系统,来模拟学生报到登记的过 ...