Generating a QR-code with live stream configuration for Yi 4K camera

Suppose you’re building a streaming service which allows users to perform all set-ups in a single web application.

One possible streaming option is YI 4k camera with the feature that lets you enter an RTMP link and Wi-Fi network settings inside the mobile application and scan the generated QR-code from your smartphone’s screen. Then, the camera parses the code, extracts all the necessary data from it and starts streaming over Wi-Fi network. The mobile app is free and can be downloaded from Play Store or App Store, however, you don’t want your users to depend either on it or on entering an RTMP link manually or copying it over. Instead you’d be better off generating a scan-ready QR-code and displaying it right inside your web application.

There are several js libraries generating a QR-code, but what you need to know first is the format of data you need to put into a QR-code.

One possible solution is to install any application which can parse an existing code and actually read the data hidden in it. What you’ll find is a JSON string with the following fields:

{
    "ssid":"YOUR_WIFI_NETWORK NAME",
    "pwd":"YOUR_WIFI_NETWORK_PASSWORD",
    "res":"1080p",
    "rate":"3",
    "dur":"0",
    "url":"rtmp://some-rtmp-link",
    "ak":"0",
    "sign":"3Gy3XV8BEvSsSgn/"
}

At first it seems to be fine and you think you’re taking the right path, but the following problem arises: you don’t know the rules for generating a signature under the “sign” key in the JSON above.

Fortunately, this turned out to be an unnecessary field as well as “ak” field. The camera only verifies a signature if it is present, but without these fields the camera silently accepts the settings. Hence, a possible configuration could be:

{
    "ssid":"YOUR_WIFI_NETWORK NAME",
    "pwd":"YOUR_WIFI_NETWORK_PASSWORD",
    "res":"1080p",
    "rate":"3",
    "dur":"0",
    "url":"rtmp://some-rtmp-link"	
}

Other parameters are:

• “res” which sets stream video resolution and can take the following values: 1080p, 720p, 480p;
• “rate” takes 0 for auto,1 for low (0.6 Mbps) rate, 2 for middle (0.8 Mbps) rate, 3 for high (1.2 Mbps) rate.
• “dur” which is not configurable from mobile app, hence just set it to 0, which most likely means infinite.

Now, you have sufficient information to generate a QR-code with your own streaming info, including local Wi-Fi network settings, video quality parameters and destination RTMP URL. Once you have a code, turn on the camera, select live mode and scan the code: camera will connect to the local network and then start streaming to the destination URL.

For example, using qrcodejs library you can simply generate a QR-code with the following demo sample:

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: JSON.stringify({
        "ssid": "YOUR_WIFI_NETWORK NAME",
        "pwd": "YOUR_WIFI_NETWORK_PASSWORD",
        "res": "1080p",
        "rate": "3",
        "dur": "0",
        "url": "rtmp://stream-destination-url"
    }),
    width: 300,
    height: 300,
    correctLevel : QRCode.CorrectLevel.M
});
</script>

Note, that most libraries support error correction levels (see correctLevel parameter above). The higher the level, the more space will be taken by the generated QR-code. YI camera doesn’t require a very high level but the speed at which it is able to scan your code will depend on this level; so, you will need to find a balance (i.e., on small mobile devices large QR-codes simply won’t fit but you need a large code to fit your long Wi-Fi network credentials or huge stream names).