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.