使用nginx-rtmp搭建直播服务器(OBS)

视频直播的流程可以分为如下几步:

采集 —>处理—>编码和封装—>推流到服务器—>服务器流分发—>播放器流播放

这里使用的传输协议是RTMP, 所以只要支持RTMP 流协议的播放器都可以使用,这里我们使用nginx,

推流用到的是OBS

拉流用的是vue实现

用到的资源

服务器
obs.exe
vue.js

下面上步骤

  1. 安装好docker后,下载nginx-rtmp镜像,并且运行服务映射端口到1945和8000

docker pull alfg/nginx-rtmp
docker run -it -p 1935:1935 -p 8000:80 --rm alfg/nginx-rtmp

  1. obs设置FMS和密码流(服务器IP)
    使用nginx-rtmp搭建直播服务器(OBS)_第1张图片
  2. 新建一个直播源
  3. 开始串流
  4. vue创建组件

#安装直播组件
cnpm install video.js
cnpm install aes-decrypter
cnpm install m3u8-parser
cnpm install mpd-parser
cnpm install mux.js
cnpm install url-toolkit
cnpm install videojs-contrib-hls

#新建一个vue

<template>
    <div>

    

      <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
    
    <source src="http://192.168.99.100:8000/live/test.m3u8" >
video>

    div>
  template>
   
  <script>

import videojs from 'video.js'
import 'videojs-contrib-hls'


  export default {
    data () {
      return {
      
      }
    
    },
    mounted:function(){

      videojs('my-video', {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})

    }
  }
  script>
   
  <style>
  style>

完成收工

使用nginx-rtmp搭建直播服务器(OBS)_第2张图片

你可能感兴趣的:(vue)