webrtc 学习资源 http://www.cnblogs.com/lingyunhu/p/3578218.html

Realtime/Working WebRTC Experiments

1. It is a repository of uniquely experimented WebRTC demos; written by Muaz Khan!
2. No special requirement! Just WebRTC compatible web-browser (e.g. chrome/firefox/opera on desktop/android)
3. These demos/experiments are entirely client-side; i.e. no server installation needed!
4. 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

Other libraries:

• navigator.customGetUserMediaBar.js / Demo
• File.js / Demo
• Meeting.js / Demo
• RTCall.js / Demo
• SdpSerializer.js / Demo

Other Repositories

1. WebRTC Scalable Broadcast
2. Reliable Signaling
3. RTCMultiConnection.js
4. RecordRTC.js
5. Collaborate Canvas Designer
6. Translator.js
7. FileBufferReader.js
8. Chrome-Extensions
9. Firefox-Extensions
10. DetectRTC.js
11. getStats.js
12. Conversation.js
13. Ffmpeg.js
14. DataChannel.js
15. MultiRTC Demos
16. XHR-Signaling
17. PluginRTC: IE/Safari Plugins compatible WebRTC-Experiments
18. ASP.NET MVC based WebRTC 1:1 Demo
19. WebSync Signaling
20. SdpSerializer.js

Experiments

Experiments

WebRTC!

1. desktopCapture API / Install App Store Extension
2. tabCapture API / Install App Store Extension
3. Desktop Sharing / Install App Store Extension
4. File Sharing / Install App Store Extension

WebRTC!

1. enable-screen-capturing

Experiments

One-to-One Calls

Single-Page / One-Page / Client Side

Experiments to share tab/screen/desktop

share region/part of the screen

MediaStreamRecorder.js library

Or RecordRTC entire Meeting using MediaStreamRecorder.js

DataChannel.js library

Experimental (Non-Functional)

RTCMultiConnection

Conversation.js

1. AndroidRTC
2. Search Users
3. Cross-Language (Multi-Lingual) Text Chat
4. Old Conversation.js demos

Documents for newcomers/newbies/beginners

1. http://muaz-khan.blogspot.com/search/label/WebRTC
2. https://www.webrtc-experiment.com/#documentations
3. https://www.facebook.com/WebRTC
4. https://plus.google.com/+WebRTC-Experiment/posts

ffmpeg-asm.js && Ffmpeg Demos

Custom Signaling

1. Socket.io over Node.js
2. WebSocket over Node.js
3. WebSync / ASP.NET MVC
4. XHR Signaling
5. openSignalingChannel

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);
});

1. RecordRTC to Node.js
2. RecordRTC to PHP
3. RecordRTC to ASP.NET MVC
4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
5. MRecordRTC i.e. Multi-RecordRTC!
6. RecordRTC on Ruby!
7. RecordRTC over Socket.io
8. ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
9. Recording Audio+Video in single WebM on Firefox
10. RecordRTC / PHP / FFmpeg

RTCMultiConnection.js

You can write entire skype-like web-app using RTCMultiConnection! It supports all complex renegotiation scenarios!

<button >Open Room</button>
<button >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>

DataChannel Documentation

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'
});

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);
    });
};

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?

• https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md

Browser Support

WebRTC Experiments works fine on following web-browsers:

Credits

• Muaz Khan - https://github.com/muaz-khan