WEBRTC + vue 建立连接本地测试

有socket网络远端交互版本的可以评论联系我我发出来

vue复制到文件中

<template><div class="home"><div id="contentHolder" class="content-holder"><video id="videoA" width="550" height="450" autoplay ref="videoA"></video><video id="videoB" width="550" height="450" autoplay ref="videoB"></video></div><button @click="initVido()">打开</button><button @click="call()">呼叫</button></div>
</template><script>
let pc1;
let pc2;
let localStream;
let startTime;
export default {name: "Home",data() {return {offerOptions: {offerToReceiveAudio: 1,offerToReceiveVideo: 1,},};},methods: {initVido() {let _this = this;if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({video: true,audio: true,}).then(function (stream) {var video = _this.$refs.videoA;video["srcObject"] = stream;localStream = stream;video.play();if (pc1) {localStream.getTracks().forEach((track) => pc1.addTrack(track, localStream));console.log("Added local stream to pc1");}}).catch(function (err) {console.log(err);});}const remoteVideo = this.$refs.videoB;remoteVideo.addEventListener("resize", () => {console.log(`Remote video size changed to ${remoteVideo.videoWidth}x${remoteVideo.videoHeight} - Time since pageload ${performance.now().toFixed(0)}ms`);// We'll use the first onsize callback as an indication that video has started// playing out.if (startTime) {const elapsedTime = window.performance.now() - startTime;console.log("Setup time: " + elapsedTime.toFixed(3) + "ms");startTime = null;}});},async call() {const configuration = {};startTime = window.performance.now();pc1 = new RTCPeerConnection(configuration);pc2 = new RTCPeerConnection(configuration);// 添加 onIceCandidate 监听pc1.addEventListener("icecandidate", (e) => this.onIceCandidate1(pc1, e));pc2.addEventListener("icecandidate", (e) => this.onIceCandidate2(pc2, e));pc1.addEventListener("iceconnectionstatechange", (e) =>this.onIceStateChange(pc1, e));pc2.addEventListener("iceconnectionstatechange", (e) =>this.onIceStateChange(pc2, e));pc2.addEventListener("track", this.gotRemoteStream);if (localStream) {localStream.getTracks().forEach((track) => pc1.addTrack(track, localStream));console.log("Added local stream to pc1");}try {console.log("pc1 createOffer start");const offer = await pc1.createOffer(this.offerOptions);await this.onCreateOfferSuccess(offer);} catch (e) {this.onCreateSessionDescriptionError(e);}},async onIceCandidate1(pc1, event) {try {await pc2.addIceCandidate(event.candidate);this.onAddIceCandidateSuccess(pc1);} catch (e) {this.onAddIceCandidateError(pc1, e);}},async onIceCandidate2(pc2, event) {try {await pc1.addIceCandidate(event.candidate);this.onAddIceCandidateSuccess(pc2);} catch (e) {this.onAddIceCandidateError(pc2, e);}},onIceStateChange(pc) {if (pc) {if (pc) {console.log(`${this.getName(pc)} ICE state: ${pc.iceConnectionState}`);// console.log("ICE state change event: ", event);}}},async onCreateOfferSuccess(desc) {// console.log(`Offer from pc1\n${desc.sdp}`);console.log("pc1 setLocalDescription start");try {await pc1.setLocalDescription(desc);this.onSetLocalSuccess(pc1);} catch (e) {this.onSetSessionDescriptionError(e);}console.log("pc2 setRemoteDescription start");try {await pc2.setRemoteDescription(desc);this.onSetRemoteSuccess(pc2);} catch (e) {this.onSetSessionDescriptionError(e);}console.log("pc2 createAnswer start");try {const answer = await pc2.createAnswer();await this.onCreateAnswerSuccess(answer);} catch (e) {console.log("pc2创建本地应答失败");this.onCreateSessionDescriptionError(e);}},async onCreateAnswerSuccess(desc) {// console.log(`Answer from pc2:\n${desc.sdp}`);console.log("pc2 setLocalDescription start");try {await pc2.setLocalDescription(desc);this.onSetLocalSuccess(pc2);} catch (e) {this.onSetSessionDescriptionError(e);}console.log("pc1 setRemoteDescription start");try {await pc1.setRemoteDescription(desc);this.onSetRemoteSuccess(pc1);} catch (e) {this.onSetSessionDescriptionError(e);}},onAddIceCandidateSuccess(pc) {console.log(`${this.getName(pc)} addIceCandidate success`);},onAddIceCandidateError(pc, error) {console.log(`${this.getName(pc)} failed to add ICE Candidate: ${error.toString()}`);},onCreateSessionDescriptionError(error) {console.log(error);console.error(`Failed to create session description: ${error.toString()}`);},onSetLocalSuccess(pc) {console.log(`${this.getName(pc)} setLocalDescription complete`);},onSetRemoteSuccess(pc) {console.log(`${this.getName(pc)} setRemoteDescription complete`);},onSetSessionDescriptionError(error) {console.error(`设置 session description 错误: ${error.toString()}`);},getName(pc) {return pc === pc1 ? "pc1" : "pc2";},gotRemoteStream(e) {var remoteVideo = this.$refs.videoB;if (remoteVideo.srcObject !== e.streams[0]) {remoteVideo.srcObject = e.streams[0];console.log("pc2 received remote stream");}},},
};
</script><style scoped>
.content-holder {width: 100%;display: flex;justify-content: space-between;
}
</style>

WEBRTC + vue 建立连接本地测试相关推荐

golang mysql 超时_golang中mysql建立连接超时时间timeout 测试
本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试下面例子中,设置连接超时时间为 ...
golang中mysql建立连接超时时间timeout 测试
本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试下面例子中,设置连接超时时间为 ...
【物联网】MATLAB通过MQTT与阿里云和本地服务器建立连接
文章目录 1.MQTT服务器:本地Ubuntu搭建 2.MQTT服务器:阿里云平台搭建 3.设备:MQTT.fx虚拟设备(通信测试成功√) 4.设备:MATLAB虚拟设备(正式连接) 4.1 使用MA ...
连接以太网测试网Ropsten，本地账号和remix余额显示为0不同步的问题，Remix连接
参考前面这篇文章有助于理解本文.https://blog.csdn.net/liangyihuai/article/details/106387808 安装Geth 启动geth,同步Ropsten测 ...
如何吧本地仓库提交到github_如何将本地代码提交到github远程仓库（第一次，建立连接并且提交）...
今天提交本地代码到远程仓库,没有成功过,后来经过多方试验,终于取得了成功. 首先,在本地创建本地仓库(也就是在项目的根目录下执行"git init"命令,生成.git文件就算是成功 ...
vue websocket 建立连接并添加心跳检测机制
图片: 代码: 新建一个文件夹,里面有两个文件组件1: index.js import Bus from './bus.js'var websocketConnectdCount = 0export ...
EOS 连接本地网络amp;amp;测试网络amp;amp;主网
写在前面 EOS主网不是唯一的,EMLG, EOSGO, IMEOS, EOSForce(EOS原力)几大社区都在负责主网启动,这几个都是主网的有力竞争者.其中EMLG你可以认为是具备最大共识的社区, ...
vue项目使用webSocket前后端建立连接推送消息
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>we ...
B站黑马测试第二篇P204:navicat连接本地tpshop2.0数据库
一.前置条件 1.下载phpStudy 2.下载TPshop软件下载地址:点击这里黑马老师的博客后,ctrl+f键搜索关键字:'phpStudy'和'TPshop'下载. 二.环境部署参考视频:B ...

WEBRTC + vue 建立连接本地测试

WEBRTC + vue 建立连接本地测试

WEBRTC + vue 建立连接本地测试相关推荐

最新文章

热门文章

WEBRTC + vue 建立连接 本地测试

WEBRTC + vue 建立连接 本地测试

WEBRTC + vue 建立连接 本地测试相关推荐

最新文章

热门文章

WEBRTC + vue 建立连接本地测试

WEBRTC + vue 建立连接本地测试

WEBRTC + vue 建立连接本地测试相关推荐