video替换webRtc视频流

经过测试,本地mp4可播放的视频可替换成功;在线的视频会报错跨域;https安全要求;

核心api
typescript 复制代码
video.captureStream()
html
html 复制代码
<video id="yyhTestVideo" src="./tmp.mp4" width="1280" height="720" autoplay loop></video>
video
typescript 复制代码
const myVideo = document.getElementById('yyhTestVideo');
// 30帧也可以不指定
const myVideoStream = myVideo.captureStream(30);
/* 
    webRTc的peerConnection对象; 
    this.session.connection是我封装后的,你使用自己的new RTCPeerConnection();对象;
*/
const peerConnection = this.session.connection;
const sender = peerConnection.getSenders().find((s) => s.track.kind === "video");
sender.replaceTrack(myVideoStream.getVideoTracks()[0]);
相关推荐
yqcoder19 分钟前
vue2 和 vue3 中,列表中的 key 值作用
前端·javascript·vue.js
U***498321 分钟前
前端TypeScript教程汇总,从基础到高级
前端·javascript·typescript
梵得儿SHI21 分钟前
Vue 指令系统:事件处理与表单绑定全解析,从入门到精通
前端·javascript·vue.js·v-model·v-on·表单数据绑定·表单双向绑定
IT_陈寒24 分钟前
Vue3性能优化实战:我从这5个技巧中获得了40%的渲染提升
前端·人工智能·后端
二川bro24 分钟前
第45节:分布式渲染:Web Workers多线程渲染优化
开发语言·javascript·ecmascript
lcc18724 分钟前
Vue props
前端·vue.js
落霞的思绪27 分钟前
Cesium里的postProcessStages实现暗黑样式的天地图
前端·gis·cesium
DevUI团队31 分钟前
🔥Angular开发者看过来:不止于Vue,MateChat智能化UI库现已全面支持Angular!
前端·人工智能·angular.js
onebound_noah43 分钟前
电商图片搜索:技术破局与商业落地,重构“视觉到交易”全链路
大数据·前端·网络·人工智能·重构·php
答案answer1 小时前
一个超级真实的Three.js树🌲生成器插件
前端·three.js