Away from the sharing economy, ushered in the wave of live streaming. As a developer, you always want to explore your own uncharted territory. Today I will teach you how to build an SRS live streaming service and a Node.js service. Node.js service requests video data from SRS live stream service, parses the requested data, and finally pushes the parsed data to the VIDEO tag of HTML page.

This paper will focus on the following aspects:

  • Purchase cloud services and install the necessary development environment on the cloud host
  • Build SRS video streaming service
  • Build node.js service to parse SRS video stream data
  • Resolve cross-domain requests in Node.js services

Buying cloud services

Cloud market services have many choices, such as domestic so-and-so cloud, foreign so-and-so cloud. For the avoidance of suspicion, I don’t recommend it here. Note that the examples in this article are in an Ubuntu environment, so ubuntu is recommended for cloud hosts.

Here are the tools for connecting cloud services from different terminals:

  • 1. Download and install Putty, the Windows SSH and Telnet client tool. Download Putty. 2. User name: root, Host: 193.112.195.120 3. Putty Password help

  • Run SSH -q -l root -p 22 193.112.195.120. 3. Enter the password of the CVM instance to log in.

  • On a COMPUTER running Linux or Mac OS X (Login using a key) 1. Open the SSH client (Mac users can use the terminal provided by the system). 2. Find the local storage address of the SSH key file associated with your cloud server. 3. Your key must not be publicly visible for SSH to work. Use this command: chmod 400 [key file path]. 4. Run SSH [-i key file path] [email protected].

Configure the Ubuntu development environment

Install wget

Using the wget command, you can download files from the specified URL. For details about the command, see wget command.

Install wget tool command:

sudo apt-get update  
sudo apt-get install wget  
Copy the code

Check whether wGET is installed successfully:

Install node.js

There are many ways to install Node.js in Ubuntu. For details, see installing Node.js in Ubuntu. This article will use the source code method:

  • Upgrade your system and install some node.js required packages
sudo apt-get update
sudo apt-get install python gcc make g++
Copy the code

  • Get the source code for Node.js (version v8.11.1)
Sudo wget http://nodejs.org/dist/v8.11.1/node-v8.11.1.tar.gz sudo tar ZXVF node - v8.11.1. Tar. GzCopy the code

  • Start the installation
cdNode-v8.11.1 sudo./configure sudo make installCopy the code

Check the installed version of Node.js: node-v

Install nginx before installing itpcre

Installing pcre

  • Download the PCRE source code
Sudo wget https://ftp.pcre.org/pub/pcre/pcre2-10.31.tar.gz sudo tar ZXVF pcre2-10.31. Tar. GzCopy the code

  • Installing pcre

configuration

cdPcre2 10.31 sudo. / configureCopy the code

compile

sudo make
Copy the code

The installation

sudo make install
Copy the code

Zlib needs to be installed before installing Nginx

Install the zlib

sudo apt-get install zlib1g-dev
Copy the code

Install nginx

There are many ways to install nginx, you can see the installation and configuration of Nginx in Ubuntu.

Here I will install nginx using source code.

Download nginx source and extract the sudo wget http://nginx.org/download/nginx-1.12.2.tar.gz sudo tar ZXVF nginx – 1.12.2. Tar. Gz

configuration

sudo ./comfigure
Copy the code

Compile sudo make

The installation

sudo make install

** Note: ** Sometimes you also need to install some nginx packages

Run the following command to install the nginx package

sudo apt-get install nginx-core
sudo apt-get install nginx-extras
sudo apt-get install nginx-full
sudo apt-get install nginx-light
Copy the code

Conf file. Run the vi command to edit the nginx.conf file in /etc/nginx.nginx. conf. Vi Common Commands

Here are some of the most common vi commands:

  • Open the file sudo vi XXXX

  • Type file edit mode to open the file, press I (insert appears at the bottom of the file)

  • To switch file mode, press ESC (insert disappears at bottom of file)

  • To exit the file, press: + Q +! Press: + W + Q to save the configuration and exit

Start the nginx service The default nginx startup port is 80

Check whether the port is occupied before starting the system: sudo lsof -i:80 If the port is occupied, run the kill command to kill the process.

The nginx startup file is stored in the /usr/local/nginx/sbin directory.

