WebRTC samplesThis is a repository

WebRTC samples

This is a repository for the WebRTC Javascript code samples. The source for these samples is available at github.com/webrtc/samples.

Some of the samples use new browser features. They may only work in Chrome Canary, Firefox Beta or Microsoft Edge (available with Windows 10), and may require flags to be set.

Most of the samples use adapter.js, a shim to insulate apps from spec changes and prefix differences. (In fact, the standards and protocols used for WebRTC implementations are highly stable, and there are only a few prefixed names. For full interop information, see webrtc.org/web-apis/interop.)

In Chrome and Opera, all samples that use getUserMedia() must be run from a server. Calling getUserMedia() from a file:// URL will work in Firefox, but fail silently in Chrome and Opera.

webrtc.org/testing lists command line flags useful for development and testing with Chrome.

For more information about WebRTC, we maintain a list of resources at g.co/webrtc. If you've never worked with WebRTC, we recommend you start with the 2013 Google I/O WebRTC presentation.

Patches and issues welcome! See CONTRIBUTING.md for instructions. The Developer's Guide for this repo has more information about code style, structure and validation. Head over to test/README.md and get started developing.

Warning: some of these demos will result in loud feedback if used without headphones.
The demos

getUserMedia

Basic getUserMedia demo

Use getUserMedia with canvas

Use getUserMedia with canvas and CSS filters

Choose camera resolution

Audio-only getUserMedia() output to local audio element

Audio-only getUserMedia() displaying volume

Face tracking, using getUserMedia and canvas

Record stream

Stream capture

Stream from a canvas element to a video element

Stream from a canvas element to a peer connection

Devices

Choose camera, microphone and speaker

Choose media source and audio output

RTCPeerConnection

Basic peer connection demo

Audio-only peer connection demo

Change bandwidth on the fly

Multiple peer connections at once

Forward the output of one PC into another

Munge SDP parameters

Use pranswer when setting up a peer connection

Constraints and stats

Display createOffer output for various scenarios

Use RTCDTMFSender

Display peer connection states

ICE candidate gathering from STUN/TURN servers

Do an ICE restart

Web Audio output as input to peer connection

Peer connection as input to Web Audio

RTCDataChannel

Transmit text

Transfer a file

Transfer data

Video chat

AppRTC video chat client powered by Google App Engine

AppRTC URL parameters
github.com/webrtc/samples

ผลลัพธ์ (ไทย) 1:

ตัวอย่าง WebRTCนี้เป็นเก็บตัวอย่างรหัส WebRTC Javascript แหล่งที่มาสำหรับตัวอย่างเหล่านี้ได้ที่ github.com/webrtc/samplesบางตัวอย่างใช้คุณลักษณะใหม่ของเบราว์เซอร์ พวกเขาอาจทำงานเฉพาะใน คานารี Chrome, Firefox เบต้า หรือ Microsoft Edge (ใช้ได้กับ Windows 10), และอาจต้องใช้ค่าสถานะการตั้งค่าส่วนใหญ่ของกลุ่มตัวอย่างใช้ adapter.js, shim เพื่อป้องกันจากการเปลี่ยนแปลงข้อมูลจำเพาะ และความแตกต่างของคำนำหน้า (ในความเป็นจริง ได้มาตรฐานและโปรโตคอลที่ใช้สำหรับการใช้งาน WebRTC มีความเสถียรสูง และมีเพียงไม่กี่สิ่งชื่อ สำหรับ interop เต็มข้อมูล ดู webrtc.org/web-apis/interop)ใน Chrome และ Opera ตัวอย่างทั้งหมดที่ใช้ getUserMedia() ต้องเรียกใช้จากเซิร์ฟเวอร์ โทร getUserMedia() จาก file:// URL จะทำงานใน Firefox แต่ล้มเหลวเงียบใน Chrome และ Operawebrtc.org/testing รายการสถานะบรรทัดคำสั่งที่มีประโยชน์สำหรับการพัฒนาและการทดสอบกับ Chromeสำหรับข้อมูลเพิ่มเติมเกี่ยวกับ WebRTC เรารักษารายการของทรัพยากรที่ g.co/webrtc ถ้าคุณไม่เคยได้ร่วมงานกับ WebRTC เราขอแนะนำให้คุณเริ่มต้น ด้วยการนำเสนอ Google I/O WebRTC 2013แพทช์และปัญหายินดีต้อนรับ ดู CONTRIBUTING.md สำหรับคำแนะนำ คู่มือสำหรับนักพัฒนาสำหรับ repo นี้มีข้อมูลเพิ่มเติมเกี่ยวกับรหัสรูปแบบ โครงสร้าง และตรวจสอบ ไป test/README.md และเริ่มต้นพัฒนาคำเตือน: บางสาธิตเหล่านี้จะส่งผลให้ข้อเสนอแนะดังถ้าไม่หูฟังใช้สาธิตgetUserMediaพื้นฐาน getUserMedia สาธิตใช้ getUserMedia กับผืนผ้าใบใช้ getUserMedia กับผืนผ้าใบและตัวกรองของ CSSเลือกความละเอียดของกล้องออกเสียงเดียว getUserMedia() องค์ประกอบเสียงท้องถิ่นเสียงเดียว getUserMedia() ที่แสดงระดับเสียงใบหน้าการติดตาม การใช้ getUserMedia และผ้าใบบันทึกกระแสจับกระแสสตรีมจากองค์ประกอบผ้าใบไปยังองค์ประกอบวิดีโอสตรีมจากองค์ประกอบผ้าใบการเชื่อมต่อเพียร์อุปกรณ์เลือกกล้อง ไมโครโฟน และลำโพงเลือกสื่อออกเสียงและแหล่งที่มาRTCPeerConnectionสาธิตการเชื่อมต่อเพียร์พื้นฐานสาธิตการเชื่อมต่อเพียร์เสียงเดียวแบนด์วิธเปลี่ยนทันทีเชื่อมต่อเพียร์หลายครั้งส่งต่อการแสดงผลของพีซีเครื่องหนึ่งไปยังอีกพารามิเตอร์ Munge SDPใช้ pranswer เมื่อการตั้งค่าการเชื่อมต่อเพียร์ข้อจำกัดและสถิติแสดงผลลัพธ์ createOffer สำหรับสถานการณ์ต่าง ๆใช้ RTCDTMFSenderแสดงสถานะการเชื่อมต่อเพียร์น้ำแข็งผู้สมัครรวบรวมจากเซิร์ฟเวอร์สตัน/เปิดน้ำแข็งสตาร์เว็บเสียงเป็นการป้อนข้อมูลการเชื่อมต่อเพียร์การเชื่อมต่อเพียร์เป็นอินพุตเสียงเว็บRTCDataChannelส่งข้อความถ่ายโอนแฟ้มถ่ายโอนข้อมูลวิดีโอแชไคลเอ็นต์การสนทนาวิดีโอ AppRTC ขับเคลื่อน โดย Google App Engineพารามิเตอร์ AppRTC URLgithub.com/webrtc/samples

ผลลัพธ์ (ไทย) 2:

WebRTC ตัวอย่างนี้เป็นพื้นที่เก็บข้อมูลสำหรับตัวอย่างโค้ดจาวาสคริ WebRTC แหล่งที่มาสำหรับตัวอย่างเหล่านี้สามารถใช้ได้ที่ github.com/webrtc/samples. บางส่วนของกลุ่มตัวอย่างใช้คุณลักษณะเบราว์เซอร์ใหม่ พวกเขาอาจจะเป็นเพียงการทำงานใน Chrome Canary, Firefox Beta หรือ Microsoft ขอบ (สามารถใช้ได้กับ Windows 10) และอาจต้องมีธงที่จะตั้ง. กลุ่มตัวอย่างส่วนใหญ่ใช้ adapter.js เป็น Shim เพื่อป้องกันปพลิเคชันจากการเปลี่ยนแปลงข้อมูลจำเพาะและความแตกต่างคำนำหน้า (ในความเป็นจริงมาตรฐานและโปรโตคอลที่ใช้สำหรับการใช้งาน WebRTC มีความเสถียรสูงและมีเพียงไม่กี่ชื่อนำหน้า. สำหรับข้อมูลการทำงานร่วมกันอย่างเต็มรูปแบบให้ดู webrtc.org/web-apis/interop.) ใน Chrome และ Opera ตัวอย่างทั้งหมดที่ ใช้ getUserMedia () จะต้องถูกเรียกใช้จากเซิร์ฟเวอร์ โทร getUserMedia () จากแฟ้ม:. // URL ที่จะทำงานใน Firefox แต่ล้มเหลวอย่างเงียบ ๆ ใน Chrome และ Opera . webrtc.org/testing~~V ธงบรรทัดรายการคำสั่งที่มีประโยชน์สำหรับการพัฒนาและการทดสอบด้วย Chrome สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ WebRTC เรารักษา รายการของทรัพยากรที่ g.co/webrtc ถ้าคุณไม่เคยทำงานร่วมกับ WebRTC เราขอแนะนำให้คุณเริ่มต้นด้วยการนำเสนอ Google I / O 2013 WebRTC. แพทช์และปัญหาการต้อนรับ! ดู CONTRIBUTING.md สำหรับคำแนะนำ คู่มือสำหรับนักพัฒนาสำหรับ repo นี้มีข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบรหัสโครงสร้างและการตรวจสอบ ตรงไปทดสอบ / README.md และเริ่มต้นการพัฒนา. คำเตือน:. บางส่วนของการสาธิตเหล่านี้จะส่งผลให้ข้อเสนอแนะดังถ้าใช้หูฟังได้โดยไม่ต้องสาธิตgetUserMedia พื้นฐาน getUserMedia สาธิตการใช้ getUserMedia ผ้าใบใช้ getUserMedia ผ้าใบและ CSS ฟิลเตอร์เลือกความละเอียดของกล้องเสียง getUserMedia เท่านั้น () ส่งออกไปยังองค์ประกอบเสียงในท้องถิ่นเฉพาะเสียง getUserMedia () แสดงปริมาณการติดตามใบหน้าโดยใช้ getUserMedia และผ้าใบบันทึกกระแสกระแสจับสตรีมมิ่งจากองค์ประกอบผ้าใบกับองค์ประกอบวิดีโอสตรีมมิ่งจากองค์ประกอบผ้าใบกับการเชื่อมต่อแบบ peer อุปกรณ์เลือกกล้อง ไมโครโฟนและลำโพงเลือกแหล่งที่มาของสื่อและเสียงออกRTCPeerConnection พื้นฐานสาธิตการเชื่อมต่อแบบ peer เฉพาะเสียงการเชื่อมต่อแบบ peer สาธิตเปลี่ยนแบนด์วิดธ์ได้ทันทีหลายการเชื่อมต่อเพียร์ในครั้งเดียวส่งต่อการส่งออกของคอมพิวเตอร์เครื่องหนึ่งลงในอีกพารามิเตอร์ Munge SDP ใช้ pranswer เมื่อตั้งค่าการเชื่อมต่อเพียร์จำกัด และสถิติแสดงผลลัพธ์ createOffer สำหรับสถานการณ์ต่างๆใช้ RTCDTMFSender การเชื่อมต่อจอแสดงผลแบบ peer ระบุผู้สมัคร ICE รวบรวมจาก STUN / เซิร์ฟเวอร์ TURN ทำน้ำแข็งรีสตาร์ทเว็บสัญญาณเสียงออกเป็น input เพื่อรองรับการเชื่อมต่อการเชื่อมต่อแบบ peer เป็น input เพื่อ Web Audio RTCDataChannel ข้อความส่งถ่ายโอนแฟ้มการถ่ายโอนข้อมูลวิดีโอแชทAppRTC ลูกค้าวิดีโอแชทขับเคลื่อนโดย Google App Engine AppRTC พารามิเตอร์ URL github.com/webrtc/samples

ผลลัพธ์ (ไทย) 3:

