安徽网站关键字优化,域名备案信息查询官网,wordpress怎么集成码支付宝,北京推广网站首先需要一个信令服务器#xff0c;我们使用nodejs来搭建。两个端#xff1a;发送端和接收端。我的目录结构如下图#xff1a;流程 创建一个文件夹 WebRTC-Test。进入文件夹中#xff0c;新建一个node的文件夹。使用终端并进入node的目录下#xff0c;使用 npm init 创建p…首先需要一个信令服务器我们使用nodejs来搭建。两个端发送端和接收端。我的目录结构如下图流程 创建一个文件夹 WebRTC-Test。进入文件夹中新建一个node的文件夹。使用终端并进入node的目录下使用 npm init 创建package.json。 新建server.js复制一下代码 const app require(express)();
const wsInstance require(express-ws)(app);const cors require(cors);
app.use(cors({ origin: http://localhost:3000 }));app.ws(/, ws {ws.on(message, data {// 未做业务处理收到消息后直接广播wsInstance.getWss().clients.forEach(server {if (server ! ws) {server.send(data);console.log(data,)}});});
});console.log(服务启动 http://localhost:8080);
app.listen(8080, 0.0.0.0); 下载信令服务器的依赖。 npm install express;
npm install express-ws;
npm install cors; 使用node server.js启动node的服务。准备接收方的代码receive.html。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivContent-Security-Policy contentupgrade-insecure-requeststitleReceiver/title
/headbodyvideo autoplay idremote/video
/body
scriptconst remoteVideo document.querySelector(#remote)const socket new WebSocket(ws://localhost:8080);socket.onopen function () {console.log(Socket Success)}let buddy new RTCPeerConnection()// 如果接收到对方的视频socket.onmessage function (e) {const { type, sdp, iceCandidate } JSON.parse(e.data)console.log(type)switch (type) {case offer:buddy.setRemoteDescription(new RTCSessionDescription({ type, sdp }))buddy.createAnswer().then(answer {buddy.setLocalDescription(answer)socket.send(JSON.stringify(answer))})break;case offer_ice:buddy.addIceCandidate(iceCandidate)break;default:break;}}buddy.ontrack function (e) {remote.srcObject e.streams[0]}buddy.onicecandidate function (e) {if (e.candidate) {socket.send(JSON.stringify({type: answer_ice,iceCandidate: e.candidate}))}}/script/html 准备发送方的代码send.html。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivContent-Security-Policy contentupgrade-insecure-requeststitleSend/title
/headbodyscriptconst socket new WebSocket(ws://localhost:8080);socket.onopen function () {console.log(Socket Success)}let peer new RTCPeerConnection()navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream {stream.getTracks().forEach(track {peer.addTrack(track, stream);})peer.createOffer().then(offer {peer.setLocalDescription(offer);socket.send(JSON.stringify(offer));})})peer.onicecandidate function (e) {if (e.candidate) {socket.send(JSON.stringify({type: offer_ice,iceCandidate: e.candidate}))}}// 如果接收到对方的视频socket.onmessage function (e) {const { type, sdp, iceCandidate } JSON.parse(e.data)console.log(type)switch (type) {case answer:peer.setRemoteDescription(new RTCSessionDescription({ type, sdp }))break;case answer_ice:peer.addIceCandidate(iceCandidate)break;default:break;}}/script
/body/html 使用vscode的插件live server启动两个html文件。 下载live server插件。 启动live server。 启动后两个端口号。等全部启动后查看接收端的页面要等一段时间可以看到摄像头拍到的画面。 接受端播放不了在浏览器控制台中输入 remoteVideo.play() 就行