Sudo nginx // Start service sudo nginx-sStop // Stop the service sudo nginx-sReload // Restart service sudo nginx -t -c /usr/local/nginx/conf/nginx.conf // Check whether nginx configuration is correctCopy the code

Start the FLV service of the SRS in Ubuntu

SRS is positioned as an operation-grade cluster of Live Internet servers, pursuing better conceptual integrity and the simplest code to implement. SRS provides a variety of video streaming services, detailed in the SRS Github documentation.

Common Live broadcast protocols:

  • RTMP: The underlying layer is based on TCP and relies on Flash in the browser.
  • Http-flv: Transmits FLV based on HTTP streaming I/O and plays FLV based on browser support.
  • Websocket-flv: Transmits FLV based on WebSocket and plays FLV based on browser support. WebSocket is established over HTTP, and an HTTP connection must be established before a WebSocket connection is established.
  • HLS: Http Live Streaming, an Http – based protocol proposed by Apple. HTML5 can play directly.
  • RTP: Based on UDP. The delay is 1 second. The browser does not support RTP.

I chose http-FLV here because the framework I used to parse SRS video streams was Bibili’s FLV framework, as described in the next section. For details about the http-FLV service deployment process, see SRS-HTTP-FLV deployment example.

  • To obtain the SRSgit clone https://github.com/ossrs/srs && cd srs/trunk
  • Configure the SRSsudo ./configure && make
  • Compile the SRSsudo make
  • Start the servicesudo ./objs/srs -c conf/http.flv.live.conf

OBS live streaming software

OBS software is free, open source software for live streaming and recording. As for the use of OBS details see douyu OBS tutorial.

The path to the stream needs to be configured in OBS: RTMP :// your IP address /live, and the name of the stream.

To test whether FLV streaming delivery success Enter http://118.89.247.129:8080/live/live.flv in the browser, if there is a downloadable video, explain the success of OBS to push the SRS service flow service.

The framework for parsing live streams -flv.js

Flv.js is an open source project from Bilibli. It parses FLV files and feeds them to native HTML5 Video tags to play audio and Video data, making it possible for browsers to play FLV without Flash. See live streaming with flv.js for details.

I open source my code on Github using the flv.js library to implement live streaming. The code is a service built using the Node.js Express framework. To run the code on an Ubuntu server, you need to have some Node.js knowledge.

git cloneHTTP: / / https://github.com/spursy/live.git / / clone node. Js codecdLive // Enter the project NPM install // Install the necessary packages for the project NPM run dev // Start the projectCopy the code

Note that you need to modify the video source path in live/ View /index.html before starting the project

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv'."isLive": true//<==== add this url:"Http://bianchenggou.wang:8080/live/live.flv ', / / < = = to modify / / url:"demo.flv"}); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); / / load flv_start (); }Copy the code

Realize FLV video streaming

Abnormal changes

When the program start node. Js to http://193.112.195.120:9000/ after service, does not receive the video stream, through chrome F12 abnormal shortcuts view:

The console exception shows that cross-domain requests are not allowed. There are many ways to resolve cross-domain requests that are not allowed. See the article Resolving cross-domain.

I am using the nGINx configuration of the server to allow cross-domain access. See nginx Cross-domain configuration.

When installing nginx, the nginx.conf file is placed in the folder **/usr/local/nginx/conf**. Nginx configuration files can be used in the nginx tutorial.

Modified as follows:

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        # #
        # Basic Settings
        # #

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        # #
        # Logging Settings
        # #
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        # #
        # Gzip Settings
        # #
        gzip on;
        gzip_disable "msie6";

        # #
        # Access-Control
        # #add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; server { listen 80; server_name bianchenggou.wang; Location/SRS / {proxy_pass http://127.0.0.1:8080/; } location / {proxy_pass http://127.0.0.1:9000/; }}}Copy the code

Since nginx proxies all requests, the video source path in live/view/index.html should be changed to:

if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv'."isLive": true//<==== add this url:"Http://bianchenggou.wang/srs/live/live.flv ', / / < = = to modify / / url:"demo.flv"}); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); / / load flv_start (); }Copy the code

When the Node service is accessed again, no exception occurs.

The real realization of live video

The configuration of OBS live streaming software remains unchanged. After pushing live streaming according to the tutorial, start node.js service and enter the live streaming page: