Implementation approach

  • Download OBS software and record the video
  • Start a service with Node-media-server and push the stream to the server in OBS
  • The video source in Node-media-server can be played through FLv. js and HTML5 video tag

Begin to implement

The use of obs

Download obS please go to the official website, there are Windows, MAC, Linux three platform versions available for download. I am using the MAC version here, and other versions should be similar

  • First you need to create a new scene

    There are a number of scenarios that can be used here, let me demonstrate using display capture…

    You can name the scene, so I’ll just use the default name and click OK

Click OK again and the scene is created. Drag the scene to zoom in and out until the black background is covered

  • The essence of streaming video is actually a screenshot of a picture, we need to put this picture in a place, and then the front end can read from this place to display, so before this we need to start a service, as the front end to get the source address of the video

Node-media-server Enables the service

  1. Create a blank folder and executenpm init, enter related information as prompted, and download node-media-server
npm install node-media-server --save
Copy the code
  1. Create a new entry file named index.js
const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: The '*'}}; var nms = new NodeMediaServer(config) nms.run();Copy the code
  1. Then execute it on the command line
node index.js
Copy the code

If you see the following message, you have successfully started the Node-media-server service

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. Please Google the details and continue the project

  • Create a new index.html file
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> live </title> </head> <body> <script SRC ="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></video>
   <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               url: 'http://localhost:8000/live/hello.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>
</html>

Copy the code

There is a pit here, maybe because of MAC, the default video does not play automatically, and I did not add controls in the video label at the beginning, so a static picture is always displayed on the web page, but I accidentally found that the video is paused. =_=!

It can be recorded and played

  • Click the Settings in OBS to enter the Settings page, and click Stream. If it is live broadcast locally, select user-defined streaming media server for stream type, fill in THE URL as shown in the figure, and fill in the name set in index. HTML for stream namehello

We can also broadcast through bilibili and other live broadcasting platforms. Please fill in the live broadcasting link and name on your Bilibili here

  • Click the obS start stream button

Double click on index.html in your browser to view the live broadcast. Remember to click the start button at the bottom of the video