实现h5端播放rtsp流视频--通过ffmpeg转流实现
实现h5端播放rtsp流视频–通过ffmpeg转流实现
安装包可通过官网下载,也可以评论邮箱发给你
#1. 安装 ffmpeg
- 解压 ffmpeg.zip
- 添加系统环境变量
cmd 输入 ffmpeg
2. 安装 node
1. node-v14.14.0-x64.msi 双击
2. 输入 node -v 输出 v14.14.0
3. 转流服务
-
新建文件夹 ceshi
-
在文件夹ceshi目录打开cmd
-
输入 npm init -y
-
输入 npm i node-rtsp-stream
-
在文件夹ceshi目录新建文件 index.js,输入下面代码
-
在文件夹ceshi目录打开cmd,输入 node index.js
const Stream=require('node-rtsp-stream');
// 设置rtsp视频流地址(替换需要拉取的)
const rtsp_url='rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
// 控制视频大小 ( -s)、帧率 ( -r)、视频比特率 ( -b:v)、音频比特率 ( -b:a)、音频通道数 ( -ac)、采样率 ( -ar)
const streams = new Stream({
name: 'sockets',
streamUrl: rtsp_url,
wsPort: 9998,
ffmpegOptions: { // 选项ffmpeg标志
'-stats': '', // 没有必要值的选项使用空字符串
'-r': 30, // 具有必需值的选项指定键后面的值
'-s': '1920*1080', // 1920*1080 2560*1920
'-b:v': '5000k',
'-qscale': 1
}
})
jsmpeg.min.js
window.JSMpeg={Player:null,VideoElement:null,BitBuffer:null,Source:{},Demuxer:{},Decoder:{},Renderer:{},AudioOutput:{},Now:function(){return window.performance?window.performance.now()/1e3:Date.now()/1e3},CreateVideoElements:function(){var elements=document.querySelectorAll(".jsmpeg");for(var i=0;i<elements.length;i++){new JSMpeg.VideoElement(elements[i])}},Fill:function(array,value){if(array.fill){array.fill(value)}else{for(var i=0;i<array.length;i++){array[i]=value}}},Base64ToArrayBuffer:function(base64){var binary=window.atob(base64);var length=binary.length;var bytes=new Uint8Array(length);for(var i=0;i<length;i++){bytes[i]=binary.charCodeAt(i)}return bytes.buffer},WASM_BINARY_INLINED:null};if(document.readyState==="complete"){JSMpeg.CreateVideoElements()}else{document.addEventListener("DOMContentLoaded",JSMpeg.CreateVideoElements)}JSMpeg.VideoElement=function(){"use strict";var VideoElement=function(element){var url=element.dataset.url;if(!url){throw"VideoElement has no `data-url` attribute"}var addStyles=function(element,styles){for(var name in styles){element.style[name]=styles[name]}};this.container=element;addStyles(this.container,{display:"inline-block",position:"relative",minWidth:"80px",minHeight:"80px"});this.canvas=document.createElement("canvas");this.canvas.width=960;this.canvas.height=540;addStyles(this.canvas,{display:"block",width:"100%"});this.container.appendChild(this.canvas);this.playButton=document.createElement("div");this.playButton.innerHTML=VideoElement.PLAY_BUTTON;addStyles(this.playButton,{zIndex:2,position:"absolute",top:"0",bottom:"0",left:"0",right:"0",maxWidth:"75px",maxHeight:"75px",margin:"auto",opacity:"0.7",cursor:"pointer"});this.container.appendChild(this.playButton);var options={canvas:this.canvas};for(var option in element.dataset){try{options[option]=JSON.parse(element.dataset[option])}catch(err){options[option]=element.dataset[option]}}this.player=new JSMpeg.Player(url,options);element.playerInstance=this.player;if(options.poster&&!options.autoplay&&!this.player.options.streaming){options.decodeFirstFrame=false;this.poster=new Image;this.poster.src=options.poster;this.poster.addEventListener("load",this.posterLoaded);addStyles(this.poster,{display:"block",zIndex:1,position:"absolute",top:0,left:0,bottom:0,right:0});this.container.appendChild(this.poster)}if(!this.player.options.streaming){this.container.addEventListener("click",this.onClick.bind(this))}if(options.autoplay||this.player.options.streaming){this.playButton.style.display="none"}if(this.player.audioOut&&!this.player.audioOut.unlocked){var unlockAudioElement=this.container;if(options.autoplay||this.player.options.streaming){this.unmuteButton=document.createElement("div");this.unmuteButton.innerHTML=VideoElement.UNMUTE_BUTTON;addStyles(this.unmuteButton,{zIndex:2,position:"absolute",bottom:"10px",right:"20px",width:"75px",height:"75px",margin:"auto",opacity:"0.7",cursor:"pointer"});this.container.appendChild(this.unmuteButton);unlockAudioElement=this.unmuteButton}this.unlockAudioBound=this.onUnlockAudio.bind(this,unlockAudioElement);unlockAudioElement.addEventListener("touchstart",this.unlockAudioBound,false);unlockAudioElement.addEventListener("click",this.unlockAudioBound,true)}};VideoElement.prototype.onUnlockAudio=function(element,ev){if(this.unmuteButton){ev.preventDefault();ev.stopPropagation()}this.player.audioOut.unlock(function(){if(this.unmuteButton){this.unmuteButton.style.display="none"}element.removeEventListener("touchstart",this.unlockAudioBound);element.removeEventListener("click",this.unlockAudioBound)}.bind(this))};VideoElement.prototype.onClick=function(ev){if(this.player.isPlaying){this.player.pause();this.playButton.style.display="block"}else{this.player.play();this.playButton.style.display="none";if(this.poster){this.poster.style.display="none"}}};VideoElement.PLAY_BUTTON='";VideoElement.UNMUTE_BUTTON='+'+'points="39,13 22,28 6,28 6,47 21,47 39,62 39,13"/>'+'' +' 4. h5播放
- html 实现 (引入 jsmpeg.min.js)
DOCTYPE html>
<html>
<head>
<title>实现h5端播放rtsp流视频--通过ffmpeg转流实现title>
head>
<body>
<div class="container">
<canvas id="video-canvas" width="1920" height="1080" style="width:100%;">canvas>
div>
<script type="text/javascript" src="./jsmpeg.min.js">script>
<script type="text/javascript">
const canvas = document.getElementById('video-canvas');
var urls = 'ws://127.0.0.1:9998';
var players = new JSMpeg.Player(urls, {canvas: canvas,videoBufferSize: 1024*1024});
script>
body>
html>
- vue-cli 实现
在vue-cli生成的项目里,index.html 里面(引入 jsmpeg.min.js)
在需要使用的vue文件里
<template><canvas id="videoCanvas" style="width:100%;"></canvas></template>
<script>
export default {
mounted() {
const canvas = document.getElementById('videoCanvas');
var urls = 'ws://127.0.0.1:9998';
var players = new JSMpeg.Player(urls, {canvas: canvas,videoBufferSize: 1024*1024});
}
}
<script>