ตัวอย่าง webrtcนี้เป็นข้อมูลสำหรับ webrtc JavaScript รหัสตัวอย่าง แหล่งตัวอย่างเหล่านี้สามารถใช้ได้ที่ github.com/webrtc/samples .บางตัวอย่างที่ใช้คุณสมบัติเบราว์เซอร์ใหม่ พวกเขาอาจทำงานใน Chrome Canary , Firefox Beta หรือ Microsoft ขอบ ( ใช้ได้กับ Windows 10 ) และอาจต้องใช้ธงที่มีการตั้งค่ากลุ่มตัวอย่างส่วนใหญ่ใช้ adapter.js , ชิม เพื่อป้องกันการเปลี่ยนแปลงสเป็คและความแตกต่างของปพลิเคชันจากคำนำหน้า . ( ในความเป็นจริง มาตรฐานและโปรโตคอลที่ใช้สำหรับการดำเนินงาน webrtc เป็นมีเสถียรภาพสูง และมีเพียงไม่กี่แล้วนำหน้าชื่อ ข้อมูล ดู webrtc Interop เต็ม . org / เว็บ APIs / Interop )ใน Chrome และ Opera ทุกตัวอย่างที่ใช้ getusermedia() ต้องถูกเรียกใช้จากเซิร์ฟเวอร์ เรียก getusermedia() จาก file : / / URL จะทำงานใน Firefox แต่ล้มเหลวอย่างเงียบ ๆใน Chrome และโอเปร่าwebrtc.org/testing รายการบรรทัดคำสั่งธงที่เป็นประโยชน์สำหรับการพัฒนาและการทดสอบด้วยโครเมี่ยมสำหรับข้อมูลเพิ่มเติมเกี่ยวกับ webrtc เราเก็บรักษารายการของทรัพยากรที่ g.co/webrtc . ถ้าคุณเคยทำงานกับ webrtc เราขอแนะนำให้คุณเริ่มต้นด้วยงาน Google I / O webrtc เสนอแพทช์และประเด็นยินดีต้อนรับ ดู contributing.md สําหรับคําแนะนํา คู่มือนักพัฒนาสำหรับ Repo นี้มีข้อมูลเพิ่มเติมเกี่ยวกับรหัสรูปแบบ โครงสร้าง และการตรวจสอบ ไปทดสอบ / readme.md และเริ่มต้นการพัฒนาคำเตือน : บางส่วนของการสาธิตเหล่านี้จะส่งผลดังความคิดเห็นถ้าใช้โดยไม่ต้องหูฟังเดโมgetusermediaสาธิต getusermedia ขั้นพื้นฐานใช้ getusermedia กับผ้าใบใช้ getusermedia ด้วยผ้าใบและ CSS กรองเลือกความละเอียดของกล้องเสียงออก getusermedia() องค์ประกอบเสียงท้องถิ่นเท่านั้นเสียงเท่านั้น getusermedia() แสดงปริมาณการติดตามใบหน้า และใช้ getusermedia ผ้าใบบันทึกสตรีมกระแสการจับสตรีมจากผ้าใบองค์ประกอบวิดีโอองค์ประกอบสตรีมจากผ้าใบองค์ประกอบแบบการเชื่อมต่ออุปกรณ์เลือกกล้อง ไมโครโฟน และลำโพงเลือกแหล่งที่มาของสื่อและเสียงออกrtcpeerconnectionพื้นฐานการเชื่อมต่อเพื่อนสาธิตเสียงเพื่อนสาธิตการเชื่อมต่อเท่านั้นเปลี่ยนแบนด์วิดธ์ที่บินเพื่อนเชื่อมต่อหลายครั้งไปข้างหน้าของเครื่องคอมพิวเตอร์หนึ่งไปยังอีกmunge พารามิเตอร์ SDPใช้ pranswer เมื่อตั้งค่าการเชื่อมต่อเพื่อนข้อจำกัดและสถิติแสดง createoffer ออกสำหรับสถานการณ์ต่าง ๆใช้ rtcdtmfsenderแสดงโดยการเชื่อมต่อรัฐน้ำแข็งผู้สมัครที่รวบรวมจาก stun / เปิดเซิร์ฟเวอร์ทำไอศกรีม เริ่มต้นใหม่สัญญาณเสียงเข้าเว็บเพื่อเพื่อนการเชื่อมต่อเพื่อนเชื่อมต่อเข้าเว็บเสียงrtcdatachannelส่ง ข้อความการถ่ายโอนแฟ้มการถ่ายโอนข้อมูลวิดีโอแชทapprtc วิดีโอแชทไคลเอนต์ Google App Engine ที่ขับเคลื่อนโดยพารามิเตอร์ URL apprtcgithub.com/webrtc/samples