npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webrtc-cloud-mixer

v1.0.5

Published

Webrtc 多视频合成、本地录制、云端录制;videos merger、remote、local recording;

Downloads

4

Readme

webrtc-cloud-mixer 快速开始

安装

npm install webrtc-cloud-mixer

引入

import {WebRTCRecorder} from 'webrtc-cloud-mixer'

配置说明

| 字段 | 字段说明| |:-:|:-:| | api| 远程服务端API| |logger| 是否开启日志| |bandwidthInKbps|远程发送宽带配置(单位kbps),如果画质不清晰可以增加| |recordMic| 是否录制麦克风,如果不开启音频默认为视频的混音,开启后则会同时录制麦克分声音到混合音频| |config| webrtc协商类型、stun服务地址、turn服务地址等配置,遵循原生 PeerConnection(configuration) 参数配置| |mergerParams| 合成输出基础配置| |videoElements|要合并的video元素,内部参数为布局,数组第一个元素为主要画面也就是底层铺满画面|

示例

初始化

let recorder = new WebRTCRecorder({
	api: 'http://127.0.0.1:18090', // 远程服务端API
	logger: true, // 是否开启日志
	recordMic: false, // 是否录制麦克分
	config: { 
	  sdpSemantics: 'unified-plan',
	  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] 
	}, // webrtc ice servers 配置 
	mergerParams: {
	  width: 1920,
	  height: 1080,
	  fps: 30
	  
	} //合成输出参数配置
  })
  console.log(recorder)
  
  

画面合成

let videoElements = [
	{
	  type: 'mp4',
	  dom: document.getElementById('localmeidastream'),   // 固定视频dom
	  x: 0,
	  y: 0,
	  width: recorder.mergerParams.width,
	  height: recorder.mergerParams.height,
	  mute: true
	},
	{
	  type: 'mp4',
	  dom: document.getElementById('staticmeidastream'),   // 动态视频dom
	  x: 100,   // x坐标
	  y: 100,   // y坐标
	  width: 200,   // 宽度
	  height: 200,  // 高度
	  mute: false
	},
	{
	  type: 'mp4',
	  dom: document.getElementById('staticmeidastream'),   // 动态视频dom
	  x: recorder.mergerParams.width-200,   // x坐标
	  y: recorder.mergerParams.height-200,   // y坐标
	  width: 200,   // 宽度
	  height: 200,  // 高度
	  mute: false
	}
  ]
  //开始合成
  await recorder.startStreamMerger(videoElements,'requestAnimation')
  
  //获取合成视频 mediaStream
  console.log(recorder.mergerStream)
  
  //将合成指定stream 投射到指定 video元素 【mergerVideoDom】为自定义video标签 ID
  recorder.setDomVideoStream('mergerVideoDom',recorder.mergerStream)
  

本地录制

本地录制不需要配置API,录制全在本地浏览器中进行

//开启画面合成
await recorder.startStreamMerger(videoElements, 'requestAnimation')
//开启本地录制
await recorder.sendLocalRecord(recorder.mergerStream)
//10s后结束录制并获取录制的流以及录制时常
setTimeout(async () => {
	const { blob, videoUrl, totalTime } = await recorder.stopLocalRecord()
	console.log(blob, videoUrl, totalTime)
	//本地预览 <video id="remoteRecordVideo" :src="localRecordVideoUrl" controls width="600" height="300" autoplay></video>
	that.localRecordVideoUrl = videoUrl
},10000)
await recorder.sendRemoteRecord(recorder.mergerStream)

远程录制

远程录制的前提是前面合成画面已经开始合成;同时必须配置远程的API才可以用(注意控制比特率) 也可以手动在传输过程中变更 recorder.changeBitRate(2000)//2000kbps

await recorder.sendRemoteRecord(recorder.mergerStream)

远程录制返回参数

recorder.remoteCallBackInfo