使用Node&Vue创建一个youtube风格的推荐引擎

吸引用户的最好方法之一就是向他们展示个性化的内容。一个很好的例子是YouTube基于之前观看的视频提出的视频建议。另一个受欢迎的建议是，亚马逊建议基于之前浏览过的产品来浏览类似的商品。另一个例子是Instagram的方法，当你搜索或探索时，你可以选择显示哪些图片和视频。

你会学到什么

在本文中，我们将带领您完成构建一个简单应用程序的步骤，该应用程序根据用户最近上传的视频向用户推荐个性化的视频:用户上传视频，然后获得相关视频的提要。为此，我们将利用Cloudinary的视频播放器和他们的自动视频标签插件，由谷歌提供支持。

你完成的应用程序会是这样的:

依赖关系

要构建这个应用程序，我们将在后端使用节点服务器，前端使用Vue。要自己执行本教程，请验证:

节点安装在您的计算机上
节点包管理器(npm)安装已在您的机器上。

要验证您的安装，请在您的终端中运行以下命令:

 node --version
 npm --version

如果您得到的结果是版本号，那么您可以按照本教程进行操作。否则，继续安装它们，或者阅读下面的文章，看看我们是如何做到的。

步骤1：使用cloudinary设置

Cloudinary是一个一站式的图像和视频管理商店，包括操作、优化和交付。使用Cloudinary，您可以为自己节省额外的时间，您本来可以花在开发与操纵和在应用程序中传输视频相关的各种功能上。

创建一个Cloudinary帐户:按照这个链接注册。

成功注册到Cloudinary之后，您将被重定向到仪表板，在那里您可以看到您的CLOUD_NAME、API_KEY和API_SECRET。在本教程的后面，您将需要这些值。

启用“自动视频标记”加载项

现在，您可以将自动视频标签添加到您的帐户中。继续注册免费层。这允许您使用附加组件，正如我们将在几个步骤中做的那样。

编辑受限制的图像类型

要允许cloudinary客户端在帐户上查询媒体以获取不同的标记，需要确保在cloudinary帐户的security选项卡下的restricted image types中未选中resource list选项。如果选中左键，则无法在媒体库中查询视频标记。

步骤2:构建后端服务器

为了处理对Cloudinary的API调用，我们将使用express服务器。

安装所需节点模块

我们需要以下节点模块:

CORS-将在我们的应用程序上启用跨源资源共享
express-将成为我们的web服务器
body parser-将用于分析json请求的内容
连接-多方-将启用我们的应用程序上的多部分请求
cloudinary core-处理cloudinary函数的javascript核心包

mkdir video-suggestion && cd video-suggestion

然后安装节点模块

npm install cors express body-parser connect-multiparty cloudinary-core

创建server.js文件

现在，我们需要创建一个文件，它将包含我们的服务器在您的视频建议目录中工作所需的指令:

touch server.js

这将是您在服务器运行时引用的启动文件。在server.js文件中，需要导入上面安装的节点模块:

导入节点模块

const cors = require('cors')
const express = require('express')
const cloudinary = require('cloudinary-core')
const bodyParser = require('body-parser')
const multipart = require('connect-multiparty')
[...]

创建express应用程序

现在让我们通过在server.js中添加以下内容来创建express应用程序:

[...]
const app = express()
[...]

加载中间件

我们在服务器.js中加载中间件，添加如下代码:

[...]
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
const multipartMiddleware = multipart();
[...]

使用上面的命令，我们将应用程序设置为使用cors。我们还指示应用程序以JSON格式解析请求。

配置Cloudinary客户端

现在，您需要使用CLOUD_NAME、API_KEY和API_SECRET配置我们的Cloudinary客户机。当您登录到Cloudinary帐户时，可以在仪表板上找到这些值。

[...]
cloudinary.config({
     cloud_name: 'CLOUDINARY_CLOUD_NAME',
     api_key: 'CLOUDINARY_API_KEY',
     api_secret: 'CLOUDINARY_API_SECRET'
   });
   [...]

创建应用程序路径

我们的app有两条基本路线:

/upload -上传用户的视频
/suggest -获取用户感兴趣的视频类别

对于应用程序的上传部分，我们使用Cloudinary客户机和视频，当调用应用程序的上传路径时，这些视频将作为post请求的一部分发送给我们。然后将视频发送到Cloudinary媒体库。

在上传命令中，我们还将google_video_tagging作为类别。这将触发auto_tagging特性，并将检测到的标记与我们的视频一起存储在媒体库中。

