当 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了！真是普天同庆。

其余的一些零碎

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

• 分享页面的优化
• 在线人数统计
• 链接咕咕机打印
• 打印太多致使纸张翻车，须要时常捋一捋

相对来讲这个应用仍是蛮简单的。

但愿你们给我点赞！