寫了很簡單的一個demo
,多次調(diào)試之后所有的報錯都已經(jīng)解決了,但是現(xiàn)在還是沒能實現(xiàn)想要的效果。各位大佬幫看下是哪里出問題了。
// server.js
const express = require('express')
const app = express()
const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))
app.get('/phone', function (req, res) {
res.sendfile(__dirname + '/phone.html')
})
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html')
})
const server = require('http').createServer(app)
const io = require('socket.io')(server)
let clients = []
io.on('connection', function (socket) {
clients.push(socket)
const referer = socket.handshake.headers.referer
if(referer.match('/phone')) {
// phone
socket.on('phone_ice_candidate', function (res) {
socket.broadcast.emit('pc_add_ice', { ice: res.ice })
})
// phone
socket.on('send_phone_sdp', function (data) {
socket.broadcast.emit('set_pc_remote_sdp', { desc: data.desc })
})
}
// pc 獲取 ice 后推送給 phone
socket.on('remote_ice_candidate', function (ice) {
socket.to(getId(clients, '/phone')).emit('send_ice_to_pc', {ice: ice})
})
// pc 獲取 sdp 后推送給 phone
socket.on('send_pc_sdp', function (data) {
// 推送給 phone
socket.to(getId(clients, '/phone')).emit('set_phone_remote_sdp', {desc: data})
})
// 斷開
socket.on('disconnect', () => {
let id = socket.id
clients.forEach((client, index) => {
if(client.id === id) {
clients.splice(index, 1)
}
})
})
})
function getId(sockets, exp) {
let id
sockets.forEach(socket => {
if(socket.handshake.headers.referer.match(exp)) {
id = socket.id
}
})
return id
}
server.listen(3000, function () {
console.log('port listening at 3000')
})
// phone.js
var socket = io();
var server = {
// "iceServers": [{
// "url": "stun:stun.l.google.com:19302"
// }]
},
pc = new RTCPeerConnection(server),
v = document.querySelector('#video1')
// 候選列表
pc.onicecandidate = function (event) {
if (event.candidate) {
socket.emit('phone_ice_candidate', {
ice: event.candidate
})
}
}
// 接收遠端 ice
socket.on('send_ice_to_pc', function (event) {
pc.addIceCandidate(new RTCIceCandidate(event.ice.ice))
})
// 獲取用戶本地設(shè)備
navigator.mediaDevices.getUserMedia({
video: {width: 400, height: 300},
audio: false
})
.then(function (stream) {
v.src = window.URL.createObjectURL(stream);
pc.addStream(stream);
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
})
// create offer
pc.createOffer({offerToReceiveVideo: 1}).then(function (e) {
// pc setLocalDescription
pc.setLocalDescription(e).then(
function () {
socket.emit('send_phone_sdp', {desc: e})
},
function () {
console.log('pc setLocalDescription error')
}
)
});
socket.on('set_phone_remote_sdp', function (e) {
pc.setRemoteDescription(e.desc.desc).then(
function () {
console.log('pc setRemoteDescription success')
}, function (err) {
console.log(err)
})
})
// index.js
var socket = io();
var server = {
// "iceServers": [{
// "url": "stun:stun.l.google.com:19302"
// }]
},
pc = new RTCPeerConnection(server),
v = document.querySelector('#video2')
pc.onicecandidate = function (event) {
if (event.candidate) {
socket.emit('remote_ice_candidate', {
ice: event.candidate
})
}
}
socket.on('pc_add_ice', function (event) {
pc.addIceCandidate(new RTCIceCandidate(event.ice))
})
//
pc.ontrack = function (e) {
// v.srcObject = e.streams[0];
console.log(e, 'pc.ontrack')
}
// 遠端 sdp 設(shè)置到本地
socket.on('set_pc_remote_sdp', function (e) {
pc.setRemoteDescription(e.desc).then(
function () {
console.log('remote setRemoteDescription success')
pc.createAnswer().then(function (desc) {
pc.setLocalDescription(desc).then(
function () {
socket.emit('send_pc_sdp', {desc: desc})
},
function (err) {
console.log(err)
}
);
})
},
function () {
console.log('pc setLocalDescription error')
}
)
})
需求:
1.用戶進入一個web
網(wǎng)站,該網(wǎng)站有一個沒有視頻源的video
標(biāo)簽。
2.用戶通過手機打開一個該網(wǎng)站的子頁面,調(diào)用手機攝像頭
拍攝影像并傳遞到web
網(wǎng)站的video
標(biāo)簽上。
補充:
1.在console
中打印的iceConnectionState
時發(fā)現(xiàn),phone.js
內(nèi)部的iceConnectionState
觸發(fā)過程:checking -> connected -> completed
;而index.js
中觸發(fā)過程僅有checking -> connected
。
2.在firefox
下訪問時,控制臺內(nèi)會提示ICE failed, add a STUN server and see about:webrtc for more details
。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團,成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達內(nèi)教育集團成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。