صمم تراكبات البث الاجتماعي الخاصة بك

إنشاء تراكبك في 5 خطوات

1. اختر التراكب الذي تريد تغييره.
2. قم بتنزيل المصدر المضغوط، وفك الضغط وانسخ ملف HTML الخاص بالتراكب.
3. تعديل النسخة بنفسك أو اطلب من أداة ذكاء اصطناعي ذلك.
4. افتح نسختك في OBS مع إضافة إعدادات جلسة SSN إلى عنوانه.
5. اختبره باستخدام المشغّل الحقيقي للتراكب.

اختر التراكب المطلوب تغييره

يمكنك تغيير ألوان التراكب وخطوطه وتخطيطه ورسومه وحركته. يتيح ملف HTML هو الصفحة. أما رابط OBS يشير إليها ويضيف الجلسة وإعدادات العرض.

يستقبل كل نوع تراكب أحداثاً مختلفة. صفحة الدردشة وصفحة الرسالة المميزة والاستطلاع لا تستخدم المدخلات نفسها. افتح دليل تصميم النوع الذي تستخدمه:

تريد تصميماً جاهزاً؟ جرّب معرض التراكبات أو معرض القوالب. تريد استخدام مظهر دردشة من StreamElements أو Streamlabs؟ اتبع دليل الاستيراد. يأتي هذا التصدير بخطوات إعداده الخاصة.

تنزيل الملفات

1. تنزيل ملف ZIP لمصدر beta. أو افتح مستودع بيتا واختر الكود → تنزيل ZIP.
2. فك الضغط في مجلد ستحتفظ به، مثل C:\SSN\social_stream-beta\. لا تعدّل داخل ZIP. لا تحتاج إلى إعادة تثبيت SSN.
3. ابحث عن ملف التراكب (انظر الجدول أعلاه). أنشئ نسخة بجوار الأصل، مثل poll.html → my-poll.html. لقالب مثل themes/featured-styles/featured-modern.html، أبقِ النسخة في المجلد نفسه.
4. افتح النسخة في محرر نصوص أو كود واحفظها باسم .html، لا .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

الاحتفاظ برابط الجلسة

شغّل SSN ووصل مصدراً وتأكد من عمل التراكب الأصلي، ثم انسخ الرابط الكامل من أداة SSN الخاصة بذلك التراكب.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

القيمة بعد session= هي جلسة SSN لديك، وليست قناة YouTube أو اسم Twitch أو اسم الملف أو عنوان الاستطلاع. يجب أن يستخدم SSN وصفحتك الجلسة وكلمة المرور نفسيهما. أبقِ SSN قيد التشغيل؛ التراكبات تستقبل البيانات فقط ولا تلتقط الدردشة بنفسها.

إذا بقيت النسخة فارغة، افحص الرابط الأصلي أولاً. بعض الصفحات تطلب الإعدادات الناقصة، وأخرى تبقى مخفية أو تعيد التوجيه. وضع الجلسة الصحيحة في الرابط يجنب التخمين.

افتح ملفك في OBS

افتح الملف المعدل مباشرةً من حاسوبك. لا تحتاج إلى خادم.

1. اسحب نسخة HTML إلى Chrome أو Edge وانسخ عنوانها. يبدأ بـ file:///.
2. من رابط تراكب SSN العامل، انسخ كل شيء بدءاً من ? فصاعداً. الصقه في نهاية عنوان الملف للحفاظ على الجلسة وكلمة المرور والإعدادات وأي # .
3. افتح العنوان المجمّع في متصفحك لاختباره.
4. في OBS، أضف مصدر المتصفح. اترك ملف محلي غير محدد. الصق العنوان الكامل في URL واضبط العرض والارتفاع.

مثال: رابط SSN هذا…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…يصبح هذا لنسخة استطلاع منزّلة على Windows:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

على macOS يبدأ بـ file:///Users/...، وعلى Linux عادةً file:///home/.... النسخ من المتصفح يتولى معالجة المسافات والشرطات المائلة.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

يشرح OBS وضعي الملف والرابط والأحجام وCustom CSS والتحديث في مرجع مصدر المتصفح.

غيّر التصميم بنفسك أو اطلب من الذكاء الاصطناعي ذلك

جهّز شعارك وملفات الخطوط وألوان العلامة وحجم اللوحة ومرجعاً بصرياً. عموماً لا تستطيع صفحة ويب تحميل خطوط أو صور من قرص حاسوب آخر.

موجه الذكاء الاصطناعي

استخدم المطالبة الخاصة بالنوع في دليل التصميم المناسب، أو ابدأ بهذه. أعطِ الذكاء الاصطناعي ملفك المنسوخ والأنماط والسكربتات التي يحمّلها.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

منع تحول الدردشة الواردة إلى كود

تأتي الأسماء والرسائل والعناوين والمبالغ والروابط من المشاهدين والخدمات الخارجية. تعامل معها كنص لا ككود، ونقّها عند وضعها في الصفحة عبر دالة العرض.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• إذا كانت الصفحة تتضمن أداة تنقية بالفعل، فاحتفظ بها ولا تضف ثانية.
• للملفات داخل مجلدات فرعية، صحح مسارات السكربتات.
• لا تلصق الأسماء الخام داخل نصوص السمات أو الألوان الخام في ترميز الأنماط. تحقق من قيم الأنماط قبل تعيين كل خاصية على حدة.
• حتى HTML المنقّى ليس آمناً للتنفيذ كـ JavaScript أو للاستخدام كتعليمات للذكاء الاصطناعي.

معلومات إضافية: دليل OWASP لوجهات العرض الآمنة وتنقية HTML.

اختبره، جزءاً جزءاً

ملفات تقدمها للذكاء الاصطناعي

أعطِ الذكاء الاصطناعي ملف التراكب نفسه وملفات CSS/JS التي يحمّلها، إضافة إلى هذه الملفات. مرجع الأحداث وحده لا يشرح أدوات التحكم بالاستطلاع أو كود تخطيط كل تراكب.

حل المشكلات

أصلح أصغر مشكلة مؤكدة أولاً. تغيير المظهر لا ينبغي أن يحتاج تعديلات على سكربتات الالتقاط أو حقول أحداث جديدة. إذا شاركت نسخة عامة، أرفق ملفاتها واترك ملفات التشغيل الخاصة خارجها.