Title: Crawl Douyin Kuaishou Camera Live Streaming

In recent years, live broadcasts on various platforms have become increasingly popular. In life and production, we need some live broadcast scenarios. For example, the live streaming of Douyin and Kuaishou platforms are captured and played directly in real time in the network player. Can it be done? Let’s study with my cousin!http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/3_20221028182552.gif

Three common live broadcast protocols

The RTMP protocol is designed for streaming media and is used more frequently in streaming. At the same time, most CDN manufacturers support the RTMP protocol.

HTTP-FLV uses HTTP long connections similar to RTMP streaming and needs to be distributed by a specific streaming server, taking into account the advantages of both. and a streaming protocol that can reuse existing HTTP distribution resources. Its real-time performance is equal to RTMP, which saves some protocol interaction time compared to RTMP, has shorter first-screen time and more expandable functions.

As a live broadcast protocol proposed by Apple, HLS occupies an unshakable position on the iOS side, and the Android side also provides corresponding support.http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028182848.png?x-oss-process=style/gzh

Get Douyin Kuaishou Live Streaming

What if you get the live broadcast address of Douyin? We just need to use the traffic analysis tool to grab the URL containing the above protocol.

First we find the current live broadcast to crawl. And share it as follows:

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028183449.png?x-oss-process=style/gzh

Open the shared address in the browser, bing

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028183759.png?x-oss-process=style/gzh

Then use the traffic analysis tool to grab the current data packet.

Then, we search for the file format flv or m3u8 in the live broadcast protocol.

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028184833.png?x-oss-process=style/gzh

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028184858.png?x-oss-process=style/gzh

Right-click to copy the address. Then put it in the streaming media playback tool to test it.

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185013.png?x-oss-process=style/gzhThe effects are as followshttp://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185059.png?x-oss-process=style/gzh

In the same way, we can capture the live stream of Kuaishou B station.

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185406.png?x-oss-process=style/gzh

Crawl data http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185441.png?x-oss-process=style/gzh

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185617.png?x-oss-process=style/gzh

Use HTML display

Now I encounter such a new problem. We got the live stream. But it can only be played through a streaming player. Can you play live videos through html?

We know that in H5, the video tag is used to play videos. But it only parses common formats such as mp4 avi. However, formats such as flv m3u8 are not supported. How to solve it?

Know flv.js

A JavaScript library that implements playing FLV format videos in HTML5 videos. It works by multiplexing FLV file streams into ISO BMFF (MP4 fragment) fragments, and feeding the MP4 fragments into the browser via Media Source Extensions.

flv.js only does one thing. After obtaining the audio and video data in FLV format, it decodes the FLV data through native JS, and then feeds the native HTML5 Video tags through the Media Source Extensions API. (HTML5 natively only supports playback mp4/webm format, not FLV)

Code Example

First, we need to introduce flv.js first

script src='https://cdn.bootcss.com/flv.js/1.3.3/flv.js'/scripttml code is as follows: video width='300px' height='400px' id='videoElement' controls/video

script

if (flvjs.isSupported()) {

var videoElement=document.getElementById('videoElement');

var flvPlayer=flvjs.createPlayer({

type: 'flv',

url: 'https://pull-f3.douyincdn.com/third/stream-111864726937404075_hd.flv?abr_pts=-1800'

});

flvPlayer.attachMediaElement(videoElement);

flvPlayer.load();

flvPlayer.play();

}

/script effect is as followshttp://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028190554.png?x-oss-process=style/gzh

Crawl the camera live stream

We also often use the cameras of attractions for live broadcasts. How did it be done?

Here we take the home TPLink camera as an example.

Share the device in the camera app and then grab the live stream.

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028191837.png?x-oss-process=style/gzh Catch data packets http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028191954.png?x-oss-process=style/gzh Test http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028192206.png?x-oss-process=style/gzh

Summary

In this issue, we will explain the crawling of the live video streaming protocol. The principle is also very simple, it is just to capture packets and filter live broadcast protocol flv m3u8.