搞定P2P跨平臺視頻通信,利用Agora實現

實現了ubuntu和web應用之間的跨平臺視頻通信

提前準備技能:html,js,c++,linux

準備工作:下載Agora的兩個SDK,Web和Linux C++

下載地址:https://docs.agora.io/cn/Agora%20Platform/downloads

下載版本:

Agora_Web_SDK_v2_8_0_FULL

OpenVideoCall-Linux 4(此版本爲Agora的測試版)

在ubuntu行示例程序,發送視頻流:

首先在 [Agora.io 註冊](https://dashboard.agora.io/cn/signup/) 註冊賬號,並創建自己的測試項目,獲取到 AppID。將 AppID 填寫進 run.sh

```  --appId "your app ID"  ```

然後在 [Agora.io SDK](https://www.agora.io/cn/blog/download/) 下載 **視頻通話 + 直播 SDK**,解壓後將其中**libs**文件夾下的

- libagora_rtc_sdk.so

兩個文件複製到本項目的 “OpenVideoCall/libs” 文件夾下。

在sample/OpenVideoCall下 輸入命令 make, 便可編譯生成openVideoCall demo。在run.sh中配置執行demo所需要的參數。

openVideoCall 爲命令行程序。使用方法如下:

command:

- open 開啓通話。

- close 關閉通話。

- enable_video 打開/關閉 全局視頻功能,enable_video 0 爲關閉視頻功能,enable_video 1爲打開視頻功能

- enable_audio 打開/關閉 全局音頻功能

- enable_local_video 打開/關閉 本地視頻功能,enable_local_video 0 爲關閉視頻功能,enable_local_video 1爲打開視頻功能

- mute_local_video 打開/關閉 本地視頻流發送,mute_local_video 0 爲打開本地視頻流發送,mute_local_video 1爲關閉本地視頻流發送

- mute_local_audio 打開/關閉 本地音頻流發送,mute_local_video 0 爲打開本地音頻流發送,mute_local_video 1爲關閉本地音頻流發送

- print_device_info  打印設備信息

- set_cur_camera  設置當前工作的攝像頭,set_cur_camera ‘device id ’ ,device id可以通過print_device_info 得到

- exit 退出程序

記得更改APPID,並且該ID爲無app證書驗證的版本!!!

Web端接收視頻流頁面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type""text/javascript" src="./AgoraRTCSDK-2.8.0.js"></script>
    <script>
        var APPID='**************';
        var CHCHANNEL_KEY=null;
        var CHANNEL_NAME='123456';
        var UID='12345';
        
        var client = AgoraRTC.createClient({mode: 'live'});
        
        client.init(APPID, function(){console.log("AgoraRTC client initialized");}, function(err){console.log("AgoraRTC client init failed", err);});
        
        client.join(CHCHANNEL_KEY,CHANNEL_NAME,null, function(UID) {console.log("User " + UID + " join channel successfully");}, function(err) {console.log("Join channel failed", err);});
        
        function recv(){
            console.log("Start mon");
            
            client.on('stream-added', function (evt) {var stream = evt.stream;console.log("New stream added: " + stream.getId());client.subscribe(stream, function (err) {console.log("Subscribe stream failed", err);});
            });
            
            client.on('stream-subscribed',function(evt){
                var remoteStream = evt.stream;
                console.log("Subscribe remote stream successfully: " + remoteStream.getId());
                
                remoteStream.play('agora_remote');
                });
            
            // 這裏使用agora_remote + remoteStream.getId()作爲dom元素的id。            
        }
    </script>
</head>
<body>
<input type="button" name="confirmAlter" value="recv" οnclick="recv()"/>
<div>收到消息:</div>
<div id="video" style="margin:0 auto;">
    <div id="agora_remote" style="float:right;width:210px;height:147px;display:inline-block;">video</div>
</div>
</body>
</html>

Web端推送視頻流:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type""text/javascript" src="./AgoraRTCSDK-2.8.0.js"></script>
    <script>
        var APPID='****************';
        var CHCHANNEL_KEY=null;
        var CHANNEL_NAME='123456';
        var UID='1234';
        
        var client = AgoraRTC.createClient({mode: 'live'});
        
        client.init(APPID, function(){console.log("AgoraRTC client initialized");}, function(err){console.log("AgoraRTC client init failed", err);});
        
        client.join(CHCHANNEL_KEY,CHANNEL_NAME,null, function(UID) {console.log("User " + UID + " join channel successfully");}, function(err) {console.log("Join channel failed", err);});
        
        function push(){
            localStream = AgoraRTC.createStream({streamID: UID, audio: true,  video: true, screen: false});
            localStream.setVideoProfile('720p_3');
            localStream.on("accessAllowed", function() {console.log("accessAllowed");});
            localStream.on("accessDenied", function() {console.log("accessDenied");});
            
            localStream.init(function(){
                console.log("getUserMedia successfully");
                localStream.play('agora_local');
                client.publish(localStream, function (err) {console.log("Publish local stream error: " + err);});
                client.on('stream-published', function (evt) {console.log("Publish local stream successfully");});
            });
        }
    </script>
</head>
<body>
<input type="button" name="confirmAlter" value="push" οnclick="push()"/>
<div>收到消息:</div>
<div id="video" style="margin:0 auto;">
    <div id="agora_local" style="float:right;width:210px;height:147px;display:inline-block;">video</div>
</div>
</body>
</html>

該代碼博主測試成功過

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章