web前端学习（六）：WebRTC实时通信，掌握WebSocket很实用
一、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能做什么？
- 音视频实时互动
- 游戏，即时通讯，文件传输等
- 它是一个百宝箱，传输，音视频处理（回音消除，降噪）
5.WebRTC概述
出现的目的：在浏览器之间实现实时通信 。
音视频处理+即时通讯的开源库，由Google在2010年将其开源，webRTC是一个非常优秀的多媒体框架，具有跨平台优势！
二、FFmpeg平台框架
choco官网https://docs.chocolatey.org/en-us/choco/setup#more-install-options
choco软件包管理器choco install ffmpeg
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"
2.转换命令
ffmpeg -i music.mp3 music.ogg 转换音频格式ffmpeg -i test.mp4 -c:v libx264 -hls_time60 -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 // 快速转换
3.布署项目
因为需要使用到本地的媒体设备，所以布署上线后，会因安全策略导致无法获取。
只有以下三种情况有效
localhosthttps://file://4.vue-soket.io模块
MetinSeylan/Vue-Socket.io： Vuejs 和 Vuex 的 Socket.io 实现
安装模块
yarn add vue-socket.io
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')Vue3的写法
注意：每添加一新模块，都会刷新原有的配置
（vue3版本）修改的部分
vue-socket.io下的dist/vue-socketio.js
将下面的内容替换
t.prototype.$socket=this.io,t.prototype.$vueSocketIo=this
下面的是新内容
t.config.globalProperties.$socket=this.io,t.config.globalProperties.$vueSocketIo = this
prototype => config.globalProperties
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')组件中使用
<template><div class="hello">这是测试</div>
</template><script>export default {name: 'HelloWorld',props: {msg: String},sockets: {// 不要在全局定义的sockets中使用箭头函数，因为this会进入指向全局对象中// 封装的sockets 监听函数，只能接收一个数组形参// this.$socket.emit可以发送两个参数connect: function () {// 连接socketioconsole.log('socket 已经连接')},disconnect:function(){// 检测socket断开连接console.log('socket 已经断开连接')},reconnect:function(){// 重新连接socket事件console.log('socket 重新连接')},// 监听事件joined:function(){console.log("已经加入房间")}},data(){return {}},mounted(){// 编译完成后，立即请求加入socketthis.join();},methods: {join: function () {// $socket是vue-socket.io的全局属性，已经被添加到vue实例中。this.$socket.emit('join','123456');console.log(`正在请求加入${'123456'}房间。。。`)}},
}
</script><style scoped lang="scss"></style>5.nodejs后端实时获取
1.node-schedule定时任务
node-schedule原理：利用setTimeOut和event事件进行管理，对所有加入的事件进行排序，并且计算当前时间和最近一个事件发生时间的时间间隔，然后调用setTimeOut设置回调。总的来说分两种事件，一种是一次性的，一种是周期性的，一次性任务调用完就结束，周期性的会不断地循环调用，当一个周期性事件被调用后，会根据周期生成下一个周期任务，并添加到任务列表中，重新排序。每个任务调用结束，都会计算并准备下一个任务。
（1.安装模块
yarn add node-schedule
(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)//})
})
2.mysql-events监听mysql二进制文件
二进制日志包含描述数据库更改（例如表创建操作或表数据更改）的“事件”。它还包含针对可能进行了更改的语句的事件（例如，[DELETE](https://dev.mysql.com/doc/refman/8.0/en/delete.html)不匹配任何行），除非使用基于行的日志记录。二进制日志还包含有关每个语句花费该更新数据多长时间的信息。
通过Nodejs和二进制日志实时监视MySQL数据更改 - 简书
（1.安装模块
yarn add @rodrigogs/mysql-eventsyarn add ora@5.4.1
（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
设置定时自动清除日志
(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（2.2.管理员重新启动mysql服务
net stop mysql （或者MySQL57）net start mysql （或者MySQL57）
（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: '
web前端学习（六）：WebRTC实时通信，掌握WebSocket很实用相关推荐
- WEB前端学习六 js什么是闭包
- WEB前端学习——第六次作业（banner图片左右切换按钮）
WEB前端学习--第六次作业(banner图片左右切换按钮) 使用小米商城首页的banner作为举例 代码如下: <!DOCTYPE html> <html><head& ...
- 给你一份完整的Web前端学习路线图
随着Web2.0思想的日益普及,让企业都慢慢认识到前端的重要性.前端开发人员的地位也日益提高,相应的技术要求要是越来越高,那么现在想成为一名合格的Web前端工程师应该怎样学习呢 Web前端学习路线图, ...
- web 前端学习线路图
web 前端学习线路图 一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
- 零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...
- Web前端学习（千锋）
Web前端学习 一 . 选择器 标签选择器 群组选择器(分组选择器) 通配选择器 层次选择器 属性选择器 伪类选择器 结构性伪类选择器 二 . css继承 三 . css优先级 四 . css盒子模型 ...
- Web前端学习第五周
Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
- 前端学习六——html5+CSS3
前端学习六--html5+CSS3 HTML5 H5新增语义标签 多媒体标签 audio音频标签 audio音频标签常见属性 音频标签语法 视频标签video 视频标签语法 H5新增input表单.表 ...
- WEB前端学习日志Day4
WEB前端学习日志Day4 今日总结:通过一天的学习了解了样式表的权重,css的层叠性,css的选择符,划分网页上下布局,主要对css的选择符进行深入理解和代码实现. 样式表的权重 样式表的权重关系: ...
最新文章
- [sharepoint]根据用户名获取该用户的权限
- VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法
- QT MSVC 中文报错
- 热门编程语言，热门开源项目，MS-DOS，Python，Calcurse等
- python--- 之The program 'python' can be found in the following packages: * python-minimal * python3
- Atitit 计算机通信技术概要 目录 1. OSI参考模型将整个协议垂直地分为7个层次 ： 1 1.1. 通信类别 2 2. 传输方式 计算机通信可分为直接式和间接式两种。 2 2.1. 1）直
- 机床电气课程设计（自己总结）
- 工厂模式UML类图（Pizza为例）
- 在win11和win10的edge浏览器运行flash网址设置详解
- AWS SAA 认证考试心得
- AutoCAD安装及激活
- 鸿蒙曰蜉蝣不知所求,《庄子》释解（五七）：浮游不知所求，猖狂不知所往
- 阅读代码时，用excel做笔记。
- Linux rm -rf * 文件恢复记
- 如何用excel筛选相似内容_excel怎么筛选出相同内容
- 遍历二叉树的递归算法与非递归算法
- Phab2 Pro体验 Tango技术简介
- Portal服务器开源无线,OpenPortalServer开源Portal服务 Web认证服务器 支持华为 H3C 锐捷设备...
- Qt Creator中调用Python的常见问题
- 复杂类型c++ prime plus 读后笔记
热门文章