Node.js और प्रतिक्रिया का उपयोग करके स्ट्रीमिंग के लिए एक एप्लिकेशन विकसित करना

सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का कहना है कि वह एक ऐसे अनुप्रयोग पर काम कर रहा है जो आपको उपयोगकर्ता के डेस्कटॉप पर हो रही स्ट्रीमिंग (स्ट्रीमिंग) को व्यवस्थित करने की अनुमति देता है।



एप्लिकेशन स्ट्रीमर से RTMP प्रारूप में एक स्ट्रीम प्राप्त करता है और इसे HLS स्ट्रीम में परिवर्तित करता है, जिसे दर्शकों के ब्राउज़र में चलाया जा सकता है। यह आलेख इस बारे में बात करेगा कि आप Node.js और React का उपयोग करके अपना स्वयं का स्ट्रीमिंग एप्लिकेशन कैसे बना सकते हैं। यदि आप उस विचार को देखने के आदी हैं, जो आपके हित में है, तो तुरंत अपने आप को कोड में डुबो दें, अब आप इस भंडार में देख सकते हैं।

मूल प्रमाणीकरण प्रणाली के साथ वेब सर्वर विकास

चलो Node.js पर आधारित एक साधारण वेब सर्वर बनाते हैं, जिसमें, पासपोर्ट.जेएस लाइब्रेरी का उपयोग करके, एक स्थानीय उपयोगकर्ता प्रमाणीकरण रणनीति लागू की जाती है। हम MongoDB का उपयोग सूचना के स्थायी भंडारण के रूप में करेंगे। हम Mongoose ODM पुस्तकालय का उपयोग कर डेटाबेस के साथ काम करेंगे।

एक नई परियोजना शुरू करें:

$ npm init 

निर्भरता स्थापित करें:

 $ npm install axios bcrypt-nodejs body-parser bootstrap config connect-ensure-login connect-flash cookie-parser ejs express express-session mongoose passport passport-local request session-file-store --save-dev 

प्रोजेक्ट डायरेक्टरी में, दो फ़ोल्डर बनाएँ - client और server । रिएक्ट पर आधारित फ्रंटेंड कोड client फ़ोल्डर में समाप्त हो जाएगा, और बैकएंड कोड server फ़ोल्डर में संग्रहीत किया जाएगा। अब हम server फ़ोल्डर में काम कर रहे हैं। अर्थात्, हम प्रमाणीकरण प्रणाली बनाने के लिए पासपोर्ट.जेएस का उपयोग करेंगे। हमने पहले ही पासपोर्ट और पासपोर्ट-स्थानीय मॉड्यूल स्थापित कर दिए हैं। इससे पहले कि हम स्थानीय उपयोगकर्ता प्रमाणीकरण रणनीति का वर्णन करें, एक app.js फ़ाइल बनाएं और एक साधारण सर्वर शुरू करने के लिए आवश्यक कोड को उसमें जोड़ें। यदि आप इस कोड को स्वयं चलाएंगे, तो सुनिश्चित करें कि आपके पास MongoDB DBMS स्थापित है और यह एक सेवा के रूप में चलता है।

यहाँ server/app.js पर प्रोजेक्ट में मौजूद फ़ाइल के लिए कोड है:

 const express = require('express'),    Session = require('express-session'),    bodyParse = require('body-parser'),    mongoose = require('mongoose'),    middleware = require('connect-ensure-login'),    FileStore = require('session-file-store')(Session),    config = require('./config/default'),    flash = require('connect-flash'),    port = 3333,    app = express(); mongoose.connect('mongodb://127.0.0.1/nodeStream' , { useNewUrlParser: true }); app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, './views')); app.use(express.static('public')); app.use(flash()); app.use(require('cookie-parser')()); app.use(bodyParse.urlencoded({extended: true})); app.use(bodyParse.json({extended: true})); app.use(Session({    store: new FileStore({        path : './server/sessions'    }),    secret: config.server.secret,    maxAge : Date().now + (60 * 1000 * 30) })); app.get('*', middleware.ensureLoggedIn(), (req, res) => {    res.render('index'); }); app.listen(port, () => console.log(`App listening on ${port}!`)); 

हम आवेदन के लिए आवश्यक सभी मिडलवेयर को डाउनलोड करते हैं, जो MongoDB से जुड़ा है, फ़ाइल भंडारण का उपयोग करने के लिए एक्सप्रेस सत्र को कॉन्फ़िगर किया गया है। एक सर्वर रिबूट के बाद भंडारण सत्र उन्हें बहाल करने की अनुमति देगा।

