Add video streaming service with reduced loading
consumption and token authentication
This commit is contained in:
		
							
								
								
									
										83
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										83
									
								
								README.md
									
									
									
									
									
								
							@@ -2,6 +2,43 @@
 | 
			
		||||
 | 
			
		||||
- [x] 提供webp生成服务
 | 
			
		||||
- [x] 提供流媒体服务
 | 
			
		||||
  - [x] 点击播放之前不加载视频(减少流量消耗)
 | 
			
		||||
  - [x] 使用封面图片替代加载视屏第一帧
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
通过流媒体服务降低视频文件加载消耗及防止恶意刷流量
 | 
			
		||||
对视频地址添加有效期, 过期需由服务器重新提供token认证观众身份
 | 
			
		||||
可后期增加基于用户账户或cookie信任度评估的视频播放权限认证
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// 请求视频播放地址
 | 
			
		||||
import Hls from 'hls.js'
 | 
			
		||||
import axios from 'axios'
 | 
			
		||||
axios.get('/video?url=' + encodeURIComponent(this.src)).then(res => {
 | 
			
		||||
    const img = res.data.VideoBase.CoverURL
 | 
			
		||||
    if (img) {
 | 
			
		||||
        video.poster = img
 | 
			
		||||
    }
 | 
			
		||||
    const m3u8 = res.data.PlayInfoList.PlayInfo.find(x => x.Format === 'm3u8')
 | 
			
		||||
    if (!m3u8) {
 | 
			
		||||
        video.src = this.src
 | 
			
		||||
        return console.log('流媒体地址不含m3u8')
 | 
			
		||||
    }
 | 
			
		||||
    this.player = new Hls({ maxMaxBufferLength: 5, autoStartLoad: false })
 | 
			
		||||
    this.player.loadSource(m3u8.PlayURL)
 | 
			
		||||
    this.player.attachMedia(video)
 | 
			
		||||
    this.player.on(Hls.Events.MANIFEST_PARSED, () => {
 | 
			
		||||
        if (this.autoplay) {
 | 
			
		||||
            video.play()
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
}).catch(err => {
 | 
			
		||||
    console.log('未取得流媒体地址')
 | 
			
		||||
    video.src = this.src
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// GET /webp/{type}-{id}-{version}-{width}-{height}-{fit}.{format}
 | 
			
		||||
@@ -145,37 +182,37 @@ GET /api/images
 | 
			
		||||
 | 
			
		||||
列表视图:(输出控制)
 | 
			
		||||
-------------------------------------------------------------------------------------
 | 
			
		||||
Method | URL                            | Info                              | Status
 | 
			
		||||
-------|--------------------------------|-----------------------------------|--------
 | 
			
		||||
GET    | /api/images                    | 标准顺序查询                        | ok
 | 
			
		||||
GET    | /api/images?page=1&pageSize=20 | 指定页码和指定分页大小                | ok
 | 
			
		||||
| Method | URL                            | Info                   | Status |
 | 
			
		||||
| ------ | ------------------------------ | ---------------------- | ------ |
 | 
			
		||||
| GET    | /api/images                    | 标准顺序查询           | ok     |
 | 
			
		||||
| GET    | /api/images?page=1&pageSize=20 | 指定页码和指定分页大小 | ok     |
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
筛选规则:(数据过滤)
 | 
			
		||||
-------------------------------------------------------------------------------------
 | 
			
		||||
Method | URL                            | Info                              | Statu
 | 
			
		||||
-------|--------------------------------|-----------------------------------|--------
 | 
			
		||||
GET    | /api/images?user=1234          | 筛选指定某用户发表的图片              |
 | 
			
		||||
GET    | /api/images?choice=1234        | 筛选指定精选集下的图片                |
 | 
			
		||||
GET    | /api/images?like=1234          | 筛选指定用户点赞的图片                |
 | 
			
		||||
GET    | /api/images?tag=1234           | 筛选含有指定标签的图片                |
 | 
			
		||||
GET    | /api/images?tag=1234,1235      | 筛选含有多个标签之一的图片(并集)       |
 | 
			
		||||
GET    | /api/images?tag=1234&tag=1235  | 筛选含有指定多个标签的图片(交集)       |
 | 
			
		||||
GET    | /api/images?user=1234&tag=123  | 筛选指定用户的指定标签图片(交集)       |
 | 
			
		||||
GET    | /api/images?date=20220214+     | 时间范围(之后)                      |
 | 
			
		||||
GET    | /api/images?date=20220214-     | 时间范围(之前)                      |
 | 
			
		||||
GET    | /api/images?date=2022~2023     | 时间范围(之间)                      |
 | 
			
		||||
| Method | URL                           | Info                             | Statu |
 | 
			
		||||
| ------ | ----------------------------- | -------------------------------- | ----- |
 | 
			
		||||
| GET    | /api/images?user=1234         | 筛选指定某用户发表的图片         |
 | 
			
		||||
| GET    | /api/images?choice=1234       | 筛选指定精选集下的图片           |
 | 
			
		||||
| GET    | /api/images?like=1234         | 筛选指定用户点赞的图片           |
 | 
			
		||||
| GET    | /api/images?tag=1234          | 筛选含有指定标签的图片           |
 | 
			
		||||
| GET    | /api/images?tag=1234,1235     | 筛选含有多个标签之一的图片(并集) |
 | 
			
		||||
| GET    | /api/images?tag=1234&tag=1235 | 筛选含有指定多个标签的图片(交集) |
 | 
			
		||||
| GET    | /api/images?user=1234&tag=123 | 筛选指定用户的指定标签图片(交集) |
 | 
			
		||||
| GET    | /api/images?date=20220214+    | 时间范围(之后)                   |
 | 
			
		||||
| GET    | /api/images?date=20220214-    | 时间范围(之前)                   |
 | 
			
		||||
| GET    | /api/images?date=2022~2023    | 时间范围(之间)                   |
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
排序规则:(权重强化)
 | 
			
		||||
-------------------------------------------------------------------------------------
 | 
			
		||||
Method | URL                            | Info                              | Status
 | 
			
		||||
-------|--------------------------------|-----------------------------------|--------
 | 
			
		||||
GET    | /api/images?similar=1234       | 根据指定图片的相似图片(指定图片ID)     | ok
 | 
			
		||||
GET    | /api/images?sort=date+         | 排序规则(相似图片查询时此项无效)       |
 | 
			
		||||
GET    | /api/images?sort=like          | 根据用户偏好推荐(指定用户的偏好)       |
 | 
			
		||||
GET    | /api/images?sort=history       | 根据浏览记录推荐(指定用户的记录)       |
 | 
			
		||||
GET    | /api/images?sort=choice        | 根据精选集推荐(指定精选集ID,取一组权重) |
 | 
			
		||||
| Method | URL                      | Info                                    | Status |
 | 
			
		||||
| ------ | ------------------------ | --------------------------------------- | ------ |
 | 
			
		||||
| GET    | /api/images?similar=1234 | 根据指定图片的相似图片(指定图片ID)      | ok     |
 | 
			
		||||
| GET    | /api/images?sort=date+   | 排序规则(相似图片查询时此项无效)        |
 | 
			
		||||
| GET    | /api/images?sort=like    | 根据用户偏好推荐(指定用户的偏好)        |
 | 
			
		||||
| GET    | /api/images?sort=history | 根据浏览记录推荐(指定用户的记录)        |
 | 
			
		||||
| GET    | /api/images?sort=choice  | 根据精选集推荐(指定精选集ID,取一组权重) |
 | 
			
		||||
 | 
			
		||||
* 注意, 筛选规则为多条件取交集, 单条件的复数取并集
 | 
			
		||||
* 权重强化属于排序规则而非过滤规则
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user