This is the fourth article in a series of articles on danmu player. Originally, Iotan and other video sites used this to play streaming media. Player official website: nplayer.js.org/.

This article introduces how to protect video through HLS.

Video authentication

Some videos require payment or membership, so how to protect these videos? The most common method is server authentication, where HTTP requests come with a signature and the server determines whether the current user has the right to view the video.

Again, I use the HLS video from the audio video separation in the previous article. After setting it up from the previous article, you can change the JS code as follows:

import Hls from 'hls.js';

const video = document.querySelector('video')
const url = 'http://127.0.0.1:8001/master.m3u8'
const hls = new Hls({
  xhrSetup(xhr, url) {
    xhr.open('GET', url + '? Sign = Authorized signature '.true)}}); hls.loadSource(url) hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,() = > {
    video.play();
});
Copy the code

This is just adding the xhrSetup parameter to hls.js to append the signature to the URL so that each request carries the signature. The signature can also be added to the m3U8 file returned by the server.

HLS. Js has two loaders: xhr-loader and fetch-loader. However, all requests are sent through xhr-Loader. To customize the request, you can add loader parameters and implement your own Loader.

Random file name

We found that the video titles were very regular, and it was easy to know another file name. Random characters can be added to generate segment names.

-hls_segment_filename "%v_$(uuidgen).ts"
Copy the code

Uuid is assigned to each file name. -strftime 1 -strftime_mkdir 1, then the name can use %Y%m%d%H% m% S to represent the directory or filename. Note that the single_file flag cannot be used.

ffmpeg -i sample.mpeg \
   -f hls -hls_time 3 -hls_list_size 5 \
   -hls_flags second_level_segment_index+second_level_segment_size+second_level_segment_duration \
   -strftime 1 -strftime_mkdir 1 -hls_segment_filename "segment_%Y%m%d%H%M%S_%%04d_%%08s_%%013t.ts" stream.m3u8
Copy the code

Video encryption

General video protection above the method is enough, youku VIP video is the use of the above method. But if you open the developer tools and select a TS request, right click to open a new window to download the video directly, and you can play the video directly using the local player.

AES128 is the most commonly used encryption for HLS, and this encryption is also supported by HLS.js. It is symmetric encryption (encryption and decryption using the same key).

To encrypt, you first generate a key.

openssl rand 16 > file.key
Generate a key file with openSSL
Copy the code

To encrypt HLS videos with FFMPEG, you also need a keyinfo file in the following format:

http://www.www.com/path/file.key to get the key file # HLS client address file. The key # ffmpeg access key file address c3cb56562d0a10827489996dead35eb # 7 optional 16 Initializes the vector in base, using segment sequence number encryption if not specifiedCopy the code
echo file.key > file.keyinfo
echo file.key >> file.keyinfo
echo $(openssl rand -hex 16) >> file.keyinfo
Copy the code

Once you have created the keyInfo file using the command above, you can use FFMPEG to generate an encrypted HLS video.

ffmpeg -threads 0 -vsync 1 -i ./video.mp4 \
    -lavfi '[0] scale=1280:720[hd],[0] scale=1920:1080[fhd]' \
    -c:v libx264 -c:a aac -b:v:0 2800k -b:a:0 128k -b:v:1 5000k -b:a:1 192k \
    -map '[hd]' -map 0:a -map '[fhd]' -map 0:a \
    -var_stream_map 'v:0,agroup:hd,name:video_hd a:0,agroup:hd,name:audio_hd v:1,agroup:fhd,name:video_fhd a:1,agroup:fhd,name:audio_fhd' \
    -f hls -master_pl_name master.m3u8 \
    -ar 44100 -ac 2 -g 120 -keyint_min 120 -sc_threshold 0 -muxpreload 0 -muxdelay 0 \
    -hls_key_info_file ./file.keyinfo -hls_time 10 -hls_playlist_type vod -hls_list_size 0 \
    -hls_segment_filename "%v%03d.ts" %v.m3u8
Copy the code

The keyinfo file is specified with the -hls_key_info_file parameter.

If we click on a video file to play, it will tell us that it cannot play.

ffmpeg -hide_banner -i ./video_hd000.ts
./video_hd000.ts: Invalid data found when processing input
Copy the code
--- video_fhd.m3u8 #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:10 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-PLAYLIST-TYPE:VOD # EXT - X - KEY: METHOD = AES - 128, URI = "file. The KEY," IV = 0 # x7c3cb56562d0a10827489996dead35eb EXTINF: 10.000000, Ts #EXTINF:10.000000, video_fHD002. ts #EXTINF:10.000000, video_fHD002. ts # ext-x-endlistCopy the code

Refresh the browser to see the request for the key file.

conclusion

This article shows you how to use HLS for encryption, which is similar for DASH.

  • Website: nplayer.js.org
  • Source: github.com/woopen/npla…
  • Codesandbox.io /s/ancient-s…

Related articles

  • NPlayer supports any video player for streaming media and station B danmu experience
  • Develop danmu video player 1 from scratch
  • Streaming Video Basics MSE Primer & FFmpeg making video preview thumbnails and FMP4
  • The original video sites such as Iyouteng are using this to play streaming media

reference

  • ffmpeg Documentation