向国旗敬礼 做新时代好少年网站,大连网站建设详细流程,做展示型网站便宜吗,流量最大的网站环境 VS2022 WIN10 .NET8 VSCode VUE SignalR 1.安装SignalR客户端库
需要在Vue.js项目中安装SignalR客户端库。可以使用npm或者yarn来安装
npm install microsoft/signalr2.创建SignalR服务
创建SignalR服务#xff0c;以便客户端#xff08;Vue.js应用#xff09;能…
环境 VS2022 WIN10 .NET8 VSCode VUE SignalR 1.安装SignalR客户端库
需要在Vue.js项目中安装SignalR客户端库。可以使用npm或者yarn来安装
npm install microsoft/signalr2.创建SignalR服务
创建SignalR服务以便客户端Vue.js应用能够连接并与之通信 script
import * as signalR from microsoft/signalr;export default {data() {return {connection: null,connected: false,inCall: false,localStream: null,remoteStream: null,peerConnection: null};},mounted() {this.connection new signalR.HubConnectionBuilder().withUrl(/chathubv).configureLogging(signalR.LogLevel.Information).build();this.connection.start().then(() {console.log(SignalR Connected);this.connected true;}).catch((error) {console.error(SignalR Connection Error: , error);});},methods: {async startCall() {this.localStream await navigator.mediaDevices.getUserMedia({ video: true, audio: true });this.$refs.localVideo.srcObject this.localStream;this.peerConnection new RTCPeerConnection();this.peerConnection.addStream(this.localStream);this.peerConnection.onaddstream (event) {this.remoteStream event.stream;this.$refs.remoteVideo.srcObject this.remoteStream;};const offer await this.peerConnection.createOffer();await this.peerConnection.setLocalDescription(offer);this.connection.invoke(SendOffer, offer);this.inCall true;},async endCall() {this.localStream.getTracks().forEach(track track.stop());this.remoteStream.getTracks().forEach(track track.stop());this.peerConnection.close();this.inCall false;}}
}
/script
3.处理视频流组件
Vue组件
templatediv idappdiv v-if!connectedConnecting to SignalR.../divdiv v-elsediv v-if!inCallbutton clickstartCallStart Call/button/divdiv v-elsevideo reflocalVideo autoplay/videovideo refremoteVideo autoplay/videobutton clickendCallEnd Call/button/div/div/div
/template
4.服务端信令交换
using Microsoft.AspNetCore.SignalR;namespace WebSignalR
{public class ChatHubv : Hub{public async Task SendOffer(string offer){await Clients.All.SendAsync(ReceiveOffer, offer);}public async Task SendAnswer(string answer){await Clients.All.SendAsync(ReceiveAnswer, answer);}public async Task SendIceCandidate(string candidate){await Clients.All.SendAsync(ReceiveIceCandidate, candidate);}}}public async Task SendOffer(string offer): 用于接收客户端发送的offer信令。
await Clients.All.SendAsync(ReceiveOffer, offer): 在接收到offer信令后会调用 Clients.All.SendAsync 方法将offer信令发送给所有连接到当前Hub的客户端。第一个参数是要调用的客户端方法的名称ReceiveOffer第二个参数是要发送的数据offer。
5.Runing this.connection.start() ...
看到 控制台输出 SignalR Connected 说明和SignalR服务器连接上了
