web前端学习（六）：WebRTC实时通信，掌握WebSocket很实用_使用websocket进行实时通信,利用webrtc技术实时传输视频 面试

一、WebRTC前言：

1.什么是WebRTC

Web-RTC（Web Real-Time Communication）就是网页实时通信技术，怎么理解这句话呢？在网页中能够打语音电话，直播视频不就是一个实时性的操作么？当然，很多人就索性把直播和语音电话当作WEB-RTC了，但是其实我们通过Web Socket 进行的一些短消息啊之类的操作其实也属于webrtc的内容，所以直播和语音电话只能算作是这个领域的对应应用，所以格局打开，不要那么狭隘！

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

2.如何实现视频直播

先脱离代码的思路，我们先从设计者的角度去思考这一整个流程是怎么回事，作为一个第一次开发视频直播的小白，就算不会敲代码，但也要有对应的实现步骤吧？我想大概步骤应该是像这张图一样：

3.ffmpeg和WebRTC开源库的区别？

ffmpeg对视频的编解码，以及视频的后期处理，webrtc是对网络的 评估，降噪等处理

4.webRTc能做什么？

1. 音视频实时互动
2. 游戏，即时通讯，文件传输等
3. 它是一个百宝箱，传输，音视频处理（回音消除，降噪）

5.WebRTC概述

出现的目的：在浏览器之间实现实时通信 。

音视频处理+即时通讯的开源库，由Google在2010年将其开源，webRTC是一个非常优秀的多媒体框架，具有跨平台优势！

二、FFmpeg平台框架

choco官网https://docs.chocolatey.org/en-us/choco/setup#more-install-options

choco软件包管理器

choco install ffmpeg
1
2
3

1.安装模块

1.使用choco对ffmpeg快速安装，并复制以下命令。（choco官网）
2.在本地cmd使用管理员模式打开 ，并执行上述命令。

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
1
2
3
4

2.转换命令

ffmpeg -i music.mp3 music.ogg         转换音频格式

ffmpeg -i test.mp4 -c:v libx264 -hls_time
	60 -hls_list _size 0 -c:a aac -strict -2 -f hls test.m3u8
    								  将MP4文件进行切割hls处理转换成m3u8, ts文件

ffmpeg -i video.webm -vcodec copy video.mp4   // 快速转换
1
2
3
4
5
6
7

3.布署项目

因为需要使用到本地的媒体设备，所以布署上线后，会因安全策略导致无法获取。

只有以下三种情况有效

localhost

https://

file://

1
2
3
4
5
6

4.vue-soket.io模块

MetinSeylan/Vue-Socket.io： Vuejs 和 Vuex 的 Socket.io 实现

安装模块

yarn add vue-socket.io 
1

Vue2的写法

main.js的写法

-- main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
    debug: false,
    connection: 'http://metinseylan.com:1992',
}))

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Vue3的写法

注意：每添加一新模块，都会刷新原有的配置

（vue3版本）修改的部分

vue-socket.io下的dist/vue-socketio.js

将下面的内容替换

t.prototype.$socket=this.io,t.prototype.$vueSocketIo=this
1

下面的是新内容

t.config.globalProperties.$socket=this.io,t.config.globalProperties.$vueSocketIo = this
1

prototype  =>   config.globalProperties
1

main.js的配置文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import VueSocketIO from 'vue-socket.io'

const SocketIo = new VueSocketIO({
    debug: false,                                // 是否显示连接信息
    connection: 'http://121.40.248.136:3000/',   // 连接后端socket的地址(不需要跨域)
})

createApp(App)
    .use(SocketIo)
    .use(store)
    .use(router).mount('#app')


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

组件中使用

