当 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.3node.js/10.15.3pm2 3.5.0express/4.16.4域名是花650块重金从Google买的。证书是免费的LetEncrypt证书。咕咕机是去年买的在家吃灰了一年翻出来的。
实时音视频技术用的当然是Agora WebRTC SDK啦。主播端和观众端都使用的是Web。
WebRTC主播端
主播端比较简单，就是一个发送端网页。获取摄像头权限后发动到指定频道即可。
为了兼容不同设备的观众端的Codec，所以主播端发送H264、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了！真是普天同庆。
其他的一些零碎
还有一些零零碎碎的工作，包括：
分享页面的优化在线人数统计连接咕咕机打印打印太多导致纸张翻车，需要时常捋一捋相对来说这个应用还是蛮简单的。
希望大家给我点赞！
相关知识
当薄荷遇到
少儿编程证书比赛避坑指南⭕️。少儿编程证书比赛避坑指南⭕️看
蓝桥杯大赛报名指南
软件大赛竞赛规则.doc
回望第二届中国“互联网+”大学生创新创业大赛冠军及金奖项目：双创花儿已竞相开放 华北电力大学高等教育研究所
杨灵芝获得2022年世界技能大赛花艺项目优胜奖
软件大赛
元编程艺术，第 1 部分: 元编程简介
JAVA编程艺术
“超越鸡蛋”
网址: 当 RTC 遇到“杨超越编程大赛”=？ https://m.huajiangbk.com/newsview423977.html
| 上一篇: 高效学习公式：学习效果=时间*注 |
下一篇: 钢琴比赛证书 |
