10 - 热播模块实现

最新推荐文章于 2024-05-14 10:15:19 发布
最新推荐文章于 2024-05-14 10:15:19 发布
阅读量490 收藏 1
点赞数
分类专栏： uni-app从入门到进阶 系统完成项目实战 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38245947/article/details/130194228
版权

热播模块实现

10-1：开篇

在本章节中我们将要完成【慕课热搜】中的最后一个模块【热播】。

【热播模块】分为两个页面：

  1. 热播列表
  2. 热播详情

对于【热播列表】而言，包含：

  1. 下拉刷新 + 上拉加载更多
  2. 视频播放（video 组件）

对于【热播详情】而言，包含：

  1. 视频播放（video 组件）
  2. 分页的弹幕列表
  3. 发表弹幕
  4. 点赞 + 收藏

所以说，对于【热播】模块而言，核心的点在于【视频播放】，也就是 video 组件的用法。

那么下面就让我们来开始【热播模块】的开发吧

10-2：热播列表 - 获取热播列表数据

定义接口：api/video

import request from '../utils/request';

/**
 * 热播视频列表
 */
export function getHotVideoList(data) {
  return request({
    url: '/video/list',
    data
  });
}

在 hot-video 中获取数据：

<script>
import { getHotVideoList } from 'api/video';
export default {
  data() {
    return {
      // 数据源
      videoList: [],
      size: 10,
      page: 1
    };
  },
  created() {
    this.loadHotVideoList();
  },
  methods: {
    /**
     * 获取列表数据
     */
    async loadHotVideoList() {
      const { data: res } = await getHotVideoList({ page: this.page, size: this.size });
      this.videoList = res.list;
      console.log(this.videoList);
    }
  }
};
</script>

10-3：热播列表 - 渲染UI结构

hot-video

<template>
  <view class="hot-video-container">
    <block v-for="(item, index) in videoList" :key="index">
      <hot-video-item :data="item" />
    </block>
  </view>
</template>


<style lang="scss" scoped>
.hot-video-container {
  background-color: $uni-bg-color-grey;
}
</style>

hot-video-item

<template>
  <view class="hot-video-item-container">
    <view class="video-box">
      <video id="myVideo" class="video" :src="data.play_url" enable-danmu danmu-btn controls />
    </view>
    <hot-video-info :data="data" />
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.hot-video-item-container {
  margin-bottom: $uni-spacing-col-lg;
  position: relative;
  .video {
    width: 100%;
    height: 230px;
  }
}
</style>

hot-video-info

