Write a video to tiktok, and never be a programmer.

Time:2021-2-17

Every cause has its fruit

Tiktok: why do I want to make a video of the video, but actually because my sand sculpture girlfriend, what she just wanted me to do.

One night she was shaking tiktok and saw a very strong voice.Educational significance“If a man loves his daughter-in-law, he should do all the housework.” then it wants to download the video and share it with her sistersMasterMy experience.

But we all know that tiktok downloaded video is watermarked, as a severe obsessive-compulsive disorder, this is not allowed, and no way to find out whether to watermark tools, or a circle, or charge, or download, the smile on the face is gradually disappearing.

I joked on the side: it’s not too difficult, or I’ll make one for you! “Can you do it?” Then cast a look of disdain.

Write a video to tiktok, and never be a programmer.

oh dear! I was joking. I said I couldn’t do it. I have to prove it to you! Men can’t stand that

Let’s take a look at the online preview effect of the watermark removal tool I made47.93.6.5:8888/index

Write a video to tiktok, and never be a programmer.

Next, I’d like to analyze with you the idea of making this watermarking tool, which many people first heardDewateringSubconsciously, I think it’s a better algorithm. In fact, it’s an illusion~

get to the bottom of

Although I had to fight for breath, I was really confused at the beginning because I didn’t know where to start and what principle to watermark? Do I have to write an algorithm?

Tiktok, a video link, and a little analysis, it is easy to see that this is a short link that is processed. The short link will redirect to the real video address.URL

https://v.douyin.com/JSkuhE4/

Enter a short link in the browser to get the following oneURLFrom my experienceURLIn6820792802394262795It is likely to be the unique ID of the video, and the unique ID is usually used as the input parameter of the interface for obtaining details. Hey, it seems that I have a clue.

https://www.iesdouyin.com/share/video/6820792802394262795/

Write a video to tiktok, and never be a programmer.

Give up the sacrificeF12Dafa opened the console and found such an interface in many requests. It actually used the unique ID above.

https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/?item_ids=6820792802394262795

Write a video to tiktok, and never be a programmer.

What’s more surprising is that the data returned by the interface is called a detail, including author information, audio address, video address, and floor plan. But there is no video without watermarkURL

Write a video to tiktok, and never be a programmer.

Only one video with watermark was foundURL, a little lost, I looked at the address again and found thatwmIt’s a bit like my project name, isn’t itwatermarkIs it an abbreviation for watermark?

https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200f030000bqk54kg2saj3lso3oh20&ratio=720p&line=0

Write a video to tiktok, and never be a programmer.

Seems to see a glimmer of hope, I quickly revisedURLI tried again in the browser, and sure enough, there was no watermark.

https://aweme.snssdk.com/aweme/v1/play/?video_id=v0200f030000bqk54kg2saj3lso3oh20&ratio=720p&line=0

Write a video to tiktok, and never be a programmer.

Only then did we find the tiktok.DewateringIt’s simple and touching, ha ha ha~

set an example by personally taking part

Now that the principle is clear, the rest is to realize the function step by step. The principle seems very simple, but there are still a little holes in the implementation, which wastes a lot of time.

There are only three simple steps in the implementation process

  • 1. Filter out short video connection from input box
  • 2. The short connection is sent to the back end to parse the video without watermarkURL
  • 3. VideoURLPass it to the front end for preview and download

There is no difficulty in the back-end. Step by step, analyze the real video according to the above analysis processURLThat’s it.

be careful: the address we want to getURL, are the current short connectionURLAfter resetURL. There are some links that tiktok do not support browser access, so manual modification is necessary.User-agentAttribute to simulate mobile access.

