The introduction

A few days ago, our company did a small internal sharing activity, inadvertently inserted, unexpectedly there is an unexpected harvest.

A little brother participated in the “Yang Chaoyue Programming Contest” in the first two months and submitted a work with a clear theme. He also sincerely spent 650 yuan to rent a server.

We don’t know if we won the prize or not, and we’re afraid to ask. But just because of his “sincerity”, we also want to share his works for everyone’s entertainment.

In the spirit of sharing technology with the tech community, we asked him to write down the development process as well.

Next, watch his “performance”.

Friends can go directly to Ycy. dev.

Experience after remember to my B standing video www.bilibili.com/video/av493… The next quality three even oh!

Github:github.com/scaret/ycy-…

Application is introduced

Inspired by the transcendent lucky A constitution. Share the blessings of transcendence in the form of a wish to transcendence. The project broadcasts live webcam footage of a printer sitting in a PO owner’s home. You can send wishes to the printer from page H5. The wish content will be sent back in real time via webcast and seen around the world. Wishing paper saved up to a certain point will be sent beyond.

In addition, I recently bought a little ai student, and I plan to put it into the scope of the camera. With the ability of audio and video communication, I can remotely control the little ai student through real-time audio and video communication.

The online environment

Since it was a personal project, I was embarrassed to use the company machine, so I used AWS Free Tier and AWS Japan Ubuntu 16.04, a micro type instance.

Basically, the server just plays the role of hosting the page, because of the trouble of filing in Japan, but also relatively slow. Other Settings are as follows:

  • Nginx / 1.10.3
  • Node. Js / 10.15.3
  • Pm2 3.5.0
  • Express / 4.16.4

The domain name was bought from Google for 650 bucks. The certificate is a free LetEncrypt certificate. I bought the goo last year and spent a year eating ashes.

The Agora WebRTC SDK is used for real-time audio and video technology. Both the anchor side and the viewer side use the Web.

The WebRTC anchor end

Anchor end is relatively simple, is a sending end web page. After obtaining camera permission, start to the specified channel.

In order to be compatible with Codec of audience side of different devices, the host side sends H264 and VP8 videos. Both videos are set to 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");
                });
            });
        });
    });
});
Copy the code

Then I added a mix feature and played the Calorie Song non-stop on 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
    });
}

Copy the code

The WebRTC audience

The viewer first detects the video encoding format supported by the current environment. Since android devices have inconsistent H264 implementations, VP8 takes precedence here, and Fallback to H264 video encoding in environments that do not support VP8.

    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";
    });
Copy the code

In Chrome and Safari, there’s something called autoplay Policy. Simply put, the browser prevents the media from playing sound automatically. The solution is also very simple, before playing an extra set up a confirmation box, boot used to click confirm, allowing the video to play.

var nickname = window.localStorage && localStorage.getItem("nickname");
function updateNickname(){
    bootbox.prompt({
        closeButton: false,
        title: "What's your name?",
        callback: function(result){
            if (result){
                nickname = result;
                window.localStorage && localStorage.setItem("nickname", nickname);
                ConnectIO();
            }else{ updateNickname(); } elem.play(); }}); }Copy the code

IOS wechat also supports WebRTC! It’s a celebration for all.

Other bits and pieces

There are also bits and pieces of work, including:

  • Share page optimization
  • Online head count
  • Connect the goo machine to print
  • Too much printing causes paper to tip over and needs to be smoothed regularly

The app is relatively simple.

I hope you give me a thumbs up!