<template>
  <view class="hot-video-info-container">
    <view class="video-title"> {{ data.title }} </view>
    <view class="video-info">
      <view class="author-box">
        <image class="avatar" :src="data.poster_small" />
        <text class="author-txt">{{ data.source_name }}</text>
      </view>
      <view class="barrage-box">
        <uni-icons class="barrage-icon" type="videocam" />
        <text class="barrage-num">{{ data.fmplaycnt }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'hot-video-info',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.hot-video-info-container {
  .video-title {
    position: absolute;
    top: $uni-spacing-col-big;
    left: $uni-spacing-row-lg;
    color: $uni-text-color-inverse;
    font-size: $uni-font-size-lg;
  }
  .video-info {
    display: flex;
    justify-content: space-between;
    background-color: $uni-bg-color;
    padding: $uni-spacing-col-sm $uni-spacing-row-lg;
    .author-box {
      display: flex;
      align-items: center;
      .author-txt {
        margin-left: $uni-spacing-row-sm;
        font-size: $uni-font-size-base;
        color: $uni-text-color;
        font-weight: bold;
      }
    }
    .barrage-box {
      display: flex;
      align-items: center;
      .barrage-num {
        margin-left: $uni-spacing-row-sm;
        font-size: $uni-font-size-sm;
        color: $uni-text-color;
      }
    }
  }
}
</style>

10-4：热播列表 - 列表的下拉刷新与上拉加载

hot-video： 在页面中使用 mescroll 比较简单

<template>
  <view class="hot-video-container">
    <!-- 1. 导入 mescroll-body -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <block v-for="(item, index) in videoList" :key="index">
        <hot-video-item :data="item" />
      </block>
    </mescroll-body>
  </view>
</template>

<script>
// 2. 导入 mixin
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getHotVideoList } from 'api/video';
export default {
  // 3. 注册 mixin
  mixins: [MescrollMixin],
  data() {
    return {
      // 数据源
      videoList: [],
      size: 10,
      page: 1,
      // 是否为 init
      isInit: true,
      // 实例
      mescroll: null
    };
  },
  created() {
    // this.loadHotVideoList();
    uni.showModal({
      title: '提示',
      content: '因浏览器对视频解析问题，具体呈现效果可能会存在差异！'
    });
  },
  mounted() {
    this.mescroll = this.$refs.mescrollRef.mescroll;
  },
  methods: {
    /**
     * 获取列表数据
     */
    async loadHotVideoList() {
      const { data: res } = await getHotVideoList({ page: this.page, size: this.size });
      // 判断是否为第一页数据
      if (this.page === 1) {
        this.videoList = res.list;
      } else {
        this.videoList = [...this.videoList, ...res.list];
      }
    },
    // 4. 实现回调方法
    /**
     * List 组件的首次加载
     */
    async mescrollInit() {
      await this.loadHotVideoList();
      this.isInit = false;
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 下拉刷新的回调
     */
    async downCallback() {
      if (this.isInit) return;
      this.page = 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 上拉加载的回调
     */
    async upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    }
  }
};
</script>

10-5：热播列表 - 点击进入详情页

创建新的分包页面 video-detail

为 hot-video-item 添加点击i事件：

<template>
  <view class="hot-video-item-container">
    ...
    <view @click="$emit('click')">
      <hot-video-info :data="data" />
    </view>
  </view>
</template>

在 hot-video 中处理点击事件：

<template>
  ...
  <hot-video-item :data="item" @click="onItemClick" />
  ...
</template>

<script>
export default {
  
  methods: {
    ...
    /**
     * item 点击事件
     */
    onItemClick() {
      uni.navigateTo({
        url: `/subpkg/pages/video-detail/video-detail`
      });
    }
  }
};
</script>

10-6：热播详情 - 渲染详情页面的视频组件

因为在 Uniapp 中无法直接通过 navigateTo 方法，传递一个复杂的对象。

在为了不影响 简洁数据流 的前提下，我们通过 vuex 来保存当前用户点击的 video 数据。

创建 store/video 模块：

export default {
  // 独立命名空间
  namespaced: true,
  // 通过 state 声明数据
  state: () => ({
    videoData: {}
  }),
  // 更改 state 数据的唯一方式是：提交 mutations
  mutations: {
    /**
     * 保存视频对象到 vuex
     */
    setVideoData(state, videoData) {
      state.videoData = videoData;
    }
  }
};

在 store/index 中注册 video 模块：

import video from './modules/video';

const store = new Vuex.Store({
  modules: {
    video
  }
});

监听 hot-video-item 中 info 的点击事件，对父组件传递事件：

<template>
  <view class="hot-video-item-container">
    ...
    <view @click="$emit('click', data)">
      <hot-video-info :data="data" />
    </view>
  </view>
</template>

在 hot-video 页面中进行跳转：

<template>
  ...
    <hot-video-item :data="item" @click="onItemClick" />
  ...
</template>

<script>
import { mapMutations } from 'vuex';
export default {
 
  methods: {
    ...mapMutations('video', ['setVideoData']),
    /**
     * item 点击事件
     */
    onItemClick(data) {
      // 保存当前点击的 video 数据到 vuex
      this.setVideoData(data);
      // 进行页面跳转
      uni.navigateTo({
        url: `/subpkg/pages/video-detail/video-detail`
      });
    }
  }
};
</script>

在 video-detail 中获取 video 数据，同时构建页面：

<template>
  <view class="video-detail-container">
    <view class="video-box">
      <video id="myVideo" class="video" :src="videoData.play_url" enable-danmu danmu-btn controls />

      <hot-video-info :data="videoData" />
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState('video', ['videoData'])
  }
};
</script>