अब हम उपयोगकर्ता पंजीकरण और प्रमाणीकरण के आयोजन के लिए पासपोर्ट.जेएस रणनीतियों का वर्णन करते हैं। server फ़ोल्डर में एक auth फोल्डर बनाएं और उसमें passport.js फाइल रखें। यहाँ वह है जो server/auth/passport.js फ़ाइल में होना चाहिए:

 const passport = require('passport'),    LocalStrategy = require('passport-local').Strategy,    User = require('../database/Schema').User,    shortid = require('shortid'); passport.serializeUser( (user, cb) => {    cb(null, user); }); passport.deserializeUser( (obj, cb) => {    cb(null, obj); }); //  passport,    passport.use('localRegister', new LocalStrategy({        usernameField: 'email',        passwordField: 'password',        passReqToCallback: true    },    (req, email, password, done) => {        User.findOne({$or: [{email: email}, {username: req.body.username}]}, (err, user) => {            if (err)                return done(err);            if (user) {                if (user.email === email) {                    req.flash('email', 'Email is already taken');                               if (user.username === req.body.username) {                    req.flash('username', 'Username is already taken');                               return done(null, false);            } else {                let user = new User();                user.email = email;                user.password = user.generateHash(password);                user.username = req.body.username;                user.stream_key = shortid.generate();                user.save( (err) => {                    if (err)                        throw err;                    return done(null, user);                });                   });    })); //  passport,    passport.use('localLogin', new LocalStrategy({        usernameField: 'email',        passwordField: 'password',        passReqToCallback: true    },    (req, email, password, done) => {        User.findOne({'email': email}, (err, user) => {            if (err)                return done(err);            if (!user)                return done(null, false, req.flash('email', 'Email doesn\'t exist.'));            if (!user.validPassword(password))                return done(null, false, req.flash('password', 'Oops! Wrong password.'));            return done(null, user);        });    })); module.exports = passport; 

इसके अलावा, हमें उपयोगकर्ता मॉडल के लिए स्कीमा का वर्णन करने की आवश्यकता है (इसे UserSchema कहा UserSchema )। server फ़ोल्डर में database फ़ोल्डर बनाएँ, और इसमें UserSchema.js फ़ाइल।

यहाँ server/database.UserSchema.js के लिए कोड है। server/database.UserSchema.js फ़ाइल:

 let mongoose = require('mongoose'),    bcrypt  = require('bcrypt-nodejs'),    shortid = require('shortid'),    Schema = mongoose.Schema; let UserSchema = new Schema({    username: String,    email : String,    password: String,    stream_key : String, }); UserSchema.methods.generateHash = (password) => {    return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null); }; UserSchema.methods.validPassword = function(password){    return bcrypt.compareSync(password, this.password); }; UserSchema.methods.generateStreamKey = () => {    return shortid.generate(); }; module.exports = UserSchema; 

UserSchema की तीन विधियाँ हैं। जेनरेटहैश पद्धति को एक पासवर्ड को परिवर्तित करने के लिए डिज़ाइन किया गया है, जिसे सादे पाठ के रूप में, एक bcrypt हैश में प्रस्तुत किया गया है। हम इस विधि का उपयोग पासपोर्ट रणनीति में उपयोगकर्ताओं द्वारा दर्ज पासवर्ड को bcrypt हैश में बदलने के लिए करते हैं। प्राप्त पासवर्ड हैश को तब डेटाबेस में संग्रहीत किया जाता है। validPassword विधि उपयोगकर्ता द्वारा दर्ज किए गए पासवर्ड को स्वीकार करती है और डेटाबेस में संग्रहीत हैश के साथ उसके हैश की तुलना करके इसे सत्यापित करती है। generateStreamKey विधि अद्वितीय स्ट्रिंग्स बनाती है जो हम उपयोगकर्ताओं को RTMP क्लाइंट के लिए उनकी स्ट्रीमिंग कुंजियों (स्ट्रीम कुंजियों) के रूप में स्थानांतरित करेंगे।

यहाँ server/database/Schema.js फ़ाइल कोड है:

 let mongoose = require('mongoose'); exports.User = mongoose.model('User', require('./UserSchema')); 

अब जब हमने पासपोर्ट रणनीतियों को परिभाषित कर लिया है, तो UserSchema स्कीम का वर्णन किया है UserSchema और इसके आधार पर एक मॉडल बनाया है, आइए पासपोर्ट को app.js में app.js

यहाँ server/app.js फ़ाइल को पूरक करने के लिए कोड है:

 //       ,     const passport = require('./auth/passport'); app.use(passport.initialize()); app.use(passport.session()); 

इसके अलावा, नए मार्गों को app.js में पंजीकृत होना चाहिए ऐसा करने के लिए, निम्न कोड को server/app.js :

 //    app.use('/login', require('./routes/login')); app.use('/register', require('./routes/register')); 

routes फ़ोल्डर में server फ़ोल्डर में login.js और register.js फ़ाइलें बनाएँ। इन फ़ाइलों में हम उपरोक्त मार्गों के एक जोड़े को परिभाषित करते हैं और पंजीकरण और उपयोगकर्ता प्रमाणीकरण को व्यवस्थित करने के लिए पासपोर्ट मिडलवेयर का उपयोग करते हैं।

