ตัวอย่าง: https://chat.gise.at
ตัวละครหลังจากแฮชแท็กกำหนดห้องหากไม่มีการเลือกแฮชแท็กกล่องโต้ตอบสร้างห้องจะปรากฏขึ้น
ตัวอย่างเช่นผู้เยี่ยมชมทุกคนที่มีลิงก์ไปยัง https://chat.gise.at/#roulette-chat เข้าสู่ห้องและสามารถสื่อสารกันได้
ดังนั้นเพียงส่งต่อ URL ปัจจุบันเพื่อเชิญผู้อื่น
วิดีโอแชทนี้ทำขึ้นเพื่อติดตั้งบนเว็บเซิร์ฟเวอร์ของตัวเอง สำหรับการส่งสัญญาณคุณสามารถใช้โครงการ Firebase ฟรีหรือใช้ฐานแชทเซิร์ฟเวอร์บน Node.js
รหัสโหลดและการพึ่งพาในสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณ:
git clone https://github.com/vgiselbrecht/gise-video-chat.git gise-video-chat
cd gise-video-chat
npm install
ลินเวกซ์
cp src/config.tmp.json src/config.json
cp src/assets/sass/_custom.tmp.scss src/assets/sass/_custom.scss
หน้าต่าง
copy srcconfig.tmp.json srcconfig.json
copy srcassetssass_custom.tmp.scss srcassetssass_custom.scss
การกำหนดค่าแบบเต็มสามารถทำได้ในไฟล์ src/config.json
สิ่งที่สำคัญที่สุดคือ "Exchangeservices" สำหรับการส่งสัญญาณ มีสองวิธีในการส่งสัญญาณผ่านเซิร์ฟเวอร์แชทฐาน Node.js หรือโครงการ Firebase ฟรี
ใน "ExchangeServices/Service" มีการระบุว่าใช้เซิร์ฟเวอร์แชท (แชทเซิร์ฟเวอร์) หรือ Firebase (Firebase)
สำหรับการเชื่อมต่อกับเซิร์ฟเวอร์แชทคุณต้องติดตั้งเซิร์ฟเวอร์แชทบนเซิร์ฟเวอร์ของตัวเอง ใน "ExchangeServices/Chat-Server/Host" คุณต้องเพิ่มเว็บค็อกเก็ต URI ลงในเซิร์ฟเวอร์นี้
{
"exchangeServices" : {
"service" : " chat-server " ,
"chat-server" : {
"host" : " wss://chat-server.example.com "
}
},
}คุณต้องสร้างโครงการ Firebase ฟรีด้วยการตรวจสอบสิทธิ์แบบไม่ระบุชื่อและฐานข้อมูลเรียลไทม์ การกำหนดค่า Firebase จะต้องฝากที่ "ExchangeServices/Firebase"
{
"exchangeServices" : {
"service" : " firebase " ,
"firebase" : {
"apiKey" : " " ,
"authDomain" : " " ,
"databaseURL" : " " ,
"projectId" : " " ,
"storageBucket" : " " ,
"messagingSenderId" : " " ,
"appId" : " " ,
"measurementId" : " "
}
},
}นอกจากนี้ยังสามารถเพิ่มเซิร์ฟเวอร์ STAN/TURN เพิ่มเติมในการสื่อสาร/WEBRTC/ICESSERVERS ในการใช้วิดีโอแชทนี้อยู่เบื้องหลังไฟร์วอลล์และ NATS คุณต้องใช้เซิร์ฟเวอร์เลี้ยว
รายการเซิร์ฟเวอร์ Stun และ Turn ฟรี
ด้วยระบบบางอย่าง (เช่น Twilio) จำเป็นต้องมี iceservers เปลี่ยนแปลงบ่อยครั้ง ดังนั้นจึงเป็นไปได้ที่จะโหลดการกำหนดค่า iceserver แบบไดนามิกด้วยการสื่อสาร/webrtc/iceserversfromurl ใน URL ที่กำหนดจะมีการร้องขอรูปแบบการส่งคืนใน JSON ในลักษณะเดียวกับพารามิเตอร์ iceservers ([{"urls": ""}, ... ])
คุณสมบัติบางอย่างสามารถเปิดใช้งานเป็นรายบุคคลต่อการติดตั้ง
{
"meta" : {
"title" : " Video Chat " ,
"description" : " Open-Source video chat based on WebRTC and Firebase. " ,
"keywords" : " chat, webrtc, video-call, video-chat " ,
"image" : " "
},
"privacy" : {
"firebaseAnalytics" : 0 ,
"imprint" : " " ,
"gdpr" : " "
},
"exchangeServices" : {
"service" : " chat-server " ,
"chat-server" : {
"host" : " wss:// "
}
},
"communication" : {
"webrtc" : {
"iceServers" : [
{ "urls" : " stun:stun.services.mozilla.com " },
{ "urls" : " stun:stun.l.google.com:19302 " }
],
"iceServersFromUrl" : " "
}
},
"features" : {
"soundEffects" : false ,
"mutePartner" : true ,
"soundOffPartner" : true
}
}คุณสามารถเพิ่มการปรับการออกแบบ SASS ของคุณลงในไฟล์ "SRC/Assets/SASS/_Custom.scss" วิธีที่ง่ายที่สุดคือเขียนทับตัวแปรจาก _settings.scss ที่นี่ ไฟล์นี้ยังคงอยู่แม้หลังจากการอัปเดต
grunt deploy
เพิ่มเนื้อหาจาก Dist Directory ไปยังรูทเอกสารของเว็บเซิร์ฟเวอร์ในพื้นที่ของคุณ
grunt deploy --target=production
คัดลอกเนื้อหาจาก Dist Directory ไปยังเว็บเซิร์ฟเวอร์ของคุณ
grunt watch
เปลี่ยนรหัสที่รวบรวมในไดเรกทอรี DIST หลังจากบันทึกไฟล์โครงการ โดยเฉพาะอย่างยิ่งไดเรกทอรี DIST เป็นรูทเอกสารของเว็บเซิร์ฟเวอร์ท้องถิ่นเช่น Nginx หรือ Apache
คุณสามารถสปอนเซอร์ให้ฉันผ่านการสนับสนุนของ GitHub
เพื่อเป็นที่ยอมรับฉันยินดีที่จะได้รับดาว
คำแนะนำและคำขอดึงสำหรับส่วนขยายยินดีต้อนรับเสมอ
ใบอนุญาต Apache 2.0