Source code website nghe nhạc cùng nhau live stream OBS qua Facebook

[Mã code 40631]
  1 Đánh giá    Viết đánh giá
 0      79      0
Phí tải: 49 Xu (1Xu = 1.000đ)
Danh mục
Thể loại
Nhóm code
Ngày đăng
14-9-2024
Loại file
Full code
Dung lượng
79.2 MB
Code đã kiểm thử
Không chứa mã độc
Có demo thực tế
Có hướng dẫn cài đặt

Dự án Source code website nghe nhạc cùng nhau live stream OBS qua Facebook là một nền tảng cho phép người xem nghe nhạc trực tuyến qua live stream của mạng xã hội Facebook


MÔ TẢ CHI TIẾT

Giới thiệu dự án

Dự án Source code website nghe nhạc cùng nhau live stream OBS qua Facebook là một nền tảng cho phép người dùng nghe nhạc trực tuyến, kết nối với nhau qua mạng xã hội và trải nghiệm nghe nhạc cùng nhau trong thời gian thực. Người dùng có thể sử dụng OBS để live stream nội dung âm nhạc từ trang web lên Facebook, giúp chia sẻ không gian âm nhạc với bạn bè và cộng đồng.

Mục tiêu của Dự án

  • Tạo ra nền tảng nghe nhạc trực tuyến: Giúp người dùng dễ dàng tham gia nghe nhạc trực tuyến.
  • Tích hợp live stream OBS: Kết nối với OBS Studio để live stream nhạc từ website trực tiếp lên Facebook, tạo ra trải nghiệm tương tác hơn với khán giả.
  • Tăng cường tính cộng đồng: Tạo môi trường cho người dùng chia sẻ âm nhạc, trò chuyện và tương tác trực tiếp với nhau thông qua bình luận và các tính năng live chat.

Chức năng chính

  1. Kết nối với OBS Studio để live stream:
    • Hướng dẫn kết nối website với OBS Studio để phát trực tiếp lên Facebook.
    • Hỗ trợ tùy chỉnh overlay, cảnh quay, và các thông báo tương tác (ví dụ: người tham gia, lượt thích, bình luận…).
  2. Tính năng chat và tương tác:
    • Người xem có thể quản lý danh sách phát nhạc, cho phép thêm, hoặc bỏ qua các bài hát.

Công nghệ Sử dụng

  • Ngôn ngữ Lập trình: JavaScript, PHP
  • Frontend Framework: React
  • Backend Framework: PHP
  • Cơ sở dữ liệu: MySQL
  • Live Streaming Tool: OBS Studio
  • API: YouTube API để tìm kiếm bài hát và lấy thông tin bài hát

Lợi ích

  • Giao lưu âm nhạc: Tạo không gian nghe nhạc thân mật và gắn kết người nghe với nhau thông qua âm nhạc.
  • Tăng khả năng tiếp cận: Live stream lên Facebook giúp tiếp cận nhiều người hơn và mở rộng cộng đồng.
 


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

 

HÌNH ẢNH DEMO

nghe nhạc cùng nhau,code web nghe nhạc,live stream,share code live stream facebook

nghe nhạc cùng nhau,code web nghe nhạc,live stream,share code live stream facebook

Nguồn: Sharecode.vn



HƯỚNG DẪN CÀI ĐẶT

Hướng dẫn cài đặt

Setup Client

  1. Mở cmd trong thư mục Client, chạy lệnh npm install
  2. Copy và paste file .env.example, đổi tên thành .env
  3. Truy cập https://console.cloud.google.com, tạo project mới với tên bất kỳ
  4. Bật API YouTube Data v3 và tạo API key mới
  5. Copy key vừa tạo vào file .env phần REACT_APP_TOKEN
  6. Dán link đến file api.php trong phần Setup Server

Setup Server

  1. Bật XAMPP và để port mặc định là 3103
  2. Copy file api.php trong thư mục Server vào thư mục htdocs của XAMPP
  3. Truy cập phpMyAdmin, tạo database mới với tên live_chat
  4. Tiến hành khôi phục database từ file Database.sql
  5. Sửa lại thông tin đăng nhập database trong file api.php
  6. Dán link của server vào phần REACT_APP_API_URL của file .env
  7. Chạy lệnh npm start của Client

OBS Live

  1. Bật OBS Studio và tạo một source Browser mới
  2. Dán link đến Client vào thanh URL (http://localhost:3000)
  3. Chỉnh width và height cho phù hợp với kích thước màn hình
  4. Tick vào ô Control audio via OBS
  5. Để load lại bình luận trực tiếp, ấn vào 24/7 Music Radio trong phần Interact
  6. Truy cập https://facebook.com/live/producer để lấy stream key
  7. Dán key vào OBS Setting
  8. Bắt đầu phát trực tiếp

Facebook Console

  1. Mở video trực tiếp trong Facebook profile (thường là facebook.com/username/videos/xxx)
  2. Mở DevTool F12, vào tab Network
  3. Bấm vào WS để lọc WebSocket rồi tải lại trang
  4. Bấm vào Initiator của dòng chat?region=xxx
  5. Nhấp chuột vào nút đầu dòng return new WebSocket
  6. Tải lại trang và paste đoạn code của file Dán vào console.js vào console của F12
  7. Vào tab Sources và bấm vào mũi tên màu xanh
  8. Test xem đoạn mã hoạt động được chưa bằng cách bình luận thử
  9. Nếu hiện hai dòng Has a comment và Success trong console là hoàn thành

 

 
 
LINK DOWNLOAD

App nghe nhạc cùng nhau qua FB Live.zip [79.2 MB ]

File đã được kiểm thử
     Báo vi phạm bản quyền
Pass giải nén (Nếu có):
sharecode.vn
DOWNLOAD
(49 Xu)
Bạn có code hay
ĐĂNG BÁN NGAY

BÌNH LUẬN



ĐÁNH GIÁ


ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
20:29 - 14/9/2024
Code rất tốt
Code rất tốt và phù hợp để phát triển

 HỖ TRỢ TRỰC TUYẾN