The left-hand side of an assignment expression may not be an optional property access.t 报错处理
The left-hand side of an assignment expression may not be an optional property access.t ts 中，这个报错通常是在给可能为空或undefined的对象赋值引起的。
使用可选链操作符 ?. 来给一个可能为 undefined 的对象赋值也会引起上边这个错误。如：
obj?.name = '123'?.链式操作符仅用于读取属性或调用方法，而不能用于赋值。
if (obj) {
obj.name = '123'
}使用逻辑与操作符 &&
obj && (obj.name = '123')使用非空断言操作符
如果你确定对象不会是 undefined 或 null，可以使用非空断言操作符（!）
obj!.name = value但这种方法比较危险，因为如果 obj 确实是 undefined 或 null，运行时会抛出错误
前端 html 页面中，选择上传视频文件，获取视频文件的长度以及截取封面是个很常见的功能。前端 js 也能实现这个功能。
流程： file -> loadedmetadata(获取视频元信息)->currentTime(定格到视频的位置)->绘制到 canvas->转换成图片
通过 input(file) 选择文件。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file
<div>
<label class="upload-btn" for="video">
<span class="text">上传</span>
</label>
<input class="hidden" id="video" name="video" type="file" accept="video/mp4" @change="changeVideo" />
</div>获取视频元信息。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
使用 createObjectURL 创建的URL是一个blob:开头的临时路径，这个路径可以在浏览器中直接访问，访问到的内容就是上传的视频文件。当页面关闭后，此路径也随之失效。
function changeVideo() {
const fileInput: HTMLInputElement = document.getElementById('video') as HTMLInputElement
const files: FileList = fileInput?.files as FileList
const file = files[0]
const video = document.createElement('video')
video.src = URL.createObjectURL(file)
video.addEventListener('loadedmetadata', function () {
console.log(video.duration)
})
}定格到视频位置
// 设置视频自动播放
video.autoplay = true
// 设置视频播放的时间(方便截图)
video.currentTime = 1绘制 canvas
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// document.body.appendChild(canvas);
}将 canvas 转换成图片
canvas.toBlob((blob) => {
if (blob) {
const url = URL.createObjectURL(blob);
}
});完整的 ts。
interface VideoInfo {
name: string
width: number
height: number
thumbnail?: string
duration?: number
}
function getVideoInfo(file: File, maxWidth = 320) {
return new Promise<VideoInfo>((resolve) => {
const index = file.name.lastIndexOf('.')
const name = index > 0 ? file.name.substring(0, index) : ''
const videoMedia: VideoInfo = {
name,
width: 0,
height: 0
}
const video = document.createElement('video')
video.src = URL.createObjectURL(file)
video.addEventListener('loadedmetadata', function () {
videoMedia.width = video.videoWidth
videoMedia.height = video.videoHeight
videoMedia.duration = video.duration
})
// 监听视频跳转完成事件
video.addEventListener('seeked', function () {
// 创建画布并绘制视频帧
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (video.videoWidth > maxWidth) {
canvas.width = maxWidth
canvas.height = Math.round((maxWidth / video.videoWidth) * this.videoHeight)
} else {
canvas.width = video.videoWidth
canvas.height = video.videoHeight
}
if (ctx) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
canvas.toBlob((blob) => {
if (blob) {
videoMedia.thumbnail = URL.createObjectURL(blob)
resolve(videoMedia)
} else {
resolve(videoMedia)
}
})
} else {
resolve(videoMedia)
}
// 释放创建的临时URL
// URL.revokeObjectURL(video.src)
})
// 设置视频自动播放
video.autoplay = true
// 设置视频播放的时间(方便截图)
video.currentTime = 1
})
}局域网内，即使不配置 stun/turn， webrtc 也是能音视频通话。如果在广域网环境，必须得有 turn 服务。那么自己构建一个 turn 服务就很有必要。不过广域网的 webrtc 对带宽的消耗也是很大。
STUN
STUN（Session Traversal Utilities for NAT，NAT 会话穿越应用程序）是一种网络协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的 Internet 端端口。这些信息被用来在两个同时处于 NAT 路由器之后的主机之间创建 UDP 通信。该协议由 RFC 5389 定义。(提供客户端检测自己的公共 IP 地址和端口)
STUN 并不是每次都能成功的为需要 NAT 通话设备分配 IP 地址的，P2P 在传输媒体流时，使用的本地带宽，在多人视频通话的过程中，通话质量的好坏往往需要根据使用者本地的带宽确定。
TURN
TURN 的全称为 Traversal Using Relays around NAT，是 STUN/RFC5389 的一个拓展，主要添加了 Relay 功能。如果终端在 NAT 之后， 那么在特定的情景下，有可能使得终端无法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继， 对来往的数据进行转发。这个转发的协议就被定义为 TURN。
在 STUN 分配公网 IP 失败后，可以通过 TURN 服务器请求公网 IP 地址作为中继地址。这种方式的带宽由服务器端承担，在多人视频聊天的时候，本地带宽压力较小，并且，根据 Google 的说明，TURN 协议可以使用在所有的环境中。（中继流量，当点对点连接不可用时，Coturn 会接管通信。）
ICE 跟 STUN 和 TURN 不一样，ICE 不是一种协议，而是一个框架（Framework），它整合了 STUN 和 TURN。coturn 开源项目集成了 STUN 和 TURN 的功能。