实现视频通话

新版开发者中心已经发布!如需访问最新版本,请点击  这里

售前咨询QQ群 276282334
售前咨询电话 400 632 6626

实现视频通话

本页将为你展示如何使用 Agora Web SDK 提供的示例代码实现视频通话。

本页将为你展示如何使用 Agora Web SDK 提供的示例代码实现音视频通话。

步骤 1:准备环境

  1. 准备 Windows、Mac、iOS 或 Android 的机器,并确保你的机器满足以下条件:
  • Windows 机器
    • Windows XP (SP3)
    • Windows 7
    • Windows 8.x
    • Windows 10
  • Mac 机器
    • Safari 11 及以上
  • iOS 机器
    • iOS 11 及以上
    • iPhone 5 及以上
  • Android 机器
    • 安卓版本在 Android 4.1 以上,CPU 及内存充足,且带摄像头(视频通话使用)
  1. 选择并安装如下一款浏览器:
  • Chrome 浏览器,Chrome 58 及以上版本(仅支持 HTTPS)
  • Firefox 浏览器,Firefox 56 及以上版本(仅支持 HTTPS)
  • Opera 浏览器,Opera 45 及以上版本(仅支持 HTTPS)
  • Safari 浏览器,Safari 11 及以上版本(仅支持 HTTPS)
  1. 获取一个 App ID (详见 获取 App ID )。
  2. 请确保你已知悉发版说明中列出的问题,详见 已知问题和局限常见问题回答

步骤 2: 获取安装包

从 Agora 官方网站 下载 最新版 Agora Web SDK 软件包,并获取其中的 .js 文件。

../_images/web_sdk_download.png

步骤 3:将安装包中的 js 文件保存到项目下

以 Web SDK 2.0 为例,将下载下来的安装包中的 AgoraRTCSDK-2.0.0.js 文件保存到你所操作的项目下,并在 index.html 中对其进行引用。

步骤 4:准备服务端

请确保已安装本地网页服务器,如 Apache, NginX 或 node.js。

步骤 5:在你的 Web 项目中调用接口

你可以通过调用接口实现以下功能:

  • 创建 Client 对象
  • 初始化 Client 对象
  • 加入频道
  • 创建本地流
  • 设置本地流 Profile
  • 初始化本地流
  • 发布本地流
  • 监听流事件并订阅远端流
  • 播放本地/远端流

具体调用方法,详见 语音通话 API

你也可以通过使用示例代码实现网页端音视频通话功能,具体示例代码如下:

场景 1:网页端音视频通话

  1. 创建 Client 对象,详见 创建音视频对象 (createClient)

    //创建 Client 对象
    /*
    RTC.createClient
    @param: appid - appid
    @param: callback - success callback
    @reurn: rtc client
    */
    var client = AgoraRTC.createClient({mode:'interop'});
    
  2. 初始化 Client 对象,详见 初始化客户端对象 (init)

    //初始化 Client 对象
    /*
    client.init
    @param: appid - appid
    @param: callback - success callback
    return: null
    */
    client.init(appid, function(){
        console.log("AgoraRTC client initialized");
    });
    
  3. 加入频道,详见 加入 AgoraRTC 频道 (join)

    //加入频道,如果启用了dynamic key, 请将dynamic key作为第一个参数
    //若有自己的用户ID系统, 可在第三个参数传参, 不然可传undefined, 则Agora会自动分配一个uid
    /*
    client.join
    @param: key - dynamic key
    @param: channel - channel name
    @param: uid - uid, undefined if random one
    @param: callback - success callback
    return: null
    */
    client.join(null, "webtest", undefined, function(uid){
        console.log("User " + uid + " join channel successfully");
        console.log("Timestamp: " + Date.now());
    });
    
  4. 创建本地流,详见 创建音视频流对象 (createStream)

    //创建本地流, 修改对应的参数可以指定启用/禁用特定功能
    /*
    RTC.createStream
    @param: options
    @param: options.streamId id of stream
    @param: options.audio if audio is captured locally
    @param: options.video if video is captured locally
    @param: options.screen if this stream is for screen share
    @param: options. extensionId the extension id of your chrome extension if share screen is enabled
    return: created local stream
    */
    var options = {
        streamID: uid,
        audio: true,
        video: true,
        screen: false,
        //chrome extension id
        extensionId: "minllpmhdgpndnkomcoccfekfegnlikg"
    }
    var localStream = AgoraRTC.createStream(options);
    
  5. 设置本地流 Profile,详见 设置视频属性 (setVideoProfile)

    //设置本地流视频属性, 详细列表可查看, https://document.agora.io/cn/2.0/api/web.html#setvideoprofile
    /*
    stream.setVideoProfile
    @param: profile profile string
    */
    localStream.setVideoProfile("480p_4");
    
  6. 初始化本地流,详见 初始化音视频对象(init)

    //初始化本地流, 并同时申请本地媒体采集权限
    /*
    stream.init
    @param: callback success callback
    */
    localStream.init(function(){
        console.log("Local stream initialized");
    });
    
  7. 发布本地流,详见 上传本地音视频流 (publish)

    //发布本地流以使其可以被远端接收到
    /*
    client.publish
    @param: stream the stream to publish
    @param: callback failing callback
    @return: null
    */
    client.publish(localStream, function(err){
        console.log("Publish stream failed", err);
    });
    
  8. 监听流事件和订阅远端流,详见 远程音视频流已添加回调事件 (stream-added)订阅远程音视频流 (subscribe)

     //监听流事件
     /*
     client.on
     @param: listen to stream event
     @param: callback listener callback
     @return: null
     @event: stream-added when new stream added to channel
     */
    
     /*
     client.subscribe
     @param: stream stream to subscribe
     @param: callback failing callback
     @return: null
     */
     client.on('stream-added', function(evt) {
         var stream = evt.stream;
         console.log("New stream added: " + stream.getId());
         console.log("Timestamp: " + Date.now());
         console.log("Subscribe ", stream);
         //在有新的流加入后订阅远端流
         client.subscribe(stream, function(err) {
            console.log("Subscribe stream failed", err);
         });
     });
    
     /*
     @event: peer-leave when existing stream left the channel
     */
     client.on('peer-leave', function(evt) {
        console.log("Peer has left: " + evt.uid);
        console.log("Timestamp: " + Date.now());
        console.log(evt);
     });
    
     /*
     @event: stream-subscribed when a stream is successfully subscribed
     */
     client.on('stream-subscribed', function(evt) {
        var stream = evt.stream;
        console.log("Got stream-subscribed event");
        console.log("Timestamp: " + Date.now());
        console.log("Subscribe remote stream successfully: " + stream.getId());
        console.log(evt);
     });
    
     /*
     @event: stream-removed when a stream is removed
     */
     client.on("stream-removed", function(evt) {
        var stream = evt.stream;
        console.log("Stream removed: " + evt.stream.getId());
        console.log("Timestamp: " + Date.now());
        console.log(evt);
    });
    
  9. 播放本地/远端流,详见 播放音视频流 (play)

    //将本地流在id为agora-remote的dom中播放
    /*
    stream.play
    @param: tag the dom tag where you want to play the video
    @return: null
    */
    localStream.play("agora-remote");
    

安装好示例代码后,输入你想要进入的房间名,请确保在音视频通话之前开通你的摄像头和麦克风权限。

场景 2 :网页端屏幕共享

如果想在网页端音视频通话过程中,启用屏幕共享功能,在使用示例代码前,你还需要进行如下操作:

1. 获取屏幕共享插件

联系 sales@agora.io 或技术支持获取 Chrome 屏幕共享插件,并将获取到的插件包解压。完整的插件文件夹结构如下图所示:

../_images/chrome_extension_screenshare.png

2. 安装插件并获取插件 ID

在 Chrome 网页端安装获取到的 Chrome 插件。首先打开你的 Chrome 浏览器,点击屏幕右上方的扩展按钮,选择 更多工具 > 扩展程序

../_images/chrome_extension_install_1.png

然后点击 加载已解压的扩展程序 ,选择你刚刚获取并解压的 Chrome 插件文件夹,然后点击 选择

../_images/chrome_extension_install_2.png

完成插件安装后,你可以直接在 Chrome 浏览器界面查看你的插件 ID。

../_images/chrome_extension_id.png

3. 修改域名

点击打开插件文件夹中的 json 文件夹,然后将 match 行的域名替换为你的网页域名。

../_images/chrome_extension_url.png

4. 部署 Sample code

1)创建 Client 对象,详见 创建音视频对象 (createClient)

//创建 Client 对象
/*
RTC.createClient
@param: appid - appid
@param: callback - success callback
@reurn: rtc client
*/
var client = AgoraRTC.createClient({mode:'interop'});

2)初始化 Client 对象,详见 初始化客户端对象 (init)

//初始化 Client 对象
/*
client.init
@param: appid - appid
@param: callback - success callback
return: null
*/
client.init(appid, function(){
    console.log("AgoraRTC client initialized");
});

3)加入频道,详见 加入 AgoraRTC 频道 (join)

