當 RTC 遇到「楊超越編程大賽」=？

引言

前些日子，我司作了個小的內部分享活動，無意插柳，沒想到還有個意外收穫。

有位小哥哥，參加了前兩個月的 「楊超越編程大賽」，提交了一份做品，做品主題思路清奇，還頗有誠意地花了650元「鉅款」，租了個服務器。

雖然最終獲沒獲獎，咱們也不知道，咱們也不敢問。但就衝着他這份「誠意」，咱們也想把他的做品分享出來，供你們娛樂娛樂。

本着「在技術社區要分享技術」的原則，咱們讓他將開發過程也寫了下來。

接下來，請看他的「表演」。

---

朋友們能夠直接去 ycy.dev 體驗。

體驗後記得去個人B站視頻 www.bilibili.com/video/av493… 下素質三連哦！

github：github.com/scaret/ycy-…

應用介紹

靈感來自於超越的幸運A體質。經過向超越許願的形式來分享超越的幸運值。 該項目經過網絡攝像頭直播一個放在PO主家的打印機。你能夠經過H5頁面向打印機發送許願內容。許願內容會經過網頁直播實時傳回，並被全世界看到。許願紙攢到必定程度會寄給超越。

另外，最近買了個小愛同窗，打算也放入攝像頭範圍，加上音視頻互通能力，就能夠經過實時音視頻遠程操控小愛同窗啦。

線上環境

由於是我的項目，也很差意思用公司機器，因而蹭了AWS Free Tier，使用了AWS日本的Ubuntu 16.04，micro類型的實例。

基本上服務器只是起到託管頁面的做用，因爲嫌備案麻煩而放在日本，還比較慢。其餘設置以下：

• nginx/1.10.3
• node.js/10.15.3
• pm2 3.5.0
• express/4.16.4

域名是花650塊重金從Google買的。證書是免費的LetEncrypt證書。咕咕機是去年買的在家吃灰了一年翻出來的。

實時音視頻技術用的固然是Agora WebRTC SDK啦。主播端和觀衆端都使用的是Web。

WebRTC主播端

主播端比較簡單，就是一個發送端網頁。獲取攝像頭權限後發動到指定頻道便可。

爲了兼容不一樣設備的觀衆端的Codec，因此主播端發送H26四、VP8兩路視頻。兩路視頻都是720P的設置。

var codecs = ["h264", "vp8"];
codecs.forEach(function(codec){
    var client = AgoraRTC.createClient({mode: "rtc", codec: codec});
    client.init("<appId>", function () {
        client.join(null, cname + "_" + codec, 8888, function(){
            console.log("Client joined");
            const spec = {video: true, audio: true};
            const localStream = AgoraRTC.createStream(spec);
            localStream.setVideoProfile("720p_2");
            console.log("spec", spec);
            localStream.init(function(){
                window.vt = localStream.stream.getVideoTracks()[0]
                console.log("LocalStream Inited");
                client.publish(localStream);
                client.on("stream-published", function(){
                    console.log("stream published");
                    localStream.play("local-container");
                });
            });
        });
    });
});
複製代碼

以後我額外作了混音功能，在頻道內不間斷地播放【卡路里之歌】。

localStream.audioMixing.inEarMonitoring = "NONE";
if (codec === "vp8"){
    localStream.startAudioMixing({
        filePath: '/music/kll.mp3',
        replace: true,
        playTime: 0,
        loop: true
    });
}else{
    localStream.startAudioMixing({
        filePath: '/music/pickme.mp4',
        replace: true,
        playTime: 0,
        loop: true
    });
}

複製代碼

WebRTC觀衆端

觀衆端首先會偵測當前環境支持的視頻編碼格式。 因爲安卓設備的H264實現比較不一致，在這裏是VP8優先，在不支持VP8的環境中Fallback到H264視頻編碼。

var cname = "<cname>";
    var codec = "vp8";
    AgoraRTC.getSupportedCodec().then(function(codecs){
        console.log("codecs", codecs);
        if (codecs.video.indexOf("VP8" !== -1)){
            codec = "vp8";
        }else{
            codec = "h264";
        }
    }).catch(function(e){
        console.error(e);
        codec = "h264";
    });
複製代碼

在Chrome、Safari瀏覽器中，有一個叫作【自動播放策略】的東西。簡單地說，瀏覽器會阻止媒體自動播放聲音。 解決的方法也很簡單，在播放以前額外設置了一個確認框，引導用於點擊確認時，容許視頻的播放。

var nickname = window.localStorage && localStorage.getItem("nickname");
function updateNickname(){
    bootbox.prompt({
        closeButton: false,
        title: "你的名字是？",
        callback: function(result){
            if (result){
                nickname = result;
                window.localStorage && localStorage.setItem("nickname", nickname);
                ConnectIO();
            }else{
                updateNickname();
            }
            elem.play();
        }
    });
}
複製代碼

iOS的微信也支持WebRTC了！真是普天同慶。

其餘的一些零碎

還有一些零零碎碎的工做，包括：

• 分享頁面的優化
• 在線人數統計
• 鏈接咕咕機打印
• 打印太多致使紙張翻車，須要時常捋一捋

相對來講這個應用仍是蠻簡單的。

但願你們給我點贊！