<style lang="scss" scoped>
.video-detail-container {
  .video-box {
    background-color: $uni-bg-color;
    position: sticky;
    top: 0;
    z-index: 9;
    .video {
      width: 100%;
      height: 230px;
    }
  }
}
</style>

10-7：热播详情 - 展示视频弹幕

想要展示视频弹幕，那么首先我们需要获取到 视频弹幕数据:

定义 api 请求接口：

/**
 * 获取视频弹幕列表
 */
export function getVideoDanmuList(data) {
  return request({
    url: '/video/danmu',
    data
  });
}

在 video-detail 中调用该接口，并把获取到的数据通过 danmu-list 绑定到 video 组件中：

<template>
  <view class="video-detail-container">
    <view class="video-box">
      <video
        id="myVideo"
        class="video"
        :src="videoData.play_url"
        :danmu-list="danmuList"
        enable-danmu
        danmu-btn
        controls
      />

      <hot-video-info :data="videoData" />
    </view>
  </view>
</template>

<script>
import { getVideoDanmuList } from 'api/video';
export default {
  data() {
    return {
      // 弹幕数据源
      danmuList: []
    };
  },
  created() {
    this.loadVideoDanmuList();
  },
  methods: {
    /**
     * 获取弹幕数据
     */
    async loadVideoDanmuList() {
      const { data: res } = await getVideoDanmuList({
        videoId: this.videoData.id
      });
      this.danmuList = res.list;
    }
  }
};
</script>

注意：为了防止无法找到弹幕视频的情况，我们可以使用该数据来进行调试：

{
      id: '17397196882089353352',
      title: '治愈美少年？贺峻霖《蜂鸟》导演reaction！',
      poster_small:
        'https://tukuimg.bdstatic.com/processed/2cfa34e3dc199083960fdc0281edd472.jpeg@s_0,w_660,h_370,q_80',
      poster_big:
        'https://tukuimg.bdstatic.com/processed/2cfa34e3dc199083960fdc0281edd472.jpeg@s_0,w_660,h_370,q_80',
      poster_pc:
        'https://tukuimg.bdstatic.com/processed/2cfa34e3dc199083960fdc0281edd472.jpeg@s_0,w_660,h_370,q_80,f_webp',
      source_name: '电视这个圈儿',
      play_url:
        'http://vd4.bdstatic.com/mda-mfay1nt2se8cd53g/cae_h264/1623555453965255937/mda-mfay1nt2se8cd53g.mp4?v_from_s=hba_haokan_4469',
      duration: '06:37',
      url: 'https://haokan.hao123.com/v?vid=17397196882089353352&pd=&context=',
      show_tag: 0,
      publish_time: '2021年06月13日',
      is_pay_column: 0,
      like: '163',
      comment: '41',
      playcnt: '3020',
      fmplaycnt: '3020次播放',
      fmplaycnt_2: '3020',
      outstand_tag: ''
    }

只需要把该数据指定到 vuex 的 video 模块下的 videoData 中，然后指定 编译模式到 video-detail 即可

10-8：热播详情 - 渲染全部弹幕模块

弹幕的数据直接使用 getVideoDanmuList 的接口即可，如果想要实现分页功能，可以使用 /video/comment/list 接口获取分页的评论数据。

video-detail