यहाँ server/routes/login.js के लिए कोड है:

 const express = require('express'),    router = express.Router(),    passport = require('passport'); router.get('/',    require('connect-ensure-login').ensureLoggedOut(),    (req, res) => {        res.render('login', {            user : null,            errors : {                email : req.flash('email'),                password : req.flash('password')                   });    }); router.post('/', passport.authenticate('localLogin', {    successRedirect : '/',    failureRedirect : '/login',    failureFlash : true })); module.exports = router; 

यहाँ server/routes/register.js फ़ाइल के लिए कोड है:

 const express = require('express'),    router = express.Router(),    passport = require('passport'); router.get('/',    require('connect-ensure-login').ensureLoggedOut(),    (req, res) => {        res.render('register', {            user : null,            errors : {                username : req.flash('username'),                email : req.flash('email')                   });    }); router.post('/',    require('connect-ensure-login').ensureLoggedOut(),    passport.authenticate('localRegister', {        successRedirect : '/',        failureRedirect : '/register',        failureFlash : true    }) ); module.exports = router; 

हम ejs templating इंजन का उपयोग करते हैं। login.ejs और register.ejs टेम्पलेट फ़ाइलों को views फ़ोल्डर में जोड़ें, जो server फ़ोल्डर में स्थित है।

यहाँ server/views/login.ejs :

 <!doctype html> <html lang="en"> <% include header.ejs %> <body> <% include navbar.ejs %> <div class="container app mt-5">    <h4>Login</h4>    <hr class="my-4">    <div class="row">        <form action="/login" method="post" class="col-xs-12 col-sm-12 col-md-8 col-lg-6">            <div class="form-group">                <label>Email address</label>                <input type="email" name="email" class="form-control" placeholder="Enter email" required>                <% if (errors.email.length) { %>                    <small class="form-text text-danger"><%= errors.email %></small>                <% } %>            </div>            <div class="form-group">                <label>Password</label>                <input type="password" name="password" class="form-control" placeholder="Password" required>                <% if (errors.password.length) { %>                    <small class="form-text text-danger"><%= errors.password %></small>                <% } %>            </div>            <div class="form-group">                <div class="leader">                    Don't have an account? Register <a href="/register">here</a>.                </div>            </div>            <button type="submit" class="btn btn-dark btn-block">Login</button>        </form>    </div> </div> <% include footer.ejs %> </body> </html> 

यहाँ server/views/register.ejs में क्या होना चाहिए। server/views/register.ejs फाइल:

 <!doctype html> <html lang="en"> <% include header.ejs %> <body> <% include navbar.ejs %> <div class="container app mt-5">    <h4>Register</h4>    <hr class="my-4">    <div class="row">        <form action="/register"              method="post"              class="col-xs-12 col-sm-12 col-md-8 col-lg-6">            <div class="form-group">                <label>Username</label>                <input type="text" name="username" class="form-control" placeholder="Enter username" required>                <% if (errors.username.length) { %>                    <small class="form-text text-danger"><%= errors.username %></small>                <% } %>            </div>            <div class="form-group">                <label>Email address</label>                <input type="email" name="email" class="form-control" placeholder="Enter email" required>                <% if (errors.email.length) { %>                    <small class="form-text text-danger"><%= errors.email %></small>                <% } %>            </div>            <div class="form-group">                <label>Password</label>                <input type="password" name="password" class="form-control" placeholder="Password" required>            </div>            <div class="form-group">                <div class="leader">                    Have an account? Login <a href="/login">here</a>.                </div>            </div>            <button type="submit" class="btn btn-dark btn-block">Register</button>        </form>    </div> </div> <% include footer.ejs %> </body> </html> 

हम कह सकते हैं कि हमने प्रमाणीकरण प्रणाली पर काम खत्म कर दिया है। अब हम परियोजना के अगले भाग का निर्माण शुरू करेंगे और RTMP सर्वर को कॉन्फ़िगर करेंगे।

RTMP सर्वर कॉन्फ़िगर करें

RTMP (रियल-टाइम मैसेजिंग प्रोटोकॉल) एक प्रोटोकॉल है जिसे टेप ड्राइव और सर्वर के बीच वीडियो, ऑडियो और विभिन्न डेटा के उच्च-प्रदर्शन संचरण के लिए विकसित किया गया था। चिकोटी, फेसबुक, यूट्यूब और कई अन्य स्ट्रीमिंग साइटें RTMP स्ट्रीम स्वीकार करती हैं और अपनी उच्च उपलब्धता सुनिश्चित करने के लिए इन धाराओं को अपने CDN में ट्रांसफर करने से पहले HTTP स्ट्रीम (HLS फॉर्मेट) में ट्रांसकोड करती हैं।

हम नोड-मीडिया-सर्वर मॉड्यूल का उपयोग करते हैं - RTMP मीडिया सर्वर का Node.js-कार्यान्वयन। यह मीडिया सर्वर RTMP स्ट्रीम को स्वीकार करता है और उन्हें ffmpeg मल्टीमीडिया फ्रेमवर्क का उपयोग करके HLS / DASH में परिवर्तित करता है। प्रोजेक्ट को सफलतापूर्वक काम करने के लिए, आपके सिस्टम पर ffmpeg स्थापित होना चाहिए। यदि आप लिनक्स पर काम कर रहे हैं और आपके पास पहले से ही ffmpeg स्थापित है, तो आप टर्मिनल पर निम्नलिखित कमांड को चलाकर इसका पता लगा सकते हैं:

 $ which ffmpeg # /usr/bin/ffmpeg 

नोड-मीडिया-सर्वर पैकेज के साथ काम करने के लिए, ffmpeg संस्करण 4.x की सिफारिश की जाती है। आप इस तरह ffmpeg के स्थापित संस्करण की जाँच कर सकते हैं:

 $ ffmpeg --version # ffmpeg version 4.1.3-0york1~18.04 Copyright (c) 2000-2019 the # FFmpeg developers built with gcc 7 (Ubuntu 7.3.0-27ubuntu1~18.04) 

यदि आपके पास ffmpeg स्थापित नहीं है और आप Ubuntu चला रहे हैं, तो आप निम्नलिखित कमांड को चलाकर इस ढांचे को स्थापित कर सकते हैं:

 #    PPA-.     PPA,    # ffmpeg  3.x. $ sudo add-apt-repository ppa:jonathonf/ffmpeg-4 $ sudo apt install ffmpeg 

यदि आप विंडोज पर काम करते हैं, तो आप विंडोज के लिए ffmpeg बिल्ड डाउनलोड कर सकते हैं।

server/config/default.js कॉन्फ़िगरेशन फ़ाइल को प्रोजेक्ट में जोड़ें:

 const config = {    server: {        secret: 'kjVkuti2xAyF3JGCzSZTk0YWM5JhI9mgQW4rytXc'    },    rtmp_server: {        rtmp: {            port: 1935,            chunk_size: 60000,            gop_cache: true,            ping: 60,            ping_timeout: 30        },        http: {            port: 8888,            mediaroot: './server/media',            allow_origin: '*'        },        trans: {            ffmpeg: '/usr/bin/ffmpeg',            tasks: [                                   app: 'live',                    hls: true,                    hlsFlags: '[hls_time=2:hls_list_size=3:hls_flags=delete_segments]',                    dash: true,                    dashFlags: '[f=dash:window_size=3:extra_window_size=5]'   }; module.exports = config; 

ffmpeg के मान को उस पथ से बदलें, जहाँ आपके सिस्टम पर ffmpeg स्थापित है। यदि आप विंडोज पर काम कर रहे हैं और ऊपर दिए गए लिंक से विंडोज असेंबली ffmpeg डाउनलोड किया है - फ़ाइल नाम में .exe एक्सटेंशन जोड़ना न भूलें। फिर उपरोक्त कोड का संबंधित टुकड़ा इस तरह दिखेगा:

 const config = {        ....        trans: {            ffmpeg: 'D:/ffmpeg/bin/ffmpeg.exe',            ...          }; 

अब निम्न कमांड चलाकर नोड-मीडिया-सर्वर स्थापित करें:

 $ npm install node-media-server --save 

server फ़ोल्डर में एक media_server.js फ़ाइल बनाएँ।

यहाँ server/media_server.js में डालने के लिए कोड है:

 const NodeMediaServer = require('node-media-server'),    config = require('./config/default').rtmp_server; nms = new NodeMediaServer(config); nms.on('prePublish', async (id, StreamPath, args) => {    let stream_key = getStreamKeyFromStreamPath(StreamPath);    console.log('[NodeEvent on prePublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`); }); const getStreamKeyFromStreamPath = (path) => {    let parts = path.split('/');    return parts[parts.length - 1]; }; module.exports = nms; 

NodeMediaService ऑब्जेक्ट NodeMediaService उपयोग करना काफी सरल है। यह RTMP सर्वर प्रदान करता है और आपको कनेक्शन के लिए प्रतीक्षा करने की अनुमति देता है। यदि स्ट्रीमिंग कुंजी अमान्य है, तो आने वाले कनेक्शन को अस्वीकार कर दिया जा सकता है। हम इस prePublish वस्तु की घटना को संभाल prePublish । अगले भाग में, हम prePublish ईवेंट श्रोता बंद होने के लिए अतिरिक्त कोड जोड़ते हैं। यह आपको अमान्य स्ट्रीमिंग कुंजियों के साथ आने वाले कनेक्शन को अस्वीकार करने की अनुमति देगा। इस बीच, हम आने वाले सभी कनेक्शनों को डिफ़ॉल्ट RTMP पोर्ट (1935) में स्वीकार करेंगे। हमें केवल node_media_server में app.js ऑब्जेक्ट आयात करना app.js और इसकी run विधि को कॉल करना होगा।

server/app.js के लिए निम्न कोड जोड़ें:

 //      app.js, //  ,      const node_media_server = require('./media_server'); //   run()   , // ,    - node_media_server.run(); 

ओबीएस (ओपन ब्रॉडकास्टर सॉफ्टवेयर) डाउनलोड और इंस्टॉल करें। एप्लिकेशन सेटिंग विंडो खोलें और Stream अनुभाग पर जाएं। Service क्षेत्र में Custom का चयन करें और rtmp://127.0.0.1:1935/live दर्ज करें rtmp://127.0.0.1:1935/live Server क्षेत्र में rtmp://127.0.0.1:1935/live । Stream Key फ़ील्ड को रिक्त छोड़ा जा सकता है। यदि प्रोग्राम आपको इस फ़ील्ड में भरने के बिना सेटिंग्स को सहेजने की अनुमति नहीं देता है, तो आप इसमें किसी भी वर्ण को सेट कर सकते हैं। Apply बटन पर और OK बटन पर क्लिक करें। अपने स्थानीय सर्वर पर अपने RTMP स्ट्रीम को स्थानांतरित करने के लिए Start Streaming बटन पर क्लिक करें।


OBS कॉन्फ़िगर करें

टर्मिनल पर जाएं और मीडिया सर्वर वहां क्या प्रदर्शित करता है, इसे देखें। आपको आने वाली स्ट्रीम और कई ईवेंट श्रोताओं के लॉग के बारे में जानकारी दिखाई देगी।


Node.js पर आधारित मीडिया सर्वर द्वारा टर्मिनल में डेटा आउटपुट

मीडिया सर्वर एपीआई तक पहुंच देता है, जिससे आप कनेक्टेड क्लाइंट की सूची प्राप्त कर सकते हैं। इस सूची को देखने के लिए, आप http://127.0.0.1:8888/api/streams पर ब्राउज़र पर जा सकते हैं। बाद में, हम ब्रॉडकास्ट उपयोगकर्ताओं की सूची प्रदर्शित करने के लिए इस API का उपयोग रिएक्ट एप्लिकेशन में करेंगे। इस API को एक्सेस करके आप यहां देख सकते हैं:

 {  "live": {    "0wBic-qV4": {      "publisher": {        "app": "live",        "stream": "0wBic-qV4",        "clientId": "WMZTQAEY",        "connectCreated": "2019-05-12T16:13:05.759Z",        "bytes": 33941836,        "ip": "::ffff:127.0.0.1",        "audio": {          "codec": "AAC",          "profile": "LC",          "samplerate": 44100,          "channels": 2        },        "video": {          "codec": "H264",          "width": 1920,          "height": 1080,          "profile": "High",          "level": 4.2,          "fps": 60             },      "subscribers": [                 "app": "live",          "stream": "0wBic-qV4",          "clientId": "GNJ9JYJC",          "connectCreated": "2019-05-12T16:13:05.985Z",          "bytes": 33979083,          "ip": "::ffff:127.0.0.1",          "protocol": "rtmp"       } 

अब बैकेंड लगभग तैयार है। यह एक कार्यशील स्ट्रीमिंग सर्वर है जो HTTP, RTMP और HLS तकनीकों का समर्थन करता है। हालाँकि, हमने अभी तक आने वाले RTMP कनेक्शन की जाँच के लिए एक सिस्टम नहीं बनाया है। हमें यह सुनिश्चित करने की अनुमति देनी चाहिए कि सर्वर केवल प्रमाणित उपयोगकर्ताओं से ही स्ट्रीम स्वीकार करता है। server/media_server.js में prePublish ईवेंट prePublish में निम्न कोड जोड़ें:

 //       const User = require('./database/Schema').User; nms.on('prePublish', async (id, StreamPath, args) => {    let stream_key = getStreamKeyFromStreamPath(StreamPath);    console.log('[NodeEvent on prePublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);    User.findOne({stream_key: stream_key}, (err, user) => {        if (!err) {            if (!user) {                let session = nms.getSession(id);                session.reject();            } else {                // -                       }); }); const getStreamKeyFromStreamPath = (path) => {    let parts = path.split('/');    return parts[parts.length - 1]; }; 

क्लोजर में, हम उपयोगकर्ता को स्ट्रीमिंग कुंजी के साथ खोजने के लिए डेटाबेस की क्वेरी करते हैं। यदि कुंजी उपयोगकर्ता की है, तो हम केवल उपयोगकर्ता को सर्वर से कनेक्ट करने और उनके प्रसारण को प्रकाशित करने की अनुमति देते हैं। अन्यथा, हम आने वाले RTMP कनेक्शन को अस्वीकार कर देते हैं।

अगले भाग में, हम React के आधार पर एक सरल क्लाइंट-साइड एप्लिकेशन बनाएंगे। दर्शकों को स्ट्रीमिंग प्रसारण देखने की अनुमति देने के लिए, साथ ही स्ट्रीमरों को अपनी स्ट्रीमिंग कुंजी उत्पन्न करने और देखने की अनुमति देने की आवश्यकता है।

लाइव स्ट्रीमिंग

अब clients फोल्डर में जाएं। चूंकि हम रिएक्ट एप्लिकेशन बनाने जा रहे हैं, हमें एक वेबपैक की आवश्यकता होगी। हमें लोडर भी चाहिए, जो जेएसएक्स कोड को जावास्क्रिप्ट कोड में अनुवाद करने के लिए उपयोग किया जाता है जो ब्राउज़र समझते हैं। निम्नलिखित मॉड्यूल स्थापित करें:

 $ npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader file-loader mini-css-extract-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli react react-dom react-router-dom video.js jquery bootstrap history popper.js 

प्रोजेक्ट में जोड़ें, इसकी मूल निर्देशिका में, webpack ( webpack.config.js ) के लिए कॉन्फ़िगरेशन फ़ाइल:

 const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const devMode = process.env.NODE_ENV !== 'production'; const webpack = require('webpack'); module.exports = {    entry : './client/index.js',    output : {        filename : 'bundle.js',        path : path.resolve(__dirname, 'public')    },    module : {        rules : [                           test: /\.s?[ac]ss$/,                use: [                    MiniCssExtractPlugin.loader,                    { loader: 'css-loader', options: { url: false, sourceMap: true } },                    { loader: 'sass-loader', options: { sourceMap: true } }                ],            },                           test: /\.js$/,                exclude: /node_modules/,                use: "babel-loader"            },                           test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,                loader: 'url-loader'            },                           test: /\.(png|jpg|gif)$/,                use: [{                    loader: 'file-loader',                    options: {                        outputPath: '/',                    },                }],            },           },    devtool: 'source-map',    plugins: [        new MiniCssExtractPlugin({            filename: "style.css"        }),        new webpack.ProvidePlugin({            $: 'jquery',            jQuery: 'jquery'        })    ],    mode : devMode ? 'development' : 'production',    watch : devMode,    performance: {        hints: process.env.NODE_ENV === 'production' ? "warning" : false    }, }; 

client/index.js फ़ाइल को प्रोजेक्ट में जोड़ें:

 import React from "react"; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'react-router-dom'; import 'bootstrap'; require('./index.scss'); import Root from './components/Root.js'; if(document.getElementById('root')){    ReactDOM.render(        <BrowserRouter>            <Root/>        </BrowserRouter>,        document.getElementById('root')    ); } 

यहाँ client/index.scss की सामग्री है:

 @import '~bootstrap/dist/css/bootstrap.css'; @import '~video.js/dist/video-js.css'; @import url('https://fonts.googleapis.com/css?family=Dosis'); html,body{  font-family: 'Dosis', sans-serif; } 

राउटर के लिए रिएक्ट राउटर का उपयोग किया जाता है। दृश्यपटल में, हम बूटस्ट्रैप का भी उपयोग करते हैं, और, प्रसारण, वीडियो के लिए। js। अब components फ़ोल्डर को client फ़ोल्डर में जोड़ें, और Root.js फ़ाइल में। यहाँ client/components/Root.js :

 import React from "react"; import {Router, Route} from 'react-router-dom'; import Navbar from './Navbar'; import LiveStreams from './LiveStreams'; import Settings from './Settings'; import VideoPlayer from './VideoPlayer'; const customHistory = require("history").createBrowserHistory(); export default class Root extends React.Component {    constructor(props){        super(props);       render(){        return (            <Router history={customHistory} >                <div>                    <Navbar/>                    <Route exact path="/" render={props => (                        <LiveStreams {...props} />                    )}/>                    <Route exact path="/stream/:username" render={(props) => (                        <VideoPlayer {...props}/>                    )}/>                    <Route exact path="/settings" render={props => (                        <Settings {...props} />                    )}/>                </div>            </Router>          } 

<Root/> घटक एक <Router/> प्रतिक्रिया घटक प्रदान करता है जिसमें तीन <Route/> कमर्स होते हैं। <LiveStreams/> घटक प्रसारण की एक सूची प्रदर्शित करता है। वीडियो प्रदर्शित करने के लिए <VideoPlayer/> घटक जिम्मेदार है। जेएस प्लेयर। स्ट्रीमिंग <Settings/> साथ काम करने के लिए इंटरफ़ेस बनाने के लिए <Settings/> घटक जिम्मेदार है।

client/components/LiveStreams.js बनाएँ:

 import React from 'react'; import axios from 'axios'; import {Link} from 'react-router-dom'; import './LiveStreams.scss'; import config from '../../server/config/default'; export default class Navbar extends React.Component {    constructor(props) {        super(props);        this.state = {            live_streams: []              componentDidMount() {        this.getLiveStreams();       getLiveStreams() {        axios.get('http://127.0.0.1:' + config.rtmp_server.http.port + '/api/streams')            .then(res => {                let streams = res.data;                if (typeof (streams['live'] !== 'undefined')) {                    this.getStreamsInfo(streams['live']);                           });       getStreamsInfo(live_streams) {        axios.get('/streams/info', {            params: {                streams: live_streams                   }).then(res => {            this.setState({                live_streams: res.data            }, () => {                console.log(this.state);            });        });       render() {        let streams = this.state.live_streams.map((stream, index) => {            return (                <div className="stream col-xs-12 col-sm-12 col-md-3 col-lg-4" key={index}>                    <span className="live-label">LIVE</span>                    <Link to={'/stream/' + stream.username}>                        <div className="stream-thumbnail">                            <img align="center" src={'/thumbnails/' + stream.stream_key + '.png'}/>                        </div>                    </Link>                    <span className="username">                        <Link to={'/stream/' + stream.username}>                            {stream.username}                        </Link>                    </span>                </div>            );        });        return (            <div className="container mt-5">                <h4>Live Streams</h4>                <hr className="my-4"/>                <div className="streams row">                    {streams}                </div>            </div>       } 

यह वही है जो एप्लिकेशन पृष्ठ जैसा दिखता है।


सीमावर्ती स्ट्रीमिंग सेवा

<LiveStreams/> घटक बढ़ने के बाद, एनएमएस एपीआई को सिस्टम से जुड़े ग्राहकों की एक सूची प्राप्त करने के लिए कहा जाता है। एनएमएस एपीआई उपयोगकर्ताओं के बारे में अधिक जानकारी प्रदान नहीं करता है। विशेष रूप से, हम इससे स्ट्रीमिंग कुंजी के बारे में जानकारी प्राप्त कर सकते हैं, जिसके माध्यम से उपयोगकर्ता RTMP सर्वर से जुड़े हैं। उपयोगकर्ता खातों के बारे में जानकारी प्राप्त करने के लिए डेटाबेस में प्रश्न उत्पन्न करते समय हम इन कुंजियों का उपयोग करेंगे।

getStreamsInfo पद्धति में getStreamsInfo हम एक XHR अनुरोध /streams/info अमल करते हैं, लेकिन हमने अभी तक ऐसा कुछ नहीं बनाया है जो इस अनुरोध का जवाब दे सके। निम्नलिखित सामग्री के साथ एक server/routes/streams.js बनाएँ:

 const express = require('express'),    router = express.Router(),    User = require('../database/Schema').User; router.get('/info',    require('connect-ensure-login').ensureLoggedIn(),    (req, res) => {        if(req.query.streams){            let streams = JSON.parse(req.query.streams);            let query = {$or: []};            for (let stream in streams) {                if (!streams.hasOwnProperty(stream)) continue;                query.$or.push({stream_key : stream});                       User.find(query,(err, users) => {                if (err)                    return;                if (users) {                    res.json(users);                           });           }); module.exports = router; 

हम जुड़े ग्राहकों के बारे में जानकारी प्राप्त करने के लिए, बैकेंड को एनएमएस एपीआई द्वारा लौटाए गए प्रवाह की जानकारी देते हैं।

हम उन उपयोगकर्ताओं की सूची प्राप्त करने के लिए एक डेटाबेस क्वेरी करते हैं, जिनकी स्ट्रीमिंग कुंजियाँ हमें NMS API से मिलती हैं। हम JSON प्रारूप में सूची लौटाते हैं। हम server/app.js में मार्ग को पंजीकृत करते हैं:

 app.use('/streams', require('./routes/streams')); 

परिणामस्वरूप, हम सक्रिय प्रसारणों की एक सूची प्रदर्शित करते हैं। इस सूची में उपयोगकर्ता नाम और थंबनेल शामिल हैं। हम लेख के अंत में प्रसारण के लिए थंबनेल बनाने के तरीके के बारे में बात करेंगे। थंबनेल को उन विशिष्ट पृष्ठों से बांधा गया है जहां HLS धाराएँ वीडियो। Js का उपयोग करके खेली जाती हैं।

client/components/VideoPlayer.js बनाएँ:

 import React from 'react'; import videojs from 'video.js' import axios from 'axios'; import config from '../../server/config/default'; export default class VideoPlayer extends React.Component {    constructor(props) {        super(props);        this.state = {            stream: false,            videoJsOptions: null              componentDidMount() {        axios.get('/user', {            params: {                username: this.props.match.params.username                   }).then(res => {            this.setState({                stream: true,                videoJsOptions: {                    autoplay: false,                    controls: true,                    sources: [{                        src: 'http://127.0.0.1:' + config.rtmp_server.http.port + '/live/' + res.data.stream_key + '/index.m3u8',                        type: 'application/x-mpegURL'                    }],                    fluid: true,                           }, () => {                this.player = videojs(this.videoNode, this.state.videoJsOptions, function onPlayerReady() {                    console.log('onPlayerReady', this)                });            });        })       componentWillUnmount() {        if (this.player) {            this.player.dispose()              render() {        return (            <div className="row">                <div className="col-xs-12 col-sm-12 col-md-10 col-lg-8 mx-auto mt-5">                    {this.state.stream ? (                        <div data-vjs-player>                            <video ref={node => this.videoNode = node} className="video-js vjs-big-play-centered"/>                        </div>                    ) : ' Loading ... '}                </div>            </div>       } 

HLS- video.js.

,

client/components/Settings.js :

 import React from 'react'; import axios from 'axios'; export default class Navbar extends React.Component {    constructor(props){        super(props);        this.state = {            stream_key : ''        };        this.generateStreamKey = this.generateStreamKey.bind(this);       componentDidMount() {        this.getStreamKey();       generateStreamKey(e){        axios.post('/settings/stream_key')            .then(res => {                this.setState({                    stream_key : res.data.stream_key                });            })       getStreamKey(){        axios.get('/settings/stream_key')            .then(res => {                this.setState({                    stream_key : res.data.stream_key                });            })       render() {        return (            <React.Fragment>                <div className="container mt-5">                    <h4>Streaming Key</h4>                    <hr className="my-4"/>                    <div className="col-xs-12 col-sm-12 col-md-8 col-lg-6">                        <div className="row">                            <h5>{this.state.stream_key}</h5>                        </div>                        <div className="row">                            <button                                className="btn btn-dark mt-2"                                onClick={this.generateStreamKey}>                                Generate a new key                            </button>                        </div>                    </div>                </div>                <div className="container mt-5">                    <h4>How to Stream</h4>                    <hr className="my-4"/>                    <div className="col-12">                        <div className="row">                            <p>                                You can use <a target="_blank" href="https://obsproject.com/">OBS</a> or                                <a target="_blank" href="https://www.xsplit.com/">XSplit</a> to Live stream. If you're                                using OBS, go to Settings > Stream and select Custom from service dropdown. Enter                                <b>rtmp://127.0.0.1:1935/live</b> in server input field. Also, add your stream key.                                Click apply to save.                            </p>                        </div>                    </div>                </div>            </React.Fragment>       } 

passport.js, , , . /settings — . XHR- <Settings/> .

. Generate a new key . XHR- . , . . — GET POST /settings/stream_key . server/routes/settings.js :

 const express = require('express'),    router = express.Router(),    User = require('../database/Schema').User,    shortid = require('shortid'); router.get('/stream_key',    require('connect-ensure-login').ensureLoggedIn(),    (req, res) => {        User.findOne({email: req.user.email}, (err, user) => {            if (!err) {                res.json({                    stream_key: user.stream_key                })                   });    }); router.post('/stream_key',    require('connect-ensure-login').ensureLoggedIn(),    (req, res) => {        User.findOneAndUpdate({            email: req.user.email        }, {            stream_key: shortid.generate()        }, {            upsert: true,            new: true,        }, (err, user) => {            if (!err) {                res.json({                    stream_key: user.stream_key                })                   });    }); module.exports = router; 

shortid.

server/app.js :

 app.use('/settings', require('./routes/settings')); 

,

<LiveStreams/> ( client/components/LiveStreams.js ) :

 render() {    let streams = this.state.live_streams.map((stream, index) => {        return (            <div className="stream col-xs-12 col-sm-12 col-md-3 col-lg-4" key={index}>                <span className="live-label">LIVE</span>                <Link to={'/stream/' + stream.username}>                    <div className="stream-thumbnail">                        <img align="center" src={'/thumbnails/' + stream.stream_key + '.png'}/>                    </div>                </Link>                <span className="username">                    <Link to={'/stream/' + stream.username}>                        {stream.username}                    </Link>                </span>            </div>        );    });    return (        <div className="container mt-5">            <h4>Live Streams</h4>            <hr className="my-4"/>            <div className="streams row">                {streams}            </div>        </div>   } 

. cron, , 5 , .

server/helpers/helpers.js :

 const spawn = require('child_process').spawn,    config = require('../config/default'),    cmd = config.rtmp_server.trans.ffmpeg; const generateStreamThumbnail = (stream_key) => {    const args = [        '-y',        '-i', 'http://127.0.0.1:8888/live/'+stream_key+'/index.m3u8',        '-ss', '00:00:01',        '-vframes', '1',        '-vf', 'scale=-2:300',        'server/thumbnails/'+stream_key+'.png',    ];    spawn(cmd, args, {        detached: true,        stdio: 'ignore'    }).unref(); }; module.exports = {    generateStreamThumbnail : generateStreamThumbnail }; 

generateStreamThumbnail .

ffmpeg-, HLS-. prePublish ( server/media_server.js ):

 nms.on('prePublish', async (id, StreamPath, args) => {    let stream_key = getStreamKeyFromStreamPath(StreamPath);    console.log('[NodeEvent on prePublish]', `id=${id} StreamPath=${StreamPath} args=${JSON.stringify(args)}`);    User.findOne({stream_key: stream_key}, (err, user) => {        if (!err) {            if (!user) {                let session = nms.getSession(id);                session.reject();            } else {                helpers.generateStreamThumbnail(stream_key);                      }); }); 

, cron ( server/cron/thumbnails.js ):

 const CronJob = require('cron').CronJob,    request = require('request'),    helpers = require('../helpers/helpers'),    config = require('../config/default'),    port = config.rtmp_server.http.port; const job = new CronJob('*/5 * * * * *', function () {    request        .get('http://127.0.0.1:' + port + '/api/streams', function (error, response, body) {            let streams = JSON.parse(body);            if (typeof (streams['live'] !== undefined)) {                let live_streams = streams['live'];                for (let stream in live_streams) {                    if (!live_streams.hasOwnProperty(stream)) continue;                    helpers.generateStreamThumbnail(stream);                                  }); }, null, true); module.exports = job; 

5 . API NMS . server/app.js :

 //      app.js, const thumbnail_generator = require('./cron/thumbnails'); //   start()    thumbnail_generator.start(); 

परिणाम

, . , . - — . - — .

.

! , , ?