Django中使用polyv

Django中使用polyv

官网注册注册账号

1. 注册账号

2. 找到云点播

3. 点击上传视频

4. 点击设置中的API接口，查看API接口中的数据，后续会用到

5. 查看视频id，后续会用到(vid)

保利威如何对视频进行加密的(图解)

后端操作

在libs中创建一个polyv文件夹

# libs/polyv/mypolyv.py

import time
import requests
import hashlib


class PolyvPlayer(object):
    def __init__(self, userId, secretkey, tokenUrl):
        """初始化，提供用户id和秘钥"""
        self.userId = userId
        self.secretKey = secretkey
        self.tokenUrl = tokenUrl

    def tomd5(self, value):
        """取md5值"""
        return hashlib.md5(value.encode()).hexdigest()

    # 获取视频数据的token
    def get_video_token(self, videoId, viewerIp, viewerId=None, viewerName='', extraParams='HTML5'):
        """
        :param videoId: 视频id
        :param viewerId: 看视频用户id
        :param viewerIp: 看视频用户ip
        :param viewerName: 看视频用户昵称
        :param extraParams: 扩展参数
        :param sign: 加密的sign
        :return: 返回点播的视频的token
        """
        ts = int(time.time() * 1000)  # 时间戳
        plain = {
            "userId": self.userId,
            'videoId': videoId,
            'ts': ts,
            'viewerId': viewerId,
            'viewerIp': viewerIp,
            'viewerName': viewerName,
            'extraParams': extraParams
        }

        # 按照ASCKII升序 key + value + key + value... + value 拼接
        plain_sorted = {}
        key_temp = sorted(plain)
        for key in key_temp:
            plain_sorted[key] = plain[key]
        # print(plain_sorted)

        plain_string = ''
        for k, v in plain_sorted.items():
            plain_string += str(k) + str(v)
        # print(plain_string)

        # 首尾拼接上秘钥
        sign_data = self.secretKey + plain_string + self.secretKey

        # 取sign_data的md5的大写
        sign = self.tomd5(sign_data).upper()

        # 新的带有sign的字典
        plain.update({'sign': sign})
        # python 提供的发送http请求的模块
        result = requests.post(
            url=self.tokenUrl,
            headers={"Content-type": "application/x-www-form-urlencoded"},
            data=plain
        ).json()
        token = {} if isinstance(result, str) else result.get("data", {})

        return token

配置settings.py文件

# 保利威视频加密服务
POLYV_CONFIG = {
    "userId": "上面图2中的中的userId",  # 换成自己的userId
    "secretkey": "上面图2中的secretkey",  # 换成自己的secretkey
    "tokenUrl": "https://hls.videocc.net/service/v1/token",
}

配置一个路由

path(r"player/", views.PolyvAPIView.as_view()),

配置视图代码

from rest_framework.permissions import IsAuthenticated
from rest_framework.views import APIView

from api.libs.polyv.mypolyv import PolyvPlayer  # 引入上面写的libs
from django.conf import settings

# 保利威视频
class PolyvAPIView(APIView):
    permission_classes = [IsAuthenticated, ]

    def get(self, request):
        """ 获取视频播放的token """
        userId = settings.POLYV_CONFIG.get('userId')
        secretkey = settings.POLYV_CONFIG.get('secretkey')
        tokenUrl = settings.POLYV_CONFIG.get('tokenUrl')

        polyv = PolyvPlayer(userId, secretkey, tokenUrl)  # 实例化对象
        vid = request.query_params.get('vid')
        user_ip = request.META.get('REMOTE_ADDR')  # 用户IP
        user_id = request.user.id  # 用户id
        user_name = request.user.username  # 用户名

        result = polyv.get_video_token(vid, user_ip, user_id, user_name)
        
        return Response(result.get('token'))  # 只需返回一个token

前端Vue操作

在vue项目的入口文件index.html中加载保利威视频播放器的js核心类库

<script src='https://player.polyv.net/script/polyvplayer.min.js'></script>
或者
<script src="//player.polyv.net/script/player.js"></script>  //表示相对协议

在vue组件中创建Player.vue组件

<!-- Player.vue -->
<template>
    <div class="player">
      <div id="player"></div>
    </div>
</template>

<script>
export default {
  name:"Player",
  data () {
    return {}
  },
  methods: {},
  computed: {}
}
</script>

<style scoped>
</style>

在前端路由中注册

{
    path: '/player/:vid/',
    name: "Player",
    component: Player,
},

从相关组件中跳转到该路由

<router-link :to="'/player/' + 视频id + '/'">去播放保利威视频</router-link>

引入保利威的前端HTML5视频播放器代码

<template>
  <div className="player">
    <div id="player"></div>
  </div>
</template>

<script>
export default {
  name: "Player",
  data() {
    return {}
  },
  methods: {
    check_login() {
      // 检查当前访问者是否登录了！
      let token = localStorage.token || sessionStorage.token;
      if (!token) {
        this.$alert("对不起，您尚未登录，请登录以后再进行学习。").then(() => {
          this.$router.push("/login");
        });
        return false; // 阻止代码往下执行
      }
      return token;
    },
  },
  // created 初始化，放置的是ajax等操作/获取数据的代码，不涉及操作页面
  // mounted 初始化，放置的是关于操作页面的初始化js代码
  mounted() {
    let jwt_token = this.check_login();  // 检查是否登录
    let user_name = localStorage.user_name || sessionStorage.user_name;  // 获取用户名
      
    let vid = this.$route.params.vid; // this.$route.query.vid;
    let _this = this;
    var player = polyvPlayer({
      wrap: '#player',
      width: document.documentElement.clientWidth - 260, // 页面宽度
      height: document.documentElement.clientHeight, // 页面高度
      forceH5: true,  // 使用H5
      vid: vid,  // 视频vid
      code: user_name, // 一般是用户昵称
      // 视频加密播放的配置
      playsafe (vid, next) { // 向后端发送请求获取加密的token
        _this.$axios.get(`${_this.$settings.host}/order/video/`, {
          params: {
            vid: vid,
          },
          headers: {
            "Authorization": "jwt " + jwt_token,
          }
        }).then(function (response) {
          // 获取播放视频的token令牌
          next(response.data.token);
        })
      }
    });
  },
  computed: {}
}
</script>

<style scoped>
</style>