![shen-qing-googleyoutubeapi.jpeg](https://cdn.tyrantg.com/van/static/img/a7cba0b263e51a0084c79aaa7db5cd89.shen-qing-googleyoutubeapi.jpeg)



# 登录Google云平台
首先你需要登录Google的云平台（请自备Google邮箱账号）
> https://console.developers.google.com/apis/api/youtube.googleapis.com

# 开通Youtube API V3服务
登录成功后在图示中找到Youtube API v3开通


![1654743680032.png](https://cdn.tyrantg.com/van/static/img/392bf45a632456163b33cd2d621055aa.1654743680032.png)

![1654743685628.png](https://cdn.tyrantg.com/van/static/img/dd83ff8dbabcf50a2f913aa977ba7c95.1654743685628.png)

![1654743689359.png](https://cdn.tyrantg.com/van/static/img/c6b106e6253e86944f677be4ce5ed16a.1654743689359.png)

![1654743692803.png](https://cdn.tyrantg.com/van/static/img/6bd7d8203319255cb35aa26457ac3b42.1654743692803.png)

![1654743696163.png](https://cdn.tyrantg.com/van/static/img/3fc527e55dd7484194aa692dbf9cfd09.1654743696163.png)

按照如下顺序创建API秘钥用于发起请求时的权限验证

> 版权声明：本文为CSDN博主「爆疯」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zzz_zjz/article/details/105006921

申请 Google YouTube API

![ji-yu-webrtc-shi-xian-dian-dui-dian-zhuo-mian-fen-xiang.jpeg](https://cdn.tyrantg.com/van/static/img/95c61b733e3e5c5cc95a0b408214a72c.ji-yu-webrtc-shi-xian-dian-dui-dian-zhuo-mian-fen-xiang.jpeg)
### webrtc 通话流程

1. ClientA 和 ClientB 都链接上信令服务器（websocket）
2. ClientA 获取本地视频流，并通过（websocket）发送会话描述信息（offer sdp）
3. ClientB 收到信令（offer sdp）后回复（answer sdp）
4. ClientA 接收到回复信令后开始链接，协商通信密钥，完成视频传输。


:::tip{title="提示"}
值得注意的是，webrtc 是客户端与客户端直接链接，不需要服务端参与。信令服务器仅在建立链接阶段交换数据。
:::



### 基础环境

首先搭建一个基础环境方便开发，我使用的是尤大最新开发的vite。

```bash
yarn create @vitejs/app webrtc --template vue && cd webrtc && yarn && yarn dev
```

安装webrtc浏览器兼容适配器：

```bash
yarn add webrtc-adapter
```

一个小的demo就不引入不必要的扩展包了，自己动手实现一个简单的路由器。调整`App.vue` 文件：

```js
<script>
import { h, computed } from "vue"
import routes from "./routes"

export default {
  setup() {
    const currentRoute = computed(() => window.location.pathname)
    const currentComponent = computed(() => routes[currentRoute.value] || "")

    return () => h(currentComponent.value)
  }
}

</script>

```

新建 `src/routes.js` 文件：

```js
import Home from "./page/Server.vue";
import Client from "./page/Client.vue";

export default {
    '/': Home,
    '/client': Client
}
```



这样就可以分开编写客户端和服务端代码了。由于这只是个简单的 demo ，所以我这样使用，生成环境开发还是建议大家使用 `vue-router`。



### 正文

首先创建 `src/page/Server.vue`组件,引入 `webrtc`适配器：

```html
<template>
  <div class="server">
    <video id="localVideo" autoplay playsinline muted></video>
  </div>
</template>

<script>
import "webrtc-adapter"
export default {
  name: "Server"
}
</script>

<style scoped>
video {
  width: 80%;
  height: 80%;
  background: #000;
  position: absolute;
  left: 0;right: 0;
  top: 0;bottom: 0;
  margin: auto;
}
</style>
```



#### 1. 获取本地视频流

这一步既可以录制屏幕内容也可以读取用户摄像头。

```js
<template>
  <div class="server">
    <video id="localVideo" autoplay playsinline muted></video>
  </div>
</template>

<script>
import "webrtc-adapter"
import { onMounted } from "vue"

export default {
  name: "Home",
  setup() {
     const startLive = async () => {
       const localVideo = document.getElementById("localVideo")
       let stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
       localVideo.srcObject = stream
     }
     
     onMounted(() => startLive())

     return {  }
  }
}
</script>
```

> 这里需要注意的是一定要在dom节点加载完毕之后再执行，否则会获取不到video节点



#### 2. 信令服务器

想要与客户端建立链接，必须有信令服务器端介入，帮助客户端之间进行通讯。其实信令服务器原理很简单，不用做任何处理（业务逻辑除外），只需要把客户端发送的数据原样转发给目标客户端即可。我这里采用 GoLang 实现：

```go
package main

import (
	"github.com/gogf/gf/frame/g"
	"github.com/gogf/gf/net/ghttp"
	"github.com/gogf/gf/os/glog"
)

var (
	Server *ghttp.WebSocket
	Client *ghttp.WebSocket
)

func main()  {
	s := g.Server()

	s.BindHandler("/server", func(r *ghttp.Request) {
		ws, err := r.WebSocket()
		if err != nil {
			glog.Error(err)
			r.Exit()
		}

		Server = ws

		for {
			msgType, msg, err := ws.ReadMessage()
			if err != nil {
				return
			}
			if err = Client.WriteMessage(msgType, msg); err != nil {
				return
			}
		}
	})

	s.BindHandler("/client", func(r *ghttp.Request) {
		ws, err := r.WebSocket()
		if err != nil {
			glog.Error(err)
			r.Exit()
		}

		Client = ws

		for {
			msgType, msg, err := ws.ReadMessage()
			if err != nil {
				return
			}
			if err = Server.WriteMessage(msgType, msg); err != nil {
				return
			}
		}
	})

	s.SetPort(8199)
	s.Run()
}

```



#### 3. 建立链接

链接信令服务器并且创建 PeerConnection 实例 (参数为null，忽略 iceserver，仅局域网下通讯)；

```js
let ws = new WebSocket("ws://127.0.0.1:8199/server")
let peer = new RTCPeerConnection(null)

// 将媒体轨道添加到轨道集
stream.getTracks().forEach(track => {
  peer.addTrack(track, stream)
})
```



然后通过websocket发送会话描述信息（offer sdp）：

```js
const offer = await peer.createOffer()
await peer.setLocalDescription(offer)
ws.send(JSON.stringify(offer))
```



#### 4. 客户端接收

客户端同样链接信令服务器并创建PeerConnection实例。

```js
let ws = new WebSocket("ws://127.0.0.1:8199/client")
let peer = new RTCPeerConnection(null)
```

监听信令服务器消息：

```js
ws.onmessage = event => {
  const { type, sdp, iceCandidate } = JSON.parse(e.data)
  if (type === "offer") {
    answer(new RTCSessionDescription({ type, sdp }))
  } else if (type === "offer_ice") {
    peer.addIceCandidate(iceCandidate)
  }
}
```

收到服务器链接请求后，需要回复消息：

```js
const answer = async sdp => {
  await peer.setRemoteDescription(sdp)

  const answer = await peer.createAnswer()

  ws.send(JSON.stringify(answer))

  await peer.setLocalDescription(answer) 
}
```



#### 5. 服务端监听响应

客户端收到链接请求并回复，服务端同时也要监听客户端的回复：

```js
ws.onmessage = e => {
  const { type, sdp, iceCandidate } = JSON.parse(e.data)
  if (type === "answer") {
    peer.setRemoteDescription(new RTCSessionDescription({ type, sdp }))
  } else if (type === "answer_ice") {
    peer.addIceCandidate(iceCandidate)
  }
}
```



#### 6. 获取远程视频流

当调用 `setLocalDescription` 之后，RTC 链接就开始搜集候选人，而我们只需要监听事件，通过信令服务器传递候选人信息即可。

```js
// 服务端
peer.onicecandidate = e => {
  if (e.candidate) {
    console.log("搜集并发送候选人")
    ws.send(
      JSON.stringify({
        type: `offer_ice`,
        iceCandidate: e.candidate,
      })
    )
  } else {
    console.log("候选人收集完成！")
  }
}

// 客户端
peer.onicecandidate = e => {
  if (e.candidate) {
    console.log("搜集并发送候选人")
    ws.send(
      JSON.stringify({
        type: `answer_ice`,
        iceCandidate: e.candidate,
      })
    )
  } else {
    console.log("候选人收集完成！")
  }
}
```

  候选人搜集完成之后，服务端和客户端就正式勾搭上了，开始通信协商密钥，建立一条最优的链接方式。这个时候只需要监听 `ontrack` 事件获取视频流即可：

```js
peer.ontrack = e => {
  if (e && e.streams) {
    console.log("收到对方音频/视频流数据...")
    let localVideo = document.getElementById("localVideo")
    localVideo.srcObject = e.streams[0]
  }
}
```


### 结语

RTCPeerConnection 链接是双向的，这里我为了演示方便，仅做了单向视频传输，强行区分了服务端与客户端。客户端收到链接请求的同时也可以获取本地视频流传递到服务端，形成双向视频传输。同时为了方便演示信令服务器也是最简单的方式实现，客户端比需先链接才能进行通讯。


> 完整代码已上传 [https://github.com/zxdstyle/webrtc-demo](https://github.com/zxdstyle/webrtc-demo)
> 文章摘自 [https://learnku.com/articles/55045](https://learnku.com/articles/55045)
作者: [zxdstyle](https://github.com/zxdstyle)

基于webrtc实现点对点桌面分享

![laravel-zi-yong-yi-lai.jpg](https://cdn.tyrantg.com/van/static/img/6e23a9bbfac473fdef979446cdf2def1.laravel-zi-yong-yi-lai.jpg)



# barryvdh/laravel-ide-helper
```shell
composer require --dev barryvdh/laravel-ide-helper
php artisan ide-helper:generate
php artisan ide-helper:models
```

Laravel自用依赖

![when-i-use-a-new-win10.png](https://cdn.tyrantg.com/van/static/img/8c57239e60b604891189a1aafbc3f9d7.when-i-use-a-new-win10.png)



1. 下载[Vivaldi](https://vivaldi.club)
2. [搭好梯子](https://cylink.store)
3. 生产工具
   * [Vagrant](https://www.vagrantup.com/downloads)
   * [jetbrains系列](https://www.jetbrains.com)
   * [cmder](https://cmder.net)
   * [vscode](https://code.visualstudio.com)
   * [php](https://www.php.net/downloads)
   * [node.js](https://nodejs.org/zh-cn/)
   * [Termius](https://termius.com)
4. 日常使用
   * [qq](https://im.qq.com/pcqq/)
   * [微信](https://pc.weixin.qq.com)
   * [网易云音乐](https://music.163.com/#/download)
   * [idm](https://www.internetdownloadmanager.com/download.html)
5. 玩
   * [steam](https://store.steampowered.com/about/)
   * [UPlay](https://ubisoftconnect.com)
   * [wegame](https://www.wegame.com.cn/client)
   * [uu加速器](https://uu.163.com)
   * [wemod](https://www.wemod.com)
   * [mumu模拟器](http://mumu.163.com)

当我面对一个崭新的Win10...

![use-vagrant-to-manage-virtualbox.png](https://cdn.tyrantg.com/van/static/img/845c5d962d03972aa10e8efe69533129.use-vagrant-to-manage-virtualbox.png)



首先分别去两个应用的官网去下载最新的桌面软件
> **Vagrant**: [https://www.vagrantup.com/downloads.html](https://www.vagrantup.com/downloads.html)
> 
> **VirtualBox**: [https://www.virtualbox.org/wiki/Downloads](https://www.virtualbox.org/wiki/Downloads)

安装之后使用```vagrant box add```命令安装系统镜像

不过以国内下载速度可能到我退休才能下好，所以我一般会从其他地方下载系统镜像

> [https://cloud.centos.org/centos/7/vagrant/x86_64/images/](https://cloud.centos.org/centos/7/vagrant/x86_64/images/)

找个 .VirtualBox.box 的下载好

然后 ```vagrant box add centos/7``` 你下载镜像的路径 来添加box

可以通过 ```vagrant box list``` 可以查看你的镜像

![1654742817765.png](https://cdn.tyrantg.com/van/static/img/f0374c7224069636bf01423f25f18fbf.1654742817765.png)

随后在终端里进入你想创建vagrant的文件夹

输入```vagrant init```来新建一个Vagrantfile文件 这里给一个我的配置
```ruby
if defined?(VagrantVbguest)
  class MyWorkaroundInstallerUntilPR373IsMerged < VagrantVbguest::Installers::CentOS
    protected
    
    def has_rel_repo?
      unless instance_variable_defined?(:@has_rel_repo)
        rel = release_version
        @has_rel_repo = communicate.test(centos_8? ? 'yum repolist' : "yum repolist --enablerepo=C#{rel}-base --enablerepo=C#{rel}-updates")
      end
      @has_rel_repo
    end

    def centos_8?
      release_version && release_version.to_s.start_with?('8')
    end

    def install_kernel_devel(opts=nil, &block)
      if centos_8?
        communicate.sudo('yum update -y kernel', opts, &block)
        communicate.sudo('yum install -y kernel-devel', opts, &block)
        communicate.sudo('shutdown -r now', opts, &block)

        begin
          sleep 10
        end until @vm.communicate.ready?
      else
        rel = has_rel_repo? ? release_version : '*'
        cmd = "yum install -y kernel-devel-`uname -r` --enablerepo=C#{rel}-base --enablerepo=C#{rel}-updates"
        communicate.sudo(cmd, opts, &block)
      end
    end
  end
end

Vagrant.configure("2") do |config|

  config.vagrant.plugins = ['vagrant-vbguest']
  config.vbguest.auto_update = true

  config.vm.box = "centos/7"

  if defined?(MyWorkaroundInstallerUntilPR373IsMerged)
    config.vbguest.installer = MyWorkaroundInstallerUntilPR373IsMerged
  end

  config.vm.network "forwarded_port", guest: 80, host: 80
  config.vm.network "forwarded_port", guest: 888, host: 888
  config.vm.network "forwarded_port", guest: 3306, host: 3306
  config.vm.network "forwarded_port", guest: 6001, host: 6001
  config.vm.network "forwarded_port", guest: 6379, host: 6379
  config.vm.network "forwarded_port", guest: 8888, host: 8888

  config.vm.network "private_network", ip: "192.168.56.10"

  config.vm.synced_folder "C:\\code\\php", "/www/wwwroot"

  config.vm.provider "virtualbox" do |vb|

    vb.name = "CentOS"

    vb.memory = "12288"

    vb.cpus = 4
  end

end
```

虽然语言是ruby，但是代码还是比较好读的。 可以看到我配置了一个插件*vagrant-vbguest*，这个插件是用来同步主宿文件夹的。

但是启动时应为这个插件更新软件包时会报错，因此我定义了一个类来替代这个插件原有的installer

插件安装命令 ```vagrant plugin install vagrant-vbguest``` 至于其他配置看一下官方文档和原注释即可


再之后就是vagrant的管理命令了

```vagrant up``` 开机

```vagrant halt``` 关机

```vagrant ssh``` 进入ssh

ssh的用户是 vagrant 密码也是 vagrant

可以用```sudo passwd root```修改root密码

再```su```或者```su -```进入root用户

如果要用第三方软件连接ssh则需要修改/etc/ssh/sshd_config的PasswordAuthentication 为 yes