<template>
  <view class="video-detail-container">
     ...
    <!-- 弹幕模块 -->
    <view class="danmu-box">
      <!-- 弹幕列表 -->
      <view class="comment-container">
        <view class="all-comment-title">全部弹幕</view>
        <view class="list">
          <block v-for="(item, index) in danmuList" :key="index">
            <article-comment-item :data="item" />
          </block>
        </view>
      </view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.video-detail-container {
  ...
  .danmu-box {
    border-top: $uni-spacing-col-sm solid $uni-bg-color-grey;
    margin-bottom: 36px;
    .comment-container {
      padding: $uni-spacing-col-lg $uni-spacing-row-lg;
      .all-comment-title {
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
    }
  }
}
</style>

10-9：热播详情 - 渲染底部功能区

此处的 底部功能区 与 文章详情的底部功能区一样，所以可以复用 article-operate 组件：

video-detail：

<template>
  <view class="video-detail-container">
    ...
    <!-- 底部功能区 -->
    <article-operate
      @commitClick="onCommit"
    />
    <!-- 输入弹幕的popup -->
    <uni-popup ref="popup" type="bottom" @change="onCommitPopupChange">
      <article-comment-commit v-if="isShowCommit" />
    </uni-popup>
  </view>
</template>

<script>
...
export default {
  ...
  methods: {
    ...
    /**
     * 发布弹幕点击事件
     */
    onCommit() {
      // 通过组件定义的ref调用uni-popup方法
      this.$refs.popup.open();
    },
    /**
     * 发布弹幕的 popup 切换事件
     */
    onCommitPopupChange(e) {
      // 修改对应的标记，当 popup 关闭时，为了动画平顺，进行延迟处理
      if (e.show) {
        this.isShowCommit = e.show;
      } else {
        setTimeout(() => {
          this.isShowCommit = e.show;
        }, 200);
      }
    }
  }
};
</script>

功能区的 placeholder 与文章详情 不同 ，可以通过 props 指定：

article-operate：

<template>
  <view class="operate-container">
    <!-- 输入框 -->
    <view class="comment-box" @click="onCommitClick">
      <my-search
        :placeholderText="placeholder"
        :config="{
          height: 28,
          backgroundColor: '#eeedf4',
          icon: '/static/images/input-icon.png',
          textColor: '#a6a5ab',
          border: 'none'
        }"
      ></my-search>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'article-operate',
  props: {
    ...
    placeholder: {
      type: String,
      default: '评论一句，前排打call...'
    }
  },
};
</script>

在 video-detail 中指定 placehloder：

  <!-- 底部功能区 -->
    <article-operate
      :placeholder="'发个弹幕，开心一下'"
    ...

10-10：热播详情 - 发布弹幕

video-detail：

<template>
  <view class="video-detail-container">
    ...
    <!-- 输入弹幕的popup -->
    <uni-popup ref="popup" type="bottom" @change="onCommitPopupChange">
      <article-comment-commit
        v-if="isShowCommit"
        :articleId="videoData.id"
        @success="onSendDanmu"
      />
    </uni-popup>
  </view>
</template>

<script>
...
export default {
  data() {
    return {
      ...
      // video 组件上下文
      videoContext: null
    };
  },
  ...
  onReady: function (res) {
    // 获取 video 组件上下文
    this.videoContext = uni.createVideoContext('myVideo');
  },
  methods: {
    ...
    /**
     * 弹幕发布成功之后的回调
     */
    onSendDanmu(data) {
      // 发送弹幕
      this.videoContext.sendDanmu({
        text: data.info.content,
        color: '#00ff00'
      });
      // 添加弹幕到数据源
      this.danmuList.unshift(data.info);
      // 关闭 pop
      this.$refs.popup.close();
      // 关闭标记
      this.isShowCommit = false;
      // 提示用户
      uni.showToast({
        title: '发表成功'
      });
    }
  }
};
</script>

10-11：热播详情 - 解决弹幕不显示的问题

原因：

弹幕之所以不显示，是因为我们修改了 danmuList 的数据源导致的，这个问题其实为 video 组件的 bug 。

解决方案：

深拷贝 danmuList 到一个新的数组，用于展示 弹幕列表

<template>
  ...
<block v-for="(item, index) in commentList" :key="index">
            <article-comment-item :data="item" />
          </block>
...
</template>

<script>
...
export default {
  data() {
    return {
      // 弹幕数据源
      danmuList: [],
      // 列表数据源
      commentList: [],
      ...
    };
  },
  ...
  methods: {
    /**
     * 获取弹幕数据
     */
    async loadVideoDanmuList() {
      const { data: res } = await getVideoDanmuList({
        videoId: this.videoData.id
      });
      this.danmuList = [...res.list];
      this.commentList = [...res.list];
    },
    ...
    /**
     * 弹幕发布成功之后的回调
     */
    onSendBarrage(data) {
      ...
      // 添加弹幕到数据源
      this.commentList.unshift(data.info);
      ...
    }
  }
};
</script>

