WebRTC實時通訊系列教程3 獲取示例代碼

【轉載請註明出處: http://blog.csdn.net/leytton/article/details/76697092】

 PS：若是本文對您有幫助，請點個贊讓我知道哦~

《WebRTC實時通訊系列教程》翻譯自《Real time communication with WebRTC》

示例代碼下載http://download.csdn.net/detail/leytton/9923708

WebRTC實時通訊系列教程1 介紹

WebRTC實時通訊系列教程2 概述

WebRTC實時通訊系列教程3 獲取示例代碼

WebRTC實時通訊系列教程4 從攝像頭獲取視頻流

WebRTC實時通訊系列教程5 RTCPeerConnection傳輸視頻

WebRTC實時通訊系列教程6 使用RTCDataChannel傳輸數據

WebRTC實時通訊系列教程7 使用Socket.IO搭建信令服務器交換信息

WebRTC實時通訊系列教程8 打通P2P鏈接和信令通訊

WebRTC實時通訊系列教程9 數據通道圖片傳輸

WebRTC實時通訊系列教程10 恭喜完成本系列課程

1、譯文

一、下載代碼

若是你熟悉git, 你能夠從GitHub下載示例代碼:

git clone https://github.com/googlecodelabs/webrtc-web

此外,點擊下面的按鈕也能夠直接下載:

下載源代碼

打開下載好的壓縮文件. 這裏麪包含了各節內容代碼和所需資源，你能夠進行參考.

假如你的全部代碼保存在 work 目錄中.

二、web服務器安裝驗證

你能夠使用本身的服務器,也能夠使用Chrome Web Server 擴展插件. 若是你尚未安裝這個應用, 你能夠點擊下面按鈕從Chrome應用商店安裝(注：用Chrome瀏覽器打開).

INSTALL WEB SERVER FOR CHROME

安裝好 Web Server for Chrome 應用後, 點擊Chrome書籤欄的應用程序快捷方式, 便可看到這個應用程序:

點擊 Web Server 圖標:

接下來出現這個對話框, 你能夠對其進行配置:

點擊 【CHOOSE FOLDER】(選擇文件夾) 按鈕, 選擇 work 文件夾. 點擊 Web Server URL(s)處的服務器地址便可查看代碼執行效果.

在 【Options】(設置)處， 選中 【Automatically show index.html】 將會這樣顯示:

有個滑動按鈕你能夠打開和關閉服務器.

如今訪問服務器地址. 便可看到work/index.html文件的展現效果:

很明顯，這個網頁裏尚未實現一些有意思的功能 — 目前，它只是一個用於測試服務器正常運行的代碼框架. 咱們將在後續小節中添加布局和功能.

從如今起, 全部的測試驗證都將使用這個Web服務器. 修改代碼後你只須要刷新瀏覽器標籤便可看到最新執行效果.

2、原文

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/#2

3. Get the sample code

Download the code

If you're familiar with git, you can download the code for this codelab from GitHub by cloning it:

git clone https://github.com/googlecodelabs/webrtc-web

Alternatively, click the following button to download a .zip file of the code:

DOWNLOAD SOURCE CODE

Open the downloaded zip file. This will unpack a project folder (adaptive-web-media) that contains one folder for each step of this codelab, along with all of the resources you will need.

You'll be doing all your coding work in the directory named work.

The step-nn folders contain a finished version for each step of this codelab. They are there for reference.

Install and verify web server

While you're free to use your own web server, this codelab is designed to work well with the Chrome Web Server. If you don't have that app installed yet, you can install it from the Chrome Web Store.

INSTALL WEB SERVER FOR CHROME

After installing the Web Server for Chrome app, click on the Chrome Apps shortcut from the bookmarks bar, a New Tab page, or from the App Launcher:

Click on the Web Server icon:

Next, you'll see this dialog, which allows you to configure your local web server:

Click the CHOOSE FOLDER button, and select the work folder you just created. This will enable you to view your work in progress in Chrome via the URL highlighted in the Web Server dialog in the Web Server URL(s) section.

Under Options, check the box next to Automatically show index.html as shown below:

Then stop and restart the server by sliding the toggle labeled Web Server: STARTED to the left and then back to the right.

Now visit your work site in your web browser by clicking on the highlighted Web Server URL. You should see a page that looks like this, which corresponds to work/index.html:

Obviously, this app is not yet doing anything interesting — so far, it's just a minimal skeleton we're using to make sure your web server is working properly. We'll add functionality and layout features in subsequent steps.

From this point forward, all testing and verification should be performed using this web server setup. You'll usually be able to get away with simply refreshing your test browser tab.