//加入频道,如果启用了dynamic key, 请将dynamic key作为第一个参数
//若有自己的用户ID系统, 可在第三个参数传参, 不然可传undefined, 则Agora会自动分配一个uid
/*
client.join
@param: key - dynamic key
@param: channel - channel name
@param: uid - uid, undefined if random one
@param: callback - success callback
return: null
*/
client.join(null, "webtest", undefined, function(uid){
    console.log("User " + uid + " join channel successfully");
    console.log("Timestamp: " + Date.now());
});

4)创建本地流,详见 创建音视频流对象 (createStream) 。注意将代码中的 extensionId 替换成刚刚获取的插件 ID,详见 2. 安装插件并获取插件 ID

//创建本地流, 设置audio/video为false, screen为true, extensionID请提供属于你自己的chrome分享屏幕插件ID
//共享的流与一般的流几乎没有区别, 拥有一样的事件与生命周期, 但不能用来控制音频或视频
/*
RTC.createStream
@param: options
@param: options.streamId id of stream
@param: options.audio if audio is captured locally
@param: options.video if video is captured locally
@param: options.screen if this stream is for screen share
@param: options. extensionId the extension id of your chrome extension if share screen is enabled
return: created local stream
*/
var options = {
    streamID: uid,
    audio: false,
    video: false,
    screen: true,
    //chrome extension id
    extensionId: "minllpmhdgpndnkomcoccfekfegnlikg"
}
var localStream = AgoraRTC.createStream(options);

5)设置本地流 Profile,详见 设置视频属性 (setVideoProfile)

//设置本地流视频属性, 详细列表可查看, https://document.agora.io/cn/1.14/api/web.html#setvideoprofile
/*
stream.setVideoProfile
@param: profile profile string
*/
localStream.setVideoProfile("480p_4");

6)初始化本地流,详见 初始化音视频对象(init)

//初始化本地流, 并同时申请本地媒体采集权限
/*
stream.init
@param: callback success callback
*/
localStream.init(function(){
    console.log("Local stream initialized");
});

7)发布本地流,详见 上传本地音视频流 (publish)

//发布本地流以使其可以被远端接收到
/*
client.publish
@param: stream the stream to publish
@param: callback failing callback
@return: null
*/
client.publish(localStream, function(err){
    console.log("Publish stream failed", err);
});

8)监听流事件和订阅远端流,详见 远程音视频流已添加回调事件 (stream-added)订阅远程音视频流 (subscribe)

 //监听流事件
 /*
 client.on
 @param: listen to stream event
 @param: callback listener callback
 @return: null
 @event: stream-added when new stream added to channel
 */

 /*
 client.subscribe
 @param: stream stream to subscribe
 @param: callback failing callback
 @return: null
 */
 client.on('stream-added', function(evt) {
     var stream = evt.stream;
     console.log("New stream added: " + stream.getId());
     console.log("Timestamp: " + Date.now());
     console.log("Subscribe ", stream);
     //在有新的流加入后订阅远端流
     client.subscribe(stream, function(err) {
        console.log("Subscribe stream failed", err);
     });
 });

 /*
 @event: peer-leave when existing stream left the channel
 */
 client.on('peer-leave', function(evt) {
     console.log("Peer has left: " + evt.uid);
     console.log("Timestamp: " + Date.now());
     console.log(evt);
 });

 /*
 @event: stream-subscribed when a stream is successfully subscribed
 */
 client.on('stream-subscribed', function(evt) {
     var stream = evt.stream;
     console.log("Got stream-subscribed event");
     console.log("Timestamp: " + Date.now());
     console.log("Subscribe remote stream successfully: " + stream.getId());
     console.log(evt);
 });

 /*
 @event: stream-removed when a stream is removed
 */
client.on("stream-removed", function(evt) {
    var stream = evt.stream;
    console.log("Stream removed: " + evt.stream.getId());
    console.log("Timestamp: " + Date.now());
    console.log(evt);
});

9)播放本地/远端流,详见 播放音视频流 (play)

//将本地流在id为agora-remote的dom中播放
/*
stream.play
@param: tag the dom tag where you want to play the video
@return: null
*/
localStream.play("agora-remote");

安装好示例代码后,你就可以开始屏幕共享了。

如果想退出屏幕共享,可以参考如下代码的逻辑:

function deinitShare(client, stream) {
      if (stream) {
         // share stream exist already
         client.unpublish(stream, function (err) {
            console.log("Unpublish failed with error: ", err);
         });
         stream.close();
         client.leave();
       }
     }
以上内容是否对您有帮助?