10-12：热播详情 - 定义弹幕的随机颜色值

在 utils 下创建一个新的 js 文件，用来定义 随机颜色方法：

utils/index.js

/**
 * 返回随机色值
 */
export let getRandomColor = () => {
  const rgb = [];
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16);
    color = color.length == 1 ? '0' + color : color;
    rgb.push(color);
  }
  return '#' + rgb.join('');
};

在 video-detail 中使用该方法：


<script>
import { getRandomColor } from 'utils';
export default {
  ...
  methods: {
    /**
     * 获取弹幕数据
     */
    async loadVideoDanmuList() {
      const { data: res } = await getVideoDanmuList({
        videoId: this.videoData.id
      });
      // 定义随机颜色
      res.list.forEach((item) => {
        item.color = getRandomColor();
      });
      this.danmuList = [...res.list];
      this.commentList = [...res.list];
    },
    ...
    /**
     * 弹幕发布成功之后的回调
     */
    onSendBarrage(data) {
      // 发送弹幕
      this.videoContext.sendDanmu({
        text: data.info.content,
        color: getRandomColor()
      });
       ...
    }
  }
};
</script>

10-13：热播详情 - 处理弹幕列表数据加载动画

当弹幕为空的时候，我们需要给用户一个提示。

以此，弹幕的状态可分为三种：

  1. 数据加载中
  2. 无弹幕数据
  3. 有弹幕数据

那么我们分别对这三种情况进行处理：

<template>
  <view class="danmu-box">
      <!-- 加载动画 -->
      <uni-load-more status="loading" v-if="isLoadingComment"></uni-load-more>
      <!-- 无弹幕 -->
      <empty-data v-else-if="commentList.length === 0"></empty-data>
      <!-- 弹幕列表 -->
      <view class="comment-container" v-else>
        <view class="all-comment-title">全部弹幕</view>
        <view class="list">
          <block v-for="(item, index) in commentList" :key="index">
            <article-comment-item :data="item" />
          </block>
        </view>
      </view>
    </view>
</template>

<script>
...
export default {
  data() {
    return {
     ...
      // 弹幕列表数据加载中
      isLoadingComment: true
    };
  },
  methods: {
    /**
     * 获取弹幕数据
     */
    async loadVideoDanmuList() {
      ...
      this.isLoadingComment = false;
    },
  }
};
</script>

10-14：热播详情 - 点赞、收藏的实现思路

在前面我们让大家自己实现过 文章详情的 点赞和收藏 功能，并且在 video-detail 中我们复用了 收藏和点赞的组件，但是大家可以发现，此时 点赞与收藏 的功能无法在 video-detail 中进行使用。

出现这个问题的原因，是因为此时我们的 videoData 数据源，被保存到了 vuex 中。如果想要实现 点赞和收藏 的功能，那么需要在 监听到成功事件之后，修改 vuex 中的数据

video-detail：

<template>
  <article-operate
      :placeholder="'发个弹幕，开心一下'"
      :articleData="videoData"
      @commitClick="onCommit"
      @changePraise="onChangePraise"
      @changeCollect="onChangeCollect"
  ...
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations('video', ['setVideoData']),
  
    /**
     * 点赞处理回调
     */
    onChangePraise(isPraise) {
      this.setVideoData({ ...this.videoData, isPraise });
    },
    /**
     * 收藏处理回调
     */
    onChangeCollect(isCollect) {
      this.setVideoData({ ...this.videoData, isCollect });
    }
  }
};
</script>

10-15：总结

那么到这里我们整个的 热播 功能就全部完成了。

热播 功能的完成，也标记着我们整个 慕课热搜 业务功能全部搞定。

现在 慕课热搜 在微信小程序端运行的时候，我们可以发现无论是 功能 还是 业务 上，都是比较完善的。