[...]
app.post('/upload', multipartMiddleware, function(req, res){
            //  Upload video to cloudinary
            cloudinary.uploader.upload(req.files.video.path,
            function(result) { 
                 return res.json({
                    'status' : true
                 })
             },
        { resource_type: "video", categorization: "google_video_tagging", auto_tagging: 0.4 });
        [...]

auto_tagging: 0.4表示对检测到的标记使用的置信度。

为了获取用户上传的视频的检测标记，我们使用cloudinary客户端获取资源类型为“video”的标记。

[...]

app.get('/suggest', multipartMiddleware,
function(req, res) {
    cloudinary.v2.api.tags({
        resource_type: 'video'
    },
    function(error, result) {
        return res.json(result);
    });
});

[...]

配置应用程序端口

现在我们通过设置应用程序监听的端口来结束后端服务器:

[...]

let port = process.env.PORT || 3000;

app.listen(port,
function() {
    console.log('App listening on port ' + port + '!');
});

第三步:构建前端

现在我们已经有了应用程序的后端，我们需要构建应用程序面向用户的一面。为此，我们将使用Vue。Vue是一个渐进的JavaScript框架，使用起来又快又简单。

安装Vue

如果你已经安装了Vue，你可以通过运行:

vue --version

如果没有，你可以安装Vue CLI运行:

npm install --global vue-cli

要创建前端服务器，请在前面步骤中创建的视频建议目录中运行以下命令:

vue init webpack frontend

安装节点模块

我们将使用axios从我们的Vue组件之一发出get请求，因此如果没有它，也需要安装它。运行以下前端目录:

cd frontend
npm install axios

创建上载组件

现在，我们要创建负责上传视频的Upload组件。

cd frontend/src/components
touch Upload.vue

在upload.vue中，我们需要导入Axios模块：

<script>
import axios from 'axios'
[...]

然后我们描述组件本身:

 [...]
    export default {
      name: 'Upload',
      data () {
        return {
          video: null,
          loading: ''
        }
      },
      methods: {
        upload : function(files){
          this.loading = 'Video detected';
          this.video = files[0];
        },
        onSubmit: function(){
          //  compile the form data
          const formData = new FormData();
          formData.append('video', this.video);
          this.loading = "Uploading...Please wait.";
          axios.post('http://localhost:3128/upload', formData)
          .then( res => {
            this.loading = 'Upload Complete!';
          })
        }
      }
    }
    </script>

上面的组件有两个方法upload和onSubmit。upload方法将上传的视频分配给它。视频和onSubmit方法将视频添加到formData中，然后将post请求发送到后端服务器的/上传路径。

组件将有一个模板，看起来像这样:

<template>
      <div class="container" style="margin-top:30px;" >
        <div class="row">
          <form class="form-inline" enctype="multipart/form-data" @submit.prevent="onSubmit">
            <div class="form-group">
              <label for="">Video&nbsp;&nbsp;&nbsp; </label>
              <input type="file" class="form-control" accept="video/*" 
              name="video" v-on:change="upload($event.target.files)">
            </div>
            <div class="form-group" style="margin-left: 20px;">
              <button class="btn btn-primary">Upload</button>
              {{ loading }}
            </div>
          </form>
        </div>
      </div>
    </template>

创建播放列表组件

现在已经上传了视频，我们想为用户提供一个类似视频的播放列表。为此，我们将使用Cloudinary视频播放器:

[...]
< link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css"rel="stylesheet"> 
<script src = "https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js"
type = "text/javascript" >
</script>
<script src="https:/ / unpkg.com / cloudinary - video - player / 
dist / cld - video - player.min.js " type="text / javascript "></script>
    [...]"

这将导入我们稍后需要的视频播放器样式和javascript。

现在我们创建播放列表组件:

 cd frontend/src/components
 touch Playlist.vue

在playlist.vue中，我们导入Axios模块：

<script>
import axios from 'axios'
[...]

现在我们来描述这个组件:

  [...]
    export default {
      name: 'Playlist',
      data () {
        return {
            interests : '',
            loading: ''
        }
        },
        mounted : function(){
            // Get all the tags for videos uploaded by this user
            axios.get('http://localhost:3128/suggest')
            .then( result => {
                // what you get ideally from here is the json of the info
                this.interests = result.data.tags;
                let cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
                let demoplayer = cld.videoPlayer('video-player');
                demoplayer.playlistByTag( result.data.tags[0] ,
                { autoAdvance: 0, repeat: true, presentUpcoming: 15 })
            })
        }
    }
    </script>
    [...]

当上面的组件被挂载时，我们向服务器的/suggest路由发出get请求，服务器返回标记列表，然后我们使用Cloudinary VideoPlayer的playlistByTag函数播放resource的第一个标记的视频。

组件的模板如下:

[...]
    <template>
        <div class="container suggestions">
            <h1 class="header">Suggested Video Playist</h1>
            <p><em>results are based on video uploads...</em></p>
            
            <div class="video-area">
                <!-- This will contain the video player -->
                <h2>Your interests : </h2>
                <template v-for="interest in interests">
                    {{ interest }} &nbsp;
                </template>
                
                <video
                id="video-player"
                controls
                class="cld-video-player cld-video-player-skin-dark"
                >
                </video>
            </div>
        </div>
    </template>
    [...]

和一些范围内的css样式:

 /*Here: https://github.com/christiannwamba/video-suggestion/blob/master/
 frontend/src/components/Playlist.vue#L56-L87
*/

导入我们的App.vue中的组件

现在我们已经准备好了组件，我们将它们导入到App.vue中，以便在编译视图时捕获它们:

<script>
    import Upload from './components/Upload'
    import Playlist from './components/Playlist'
    export default {
      name: 'app',
      components: {
        Upload,
        Playlist
      }
  <p>本文来源gao!daima.com搞$代!码#网#</p>  }
    </script>

应用程序vue的模板如下:

<template>
      <div id="app">
        <img src="./assets/video.png-600" width="100">
        <Upload/>
        <Playlist/>
      </div>
    </template>
    [...]

我们看到这里使用了上载和播放列表模板。

一旦完成这一步，我们的前端服务器就准备好了，我们可以使用以下命令运行它:

npm run dev

结论

我们已经了解了如何使用Cloudinary和一些Vue.js构建视频建议应用程序。您可以在GitHub上查看完整的源代码。

当然，还有许多其他场景可以使用捕获用户上传内容的数据，以便在应用程序中为用户提供更个性化的体验。

以上就是使用Node&Vue创建一个youtube风格的推荐引擎的详细内容，更多请关注gaodaima搞代码网其它相关文章！

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用Node&Vue创建一个youtube风格的推荐引擎

Hi，您需要填写昵称和邮箱！