/**
public static String getLocation(String url) {
        try {
            URL serverUrl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection) serverUrl.openConnection();
            conn.setRequestMethod("GET");
            conn.setInstanceFollowRedirects(false);
            conn.setRequestProperty("User-agent", "ua");//Analog phone connection
            conn.connect();
            String location = conn.getHeaderField("Location");
            return location;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }

The following is a complete back-end implementation, you can see that the amount of code is very small.

/**
@Slf4j
@Controller
public class DYController {
    public static String DOU_YIN_BASE_URL = "https://www.iesdouyin.com/web/api/v2/aweme/iteminfo/?item_ids=";
    /**
    @RequestMapping("/parseVideoUrl")
    @ResponseBody
    public String parseVideoUrl(@RequestBody String url) throws Exception {
        DYDto dyDto = new DYDto();
        try {
            url = URLDecoder.decode(url).replace("url=", "");
            /**
            String redirectUrl = CommonUtils.getLocation(url);

            /**
            String videoUrl = "";
            String musicUrl = "";
            String videoPic = "";
            String desc = "";
            if (!StringUtils.isEmpty(redirectUrl)) {
                /**
                String itemId = CommonUtils.matchNo(redirectUrl);
                StringBuilder sb = new StringBuilder();
                sb.append(DOU_YIN_BASE_URL).append(itemId);
                String videoResult = CommonUtils.httpGet(sb.toString());
                DYResult dyResult = JSON.parseObject(videoResult, DYResult.class);
                /**
                videoUrl = dyResult.getItem_list().get(0)
                        .getVideo().getPlay_addr().getUrl_list().get(0)
                        .replace("playwm", "play");
                String videoRedirectUrl = CommonUtils.getLocation(videoUrl);
                dyDto.setVideoUrl(videoRedirectUrl);
                /**
                musicUrl = dyResult.getItem_list().get(0).getMusic().getPlay_url().getUri();
                dyDto.setMusicUrl(musicUrl);
                /**
                videoPic = dyResult.getItem_list().get(0).getVideo().getDynamic_cover().getUrl_list().get(0);
                dyDto.setVideoPic(videoPic);
                /**
                desc = dyResult.getItem_list().get(0).getDesc();
                dyDto.setDesc(desc);
            }
        } catch (Exception e) {
            log.error("Watermark removal exception {}", e);
        }
        return JSON.toJSONString(dyDto);
    }
}

The front-end implementation is also relatively simple, getting the video parsed by the back-endURLPreview play, Download OK.

Write a video to tiktok, and never be a programmer.

I used antiques for quick implementationJQueryPeople of my age still have deep feelings for it,UIFor framelayer.js. After the source code will be shared with you, not all posted out.

$.ajax({
    url: '/parseVideoUrl',
    type: 'POST',
    data: {"url": link},
    success: function (data) {
        $('.qsy-submit').attr('disabled', false);
        try {
            var rows = JSON.parse(data);
            layer.close(index);
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: true,
                skin: 'yourclass',
                content: `<div style="overflow:hidden;height: 580px;width: 350px;"><div><div><a href="###" rel="noopener nofollow noreferrer" onclick="downloadVideo('${rows['videoUrl']}','${rows['desc']}'"> < button > Download Video < / button > < / a > < / div > < div > < textarea id =" videourl "cols =" 1 "rows =" 1 "style =" height:0;width :0;position: absolute;">${rows['videoUrl']}< / textarea > < button onclick = "copy ('videourl ')" > copy link < / button > < / div > < div > < a${rows['musicUrl']}','${rows['desc']}'"> < button > Download Audio < / button > < / a > < / div > < video id =" video "width =" 360px "height =" 500px "SRC ="${rows['videoUrl']}" controls = "true" poster="${rows['videoPic']}" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"><source src="${rows['videoUrl']}" type="video/mp4"> </video></div></div>`
                //content: `<video id="video" src="${rows['videoUrl']}" controls = "true" poster="${rows['videoPic']}" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"><source src="${rows['videoUrl']}" type="video/mp4"> </video>`
            });

        } catch (error) {
            layer.alert('error message:' + error, {
                title: 'exception',
                skin: 'layui-layer-lan',
                closeBtn: 0,
                anim: 4 //Animation type
            });
            return false;
        }
    },
    error: function (err) {
        console.log(err);
        layer.close(index);
        $('.qsy-submit').attr('disabled', false);
    },
    done: function () {
        layer.close(index);
    }
})
})

be careful: we refer to the resources of other websites in our own websiteURL, because they are not under the same domain namereferrerDifferent, usually encounter three party website anti-theft chain interception, so in order to normal access to three party resources, we must hide the requestreferrer, the following parameters are set in the page.

 <!--Solve the request of accessing video URL403abnormal-->
 <meta name="referrer" content="no-referrer"/>

It’s also simple to do the lower mobile terminal adaptation. The style looks ok, but the function is a little unsatisfactory. It’s being optimized later.

Write a video to tiktok, and never be a programmer.

summary

A lot of things are like this. I always feel unfathomable before I seriously study them. But once I come into contact with the essence of technology, I begin to laugh at how stupid I was before. Sometimes I look up a layer of window paper if I know or not.

Well, that’s all for today. The source code of this article isMy official account [programmer]Source code】Take it from yourself


Hundreds of technical e-books have been sorted out and sent to our friends. Pay attention to the public number, reply to [666] and collect it by yourself. We have set up a technology exchange group with some friends to discuss technology and share technical materials, so as to learn and progress together. If you are interested, please join us!

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]