但是，当我们把 慕课热搜 运行到浏览器端的时候，我们发现 应用会出现非常多的问题。

比如：

  1. hot 列表滚动，tabs 置顶效果消失
  2. 在火狐浏览器中，横线出现非常粗的滚动条
  3. 进行文章详情再返回，会出现 ui 错乱
  4. 文章详情无法展示
  5. 热播视频全部无法播放
  6. 登录功能无法使用

等等问题。

那么这些问题，我们怎么处理呢？

请看下一章：《多平台适配》

yanling.zhang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1350多个精品易语言模块
07-26
1350多个精品易语言模块提供下载介绍 1亦思验证码识别1.5免费版.ec 24位转单色位图模块.ec 32张发牌.ec 3D引擎支持库-eOgre.ec 69msn.ec ACCESS 到高级表格.ec Access操作.ec Access数据库压缩修复新建.ec ACCSEE...
uni-app 慕客热搜项目实战（一）tabBar的制作
qq_49900295的博客
06-06 836
在本文中我们要完成的就是慕客热搜项目底部导航栏 tabBar 的内容
关于做反向代理问题
weixin_40098371的博客
05-14 1002
在前端跨域时，出现跨域访问接口是经常的事，我在做angular访问时，现在试验过的跨域方法有两种：jsonp和nginx反向代理。其中的jsonp 比较简便一点：data.js但是在处理post请求时，这种方法显然不太合适。此时nginx跨域方案算的上是一种比较优质的方案。1.anginx.conf配置文件在http 下面的server中，添加代理项：前端代码中的请求也需要修改：HTML:&lt;...
MY1690-12P语音模块实现特定的语音提示功能
清晨的博客
10-15 9520
一、MY1690 MP3解码模块介绍 MY1690-12P是深圳市迈优科技有限公司自主研发的一款小巧的微集成MP3模块。采用MY1690-SOP16 MP3主控芯片，支持MP3、WAV格式双解码。模块最大支持32G TF卡；也可外接U盘或USB数据线连接电脑更换SD卡音频文件。该模块内置3W功放，可以直接驱动3W的喇叭，使用更方便。   二、串口控制协议 MY1690-12P内置标准UAR...
Arduino实现语音实时播报当前温湿度
m0_61543203的博客
08-16 6357
这几天气温极高，重庆竟然超过了44℃，我所在的杭州也达到了有气象记录以来的最高温41.8℃，于是心血来潮，做一个简单快速的语音播报当前实测到的温度，看看当前温度究竟是多少？
热成像功能模块流程
分享嵌入式,移动端,智能应用,数据库等专业板块,记录知识碎片！！！
11-01 2150
动态火点搜索 #include <stdio.h> #include <iostream> #include "Windows.h" #include "HCNetSDK.h" using namespace std; //时间解析宏定义 #define GET_YEAR(_time_) (((_time_)>>26) + 2000) #define GET_MONTH(_time_) (((_time_)>>22) & 15
乐鑫Esp32学习之旅 23 安信可 esp32-a1s 音频开发板移植最新 esp-adf 音频框架，小试牛刀如何实现在线文字转语音播放。
徐宏的博客 | 修身齐家治国平天下
02-04 1万+
本系列博客学习由非官方人员 半颗心脏 潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。 1、 爬坑学习新旅程，虚拟机搭建esp32开发环境，打印 “Hellow World”。 2、 巧用eclipes编辑器，官方教程在在Windows下搭建esp32开发环境，打印 “Hellow World”。 3、 认识基本esp32的GPIO接口，开...
android音视频点/直播模块开发
热门推荐
yabin的专栏
04-21 2万+
前言随着音视频领域的火热，在很多领域（教育，游戏，娱乐，体育，跑步，餐饮，音乐等）尝试做音视频直播/点播功能，那么作为开发一个小白，如何快速学习音视频基础知识，了解音视频编解码的传输协议，编解码方式，以及如何技术选型，如何解决遇到的坑，本文抛砖引玉，欢迎大咖交流。一. 音视频的基础知识1.1 基本概念视频是什么静止的画面叫图像（picture）。连续的图像变化每秒超过24帧（frame）画面以上时，
python+pygame+opencv+gpt实现虚拟数字人直播（一）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
09-29 1万+
马斯克称：“人工智能将在我们所看到的人类进化和文明的未来发挥非常深远的作用。未来我们会拥有大量的机器人，到时候，全球的生产效率将会提高到令人难以置信的水平。”，机器人可以完成行走、上下楼、下蹲、拿取物品等动作，也已具备了保护自身和周围人安全的能力，未来还可以做饭、修剪草坪、帮助照看老人，或在工厂里面替代人类从事枯燥和有危险的工作。不久前的世界互联网大会数字文明尼山对话上，阿里巴巴集团董事会主席兼首席执行官、阿里云智能集团董事长兼首席执行官张勇也表示，AI的发展将会带来更多的就业机会。
2023通信工程专业毕设-智能汗蒸房控制器设计与实现
Eric的博客
07-03 1965
RT-Thread；IoT；目 录摘 要 I第1章 绪 论 11.1 研究背景及意义 11.2 国内外研究现状 11.3 设计内容与要求 21.4 经济性分析和社会影响 31.5 章节安排 3第2章 总体设计 52.1 总设计框图 52.2 元器件选择 62.2.1 主控芯片选用方案 62.2.2 温湿度传感器选用 72.2.3 空气质量传感器选用 72.2.4 换气风机选用 82.2.5 液晶显示屏选用 82.2.6 WiFi模块选用 92.3 本章小结 9。
1345个易语言模块
01-27
1345个易语言模块，易语言模块大集合，够你用的啦 1亦思验证码识别1.5免费版.ec 24位转单色位图模块.ec 32张发牌.ec 3D引擎支持库-eOgre.ec 69msn.ec ACCESS 到高级表格.ec Access操作.ec Access数据库压缩修复新建....
毕业设计源码-基于android影院app设计与实现
02-21
基于android影院app总共分两个模块，用户模块和管理员模块， 用户模块;登录和注册功能，用户可修改自己的密码，具有查询电影，购票选座的功能，（支付方面通过账号密码支付即可），有会员充值和会员折扣，用户可查看...
微信小程序版芒果TV-APP源码.rar
07-10
搜索电影/电视剧/综艺/热播榜等微信小程序源码，大部分功能是调用API实现的，很多功能是仿芒果TV的，并不是真正的芒果TV的APP，不过从中可了解许多网络与多媒体编程的 腾讯微信APP接口，对大家编写熟悉视频、影音类...
【RT-Thread作品秀】智能家居的语音控制方案-电路方案
04-19
将多个模块的任务分为多个级别，以语音识别为主体，摄像头和语音播报为从体，在语音识别到关键字的时候，会出发相对应的函数，实现不同的效果，而onenet是与语音识别互相独立的，会源源不断的把数据实时发送到云端。...
uniapp实现拖拽排序+滑动删除功能
最新发布
TZ1284063988的博客
05-14 265
此篇代码在原插件基础进行了bug修改与滑动功能的新增 原插件地址 HM-dragSorts.vue组件使用 HM-dragSorts.vue <template> <view class=""> <view class="HM-drag-sort" :style="{'height': ListHeight+'rpx','background-color': listBackgroundColor}"> <!-- 拖拽中显示的行 -->
uniapp h5 配置代理服务器
red_HTML的博客
05-14 148
【代码】uniapp h5 配置代理服务器。
uniapp的app端推送功能，不使用unipush
qq_61876792的博客
05-07 548
不使用uniapp官方提供的unipush的情况下实现uniapp的app端消息推送
uniapp——点赞、取消点赞
努力、拼搏、奋进
05-08 392
uniapp——点赞、取消点赞
ARS-01模块如何实现台灯灯光控制
05-26
ARS-01模块可以通过控制PWM信号来实现台灯灯光的控制。可以使用Arduino等开发板来控制模块的输出信号，从而实现对台灯灯光的调节。具体的实现方式可以参考以下步骤： 1. 将ARS-01模块连接到开发板上，通过开发板的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值