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 目录中.

2、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服务器. 修改代码后你只需要刷新浏览器标签即可看到最新执行效果.

二、原文

摘自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.