When the RTC encounter "Yang Beyond Programming Contest" =?

introduction

Recently, our company made a small internal sharing activities, serendipitously, did not think there is a windfall.

A little brother, took part in the first two months of "Yang beyond the programming contest" , submitted works, themes ideas Qing Qi, also with great sincerity spent 650 yuan "huge sum of money", rented a server.

Although the final won no awards, we do not know, we do not dare to ask. But he directed this "sincerity", we also want to share out his work, recreation and entertainment for everyone.

The principle of "the technology community to share technology", we will let him also wrote down the development process.

Next, look at his "performance."

---

Friends can go directly to ycy.dev experience.

After the experience I remember going to the B station video www.bilibili.com/video/av493... quality at Tri-Oh!

github：github.com/scaret/ycy-…

Introduction of Application

A constitution was inspired by the lucky beyond. Fortunately, the value share to exceed by a wish to go beyond the form. The project via webcam live a printer main house on the PO. Wishing you can send content to the printer through H5 page. Wishing content in real time via live web page returned, and the whole world to see. Wishing to save paper will be sent to a certain extent beyond.

In addition, recently I bought a small love the students, but also intends to put the camera range, plus audio and video interoperability, you can manipulate it a little love students through real-time audio and video remote.

Online environment

Because it is a personal project, but also embarrassed by the corporate machine, then rub the AWS Free Tier, AWS uses the example of Japan Ubuntu 16.04, micro type.

Basically just play the role of the server hosting the page, as too cumbersome and put the record in Japan, it is still relatively slow. Other settings are as follows:

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

A domain name is to spend 650 to buy a large amount of money from Google. Certificate is free LetEncrypt certificate. Cuckoo machine is bought last year to eat at home for a year turned out gray.

Real-time audio and video technology used is of course the Agora WebRTC SDK friends. Anchor end use and end the audience is Web.

WebRTC anchor end

Anchor end is relatively simple, the sender is a web page. After obtaining permission to launch the camera to a specified channel can be.

For compatibility with different devices of the audience side of the Codec, so the anchor sends H264, VP8 two-way video. Two-way video is 720P settings.

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");
                });
            });
        });
    });
});
复制代码

After I did a remix of additional features, playback song [calories] continuously in the channel.

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 audience end

First, the audience will detect the end of the current environment supports video encoding format. Since H264 Android devices to implement and inconsistent, here is VP8 priority, Fallback to H264 does not support the VP8 video encoding environment.

    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";
    });
复制代码

In Chrome, Safari browser, there is one called Autoplay [strategy] things. Simply put, the browser will prevent the media play the sound automatically. The solution is simple, before playing an extra set up a confirmation box, click OK guide for when to allow video playback.

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();
        }
    });
}
复制代码

The micro-channel iOS also supports WebRTC up! Really celebrate.

Some other bits and pieces

There are some bits and pieces of work, including:

• Share page optimization
• The number of online statistics
• Cuckoo connected machine print
• Too many results in print paper roll, often need to stroke a stroke

Relatively speaking, this application is quite simple.

I hope you give me some praise!

Reproduced in: https: //juejin.im/post/5cf7585c51882546934e611a