<template>
  <div class="hello">
      这是测试
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  sockets: {
    
    // 不要在全局定义的sockets中使用箭头函数，因为this会进入指向全局对象中
  
    // 封装的sockets 监听函数，只能接收一个数组形参
    // this.$socket.emit可以发送两个参数
  
  
    connect: function () {
      // 连接socketio
      console.log('socket 已经连接')
    },
    disconnect:function(){
      // 检测socket断开连接
      console.log('socket 已经断开连接')
    },
    reconnect:function(){
      // 重新连接socket事件
      console.log('socket 重新连接')
    },

    // 监听事件
    joined:function(){
      console.log("已经加入房间")
    }
  },
  data(){
    return {

    }
  },
  mounted(){
    // 编译完成后，立即请求加入socket
    this.join();
  },
  methods: {
    join: function () {
      //  $socket是vue-socket.io的全局属性，已经被添加到vue实例中。
      this.$socket.emit('join','123456');
      console.log(`正在请求加入${'123456'}房间。。。`)
    }
  },
}
</script>

<style scoped lang="scss">

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

5.nodejs后端实时获取

1.node-schedule定时任务

node-schedule原理：利用setTimeOut和event事件进行管理，对所有加入的事件进行排序，并且计算当前时间和最近一个事件发生时间的时间间隔，然后调用setTimeOut设置回调。总的来说分两种事件，一种是一次性的，一种是周期性的，一次性任务调用完就结束，周期性的会不断地循环调用，当一个周期性事件被调用后，会根据周期生成下一个周期任务，并添加到任务列表中，重新排序。每个任务调用结束，都会计算并准备下一个任务。

（1.安装模块

yarn add node-schedule
1

(2.使用方法

import schedule from 'node-schedule';
 
let rule = new schedule.RecurrenceRule()
/**每天的凌晨12点更新代码*/
rule.hour = 0
rule.minute = 0
rule.second = 0
/**启动任务*/
schedule.scheduleJob(rule, () => {
   console.log('代码更新了！');
    // 操作mysql数据
    //client.query("select * from  books ",function(err,results){
    //    console.log(results)
    //})
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.mysql-events监听mysql二进制文件

二进制日志包含描述数据库更改（例如表创建操作或表数据更改）的“事件”。它还包含针对可能进行了更改的语句的事件（例如，[DELETE](https://dev.mysql.com/doc/refman/8.0/en/delete.html)不匹配任何行），除非使用基于行的日志记录。二进制日志还包含有关每个语句花费该更新数据多长时间的信息。

通过Nodejs和二进制日志实时监视MySQL数据更改 - 简书

（1.安装模块

yarn add @rodrigogs/mysql-events

yarn add ora@5.4.1
1
2
3

（2.设置mysql日志

在开始之前，我们需要通过my.ini在Windows和my.cnfubuntu中更改文件来启用MySQL中的二进制日志。

位置：C:\ProgramData\MySQL\MySQL Server 5.7\my.ini

（2.1.配置my.ini文件

我们需要 在**[mysqld]**部分下添加以下行，同级目录下创建www文件夹，然后重新启动mysql。

# 二进制日志
log-bin=C:/ProgramData/MySQL/MySQL Server 5.7/www/bin.log
log-bin-index=C:/ProgramData/MySQL/MySQL Server 5.7/www/bin-log.index
max_binlog_size=100M
binlog_format=row
socket=mysql.sock
1
2
3
4
5
6

设置定时自动清除日志

(Windows下为 my.ini， Linux下为 my.cnf )

在my.cnf中，添加或修改expire_logs_days的值 ，(这里设置的自动删除时间为1天, 默认为0不自动删除)

方法一：
mysql> show variables like '%log%';

mysql> set global expire_logs_days = 10;

方法二：

# 自动清除日志，1天清除一次
expire_logs_days=1
 
1
2
3
4
5
6
7
8
9
10

（2.2.管理员重新启动mysql服务

net stop mysql    （或者MySQL57）

net start mysql  （或者MySQL57）
1
2
3

（3.使用方法

监听mylibrary数据库下的所有表的变化

// mysql-events 监听mysql事件
// 模块监听mysql的二进制日志文件，以达到监听数据的变化

const mysql = require('mysql');
const MySQLEvents = require('@rodrigogs/mysql-events');
const ora = require('ora'); // cool spinner
const spinner = ora({
    text: '
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/107339