博客 (7)

一年前记录过浏览器上如何下载小鹅通的课程视频,现在发现那个插件已经不能用了,所以重新整理了一下,下载过程比上次简单多了。


插件还是那只可爱的小黄猫

GitHub 地址:https://github.com/xifangczy/cat-catch

浏览器扩展安装地址:Chrome / Edge / Firefox

与之前相比,功能改进了不少:

  • “从头捕获”,不需要手动拖动进度条,生怕没有录制完全。但是实际使用还是会丢失一部分开头,希望下个版本改进;

  • “使用 ffmpeg 合并”可以自动合并捕获的视频和音频,下载得到的是一个完整的视频文件;

  • “自动跳转到缓冲尾”可以不间断加载、节省录制时间,对下载非直播画面非常有用;

  • 可以设置播放速度,点击扩展图标,在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”,我觉得设置播放速度这个功能可有可无。


开始录制:

在浏览器上安装扩展后,打开需要录制视频的页面,点击缓存捕获:

QQ_1721982736497.png

然后在面板上点击“从头捕获”:

QQ_1721982784262.png

插件就自动开始从头播放并记录缓存了。

建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。

如果是录制“非直播”,建议勾选“自动跳转到缓冲尾”。

另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究,有兴趣的自己研究下。


播放完成后,会自动打开一个“猫抓 cat-catch”的网页,自动使用 ffmpeg 进行转码与合并。

完成后自动下载该文件。


提示:如果要继续捕获其它视频,请先关闭那个“猫抓 cat-catch”网页,否则捕获完成后无法下载。

xoyozo 5 个月前
3,672


本文过程较为复杂,且部分内容已无法实现,建议点击这里查阅最新的操作方法!


前言:本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。


第一步:下载视频

首先我使用 Edge 浏览器(Chrome 操作类似,不过安装扩展需要科学上网)。

2023 年初的时候,用 FetchV 这个扩展是非常方便的,它会自动嗅到网页中的视频,即使没有嗅到也可以用录制的方式来保存。

但到了过了一两个月发现 FetchV(及其马甲)经常打不开,或者无法嗅到视频流,更别提录制了。

所以我找到了另一款专业视频下载神器

image.png

当然它的马甲们用法也是大同小异,主界面是这样的:

image.png

开启捕获,同意下载多个文件,然后播放视频,耐心等待。

心急的朋友可以用修改播放速度的扩展(如 视频加速减速控制),例如用 16 倍速,那么一个 16 分钟的视频用 1 分钟就播放完成了。(或者在 F12 的控制台中使用 JS 代码加速:document.querySelector('video').playbackRate = 16; )

等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。

image.png


第二步:音频修复

下载后它会有两个 .mp4 文件保存到电脑上,其中较大的是视频部分,较小的是音频部分。

但是有个小问题是,这个音频文件用 Windows 自带播放器播放正常,用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题。

我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用,

apps.39913.13859945615656852.b1baa2a9-3899-402f-856c-99b5767be0e6.png

在这个软件中添加刚才的只有音轨的视频文件会提示转码,转码后的 .mp4 文件音轨就正常了。

具体步骤是依次点击“Create New Project”,“Add clip”,“Photo/Video”,选择文件后“Transcode”,保存以后默认会在文件名后加上“ (Transcoded).mp4


第三步:音视频合成

接下来是合成视频和音频,将视频文件命名为 v.mp4,音频文件命名为 a.mp4。

FFmpeg 官网下载 Windows 版,然后使用这个命令从音频文件中提取音轨:

ffmpeg -i a.mp4 -vn -acodec copy a.aac

再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件

ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4

相比于其它的视频转换工具,ffmpeg 直接提取合并的速度是极快的。


Tips:

  • 小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放,这会导致捕获不全,可以将进度条手动拖到末尾,这样它会停止播放,再次刷新就会从头开始播放。

  • 浮框中“点击下载”可能没反应,估计是在合成文件,过几秒钟多点几下,不会重复下载。

  • 如果要下载的视频比较长或者比较多,可以像我一样在虚拟机里进行,把视频播放器的音量开到最大,把操作系统的声音关闭。

xoyozo 2 年前
19,029

前提:

  • 监控摄像头有推流功能

  • 抖音有直播权限(粉丝数超过 1000)

  • 一个已备案的域名


流媒体服务器抖音直播流程.png

名词解释:

推流地址:由阿里云生成的接收摄像头视频流推送的地址。

播流地址:由阿里云生成可用于终端播放的视频流地址。


各环节功能解释:

摄像头:负责采集视频信息,并推送到阿里云。

阿里云视频直播服务:接收视频推流并分发到用户端(收费)。

OBS 软件:负责将视频流转化为可供直播伴侣调用的视频源。

直播伴侣:将视频源分发到短视频终端用户。


第一步:配置阿里云视频直播服务

1.1 在阿里云控制台中开通视频直播,在域名管理中添加域名。

image.png

这里需要添加两个域名,一个是推流域名,一个是播流域名。顾名思义,“推流”指从摄像头将流推送到阿里云,“播流”是用户播放视频流。

以添加域名推流域名“rtmp.xoyozo.net”和播流域名“live.xoyozo.net”为例:

image.png

然后按列表中的 CNAME 地址对域名作解析即可。

解析生效后,点击任意一个域名进行配置,将推流域名和播流域名相互绑定。成功后,可以在推流域名中的播流信息中看到播流域名,在播流域名的推流信息中也能看到推流域名。

1.2 生成推流地址/播流地址

在工具箱中点击地址生成器。

image.png

选择推流域名和播流域名,AppName 和 StreamName 任意填写,生成成功后获取以下地址:

image.png

注:鉴权串是按照鉴权规则生成的串,默认有效期 30 分钟,超出时间即中断推流。可以在域名管理中修改该值,或直接关闭 URL 鉴权。


第二步:在摄像机控制面板中配置推流域名

该步骤因摄像机的品牌和型号不同而有所差异。本文以 IP CAMERA 为例。

首先使用 IP 搜索工具在局域网上搜索摄像机,找到摄像机的 IP 地址。

image.png

在浏览器上打开,输入用户名和密码进入管理面板。

image.png

在“参数设置”-“网络设置”- RTMP Publish 中,将推流地址填入到“预定网址”中,点击“应用”。

image.png

刷新后查看“直播状态”和“直播网址”是否已生效。

若配置成功,可将播流地址在视频播放器中打开观看,或直接在 iPhone 或安卓手机中打开播流地址。


第三步:使用 OBS Studio 将直播流信号转换为虚拟摄像头信号

因抖音直播伴侣无法使用播流地址作为视频源进行直播输出,故使用 OBS 将播流信号转化为虚拟的本机摄像头信号源供直播伴侣调用。

下载安装 OBS Studio,添加一个“场景”:

image.png

然后添加一个“媒体源”:

image.png

去掉“本地文件”前面的勾,将播流地址填到“输入”框中:

image.png

确定后即可预览到直播内容:

image.png

拖动视频区域可调整输出范围。

点击“启动虚拟摄像机”。

提示:OBS 创建的虚拟摄像机默认会从物理麦克风和桌面系统音频拾音,请按需在“混音器”中配置。


第四步:OBS 使用 VLC 视频源(此步可略过)

若 OBS 直接添加媒体源不稳定,可以使用 VLC 视频源。

下载安装 VLC 播放器

在 OBS Studio 中添加来源,选择“VLC 视频源”:

image.png

点击“播放列表”右侧的“+”,选择“添加路径 /URL”:

image.png

填写播流地址并确定。


第五步:配置抖音直播伴侣使用 OBS 的虚拟摄像机信号源

下载安装抖音直播伴侣,在任意场景中添加素材,选择“摄像头”:

image.png

摄像头选择“OBS Virtual Camera”:

image.png

点击“开始直播”:

image.png


下一步:如何配置视频号/微博直播的推流直播监控摄像头画面

xoyozo 3 年前
7,491

image.png

不支持当前所选音轨的文件格式,因此无法播放视频。请尝试播放其它音轨,确认其是否支持。


打开“套件中心”,打开右上角“设置”,添加“套件来源”:http://packages.synocommunity.com/,名称如:SynoCommunity,确定。

切换到“常规”选项卡,将“信任层级”改为至少“Synology Inc. 和信任的发行者”。否则会提示以下错误:

安装 [ffmpeg] 失败。此套件并非由 Synology Inc. 发布。

在“套件中心”左侧会出现“社群”,找到“ffmpeg”安装。

image.png

image.pngimage.png

如遇下载失败,多尝试几次。

或直接从官方网站下载 .spk 包:https://synocommunity.com/package/ffmpeg

在“套件中心”“手动安装”即可。

xoyozo 5 年前
13,647

最近做到微信语音时用到,将微信的媒体文件(.amr)下载到自己服务器上,并转码为 .mp3 格式。

引用“NAudio.dll”或直接搜索 NuGet 包,将音频文件转码为 .mp3 只需要:

var data = new MediaFoundationReader("..\\amr\\test.amr");
MediaFoundationEncoder.EncodeToMP3(data, "..\\test.mp3", 码率默认192000);

若出现异常:

无法加载 DLL“mfplat.dll”: 找不到指定的模块。

原因是没有安装音频解码组件,以 Windows Server 2012 R2 为例:

打开“服务器管理器”,添加角色和功能,勾选“桌面体验”(可能在“用户界面和基础结构”,默认还会勾上“墨迹和手写服务”)

安装完成需要重启计算机。

若出现异常:

不支持给定的 URL 的字节流类型。 (异常来自 HRESULT:0xC00D36C4)

原因可能是没有能够播放 .amr 的解码器,或音频驱动!

如果还是搞不定,本站搜索 ffmpeg 吧!

xoyozo 8 年前
9,835
软件名称价格软件介绍
ProPresenter试用 / $399一款跨平台(Mac、Windows),专为高品质现场(包括晚会、体育赛事、会议等)打造字幕及多媒体展示的软件。
(试用版是全功能的,但输出窗口有水印,试用期两周)
Sports Sounds Pro免费 / $149.95一款专业用于现场事件的音控软件。
(免费版是全功能的,仅有一些限制,比如:只能播放 10 组中每组的前 3 页的第 1 行,而且只能放置 180 个按钮)
Miro Video Converter免费可以导出兼容 HTML5 网页播放的视频格式(.mp4)。
Vistumbler免费无线网络扫描工具。
VNC免费 / $30 / $40Mac 上优秀的远程桌面软件。

TreeSize Free

免费快速扫描目录大小和空间占用
IconWorkshop试用 / 购买优秀的 ICO、ICON 制作软件,专业图标制作,编辑,转换工具

GoldWave

$19 / $59功能强大的数字音乐编辑器,是一个集声音编辑、播放、录制和转换的音频工具。
EasyRecovery EasyRecovery 是由全球著名数据厂商 Kroll Ontrack 出品的一款数据文件恢复软件。支持恢复不同存储介质数据:硬盘、光盘、U盘、移动硬盘、数码相机、手机、Raid 文件恢复等,能恢复包括文档、表格、图片、音视频等各种文件。
DiskGenius 一款专业级的数据恢复软件,算法精湛、功能强大!支持多种情况下的文件丢失、分区丢失恢复;支持文件预览;支持扇区编辑、RAID 恢复等高级数据恢复功能。
sagethumbs免费预览 PSD 文件
WebP Codec for Windows免费预览 WebP 文件
ventoy免费多系统启动U盘解决方案
xoyozo 9 年前
7,522

tgideas-html5-api-test-1-1

编者按:今天腾讯万技师同学的这篇技术总结必须强烈安利下,目录清晰,层次分明,每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散,帮你直观把这些知识点get起来。以现在HTML 5的势头,同志们,你看到的这些,可都是钱呐。

十二年前,无论多么复杂的布局,在我们神奇的table面前,都不是问题;

十年前,阿捷的一本《网站重构》,为我们开启了新的篇章;

八年前,我们研究yahoo.com,惊叹它在IE5下都表现得如此完美;

六年前,Web标准化成了我们的基础技能,我们开始研究网站性能优化;

四年前,我们开始研究自动化工具,自动化测试,谁没玩过nodejs都不好意思说是页面仔;

二年前,各种终端风起云涌,响应式、APP开发都成为了我们研究的范围,CSS3动画开始风靡;

如今,CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉,你是否开始探寻,接下来,我们可以玩什么,来为我们项目带来一丝新意?

没错,本文就是以HTML5 Device API为核心,对HTML5的一些新接口作了一个完整的测试,希望能让大家有所启发。

目录:

一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼? – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API

一、让音乐随心而动 – 音频处理 Web audio API

简介:

Audio对象提供的只是音频文件的播放,而Web Audio则是给了开发者对音频数据进行分析、处理的能力,比如混音、过滤。

系统要求:

ios6+、android chrome、android firefox

实例:

http://sy.qq.com/brucewan/device-api/web-audio.html

核心代码:

var context = new webkitAudioContext();
var source = context.createBufferSource();   // 创建一个声音源
source.buffer = buffer;   // 告诉该源播放何物 
createBufferSourcesource.connect(context.destination);   // 将该源与硬件相连
source.start(0); //播放

技术分析:

当我们加载完音频数据后,我们将创建一个全局的AudioContext对象来对音频进行处理,AudioContext可以创建各种不同功能类型的音频节点AudioNode,比如

1、源节点(source node)

我们可以使用两种方式加载音频数据:
<1>、audio标签

var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
 sound = context.createMediaElementSource(audio);
 sound.connect(context.destination);
});
audio.src = '/audio.mp3';

<2>、XMLHttpRequest

var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer'; 
xhr.onload = function() {
 context.decodeAudioData(request.response, function (buffer) {
 source = context.createBufferSource();
 source.buffer = buffer;
 source.connect(context.destination);
 }
}
xhr.send();

2、分析节点(analyser node)

我们可以使用AnalyserNode来对音谱进行分析,例如:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

function draw() {
 drawVisual = requestAnimationFrame(draw);
 analyser.getByteTimeDomainData(dataArray);
 // 将dataArray数据以canvas方式渲染出来
};

draw();

3、处理节点(gain node、panner node、wave shaper node、delay node、convolver node等)

不同的处理节点有不同的作用,比如使用BiquadFilterNode调整音色(大量滤波器)、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。

需要了解更多的音频节点可能参考:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

4、目的节点(destination node)

所有被渲染音频流到达的最终地点

思维发散:

1、可以让CSS3动画跟随背景音乐舞动,可以为我们的网页增色不少;
2、可以尝试制作H5酷酷的变声应用,增加与用户的互动;
3、甚至可以尝试H5音乐创作。

看看google的创意:http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

二、捕捉用户摄像头 – 媒体流 Media Capture

简介:

通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。

系统要求:

android chrome、android firefox

实例:

捕获用户摄像头 捕获用户麦克风

http://sy.qq.com/brucewan/device-api/camera.html

http://sy.qq.com/brucewan/device-api/microphone-usermedia.html

核心代码:

1、摄像头捕捉

navigator.webkitGetUserMedia ({video: true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 localMediaStream = stream;
}, function(e){

})

2、从视频流中拍照

btnCapture.addEventListener('touchend', function(){
	if (localMediaStream) {
		canvas.setAttribute('width', video.videoWidth);
		canvas.setAttribute('height', video.videoHeight);
		ctx.drawImage(video, 0, 0);
	}
}, false);

3、用户声音录制

navigator.getUserMedia({audio:true}, function(e) {
	context = new audioContext();
	audioInput = context.createMediaStreamSource(e);	
	volume = context.createGain();
	recorder = context.createScriptProcessor(2048, 2, 2);
	recorder.onaudioprocess = function(e){
		recordingLength += 2048;
		recorder.connect (context.destination); 
	}	
}, function(error){});

4、保存用户录制的声音

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;

思维发散:

1、从视频拍照自定义头像;
2、H5视频聊天;
3、结合canvas完成好玩的照片合成及处理;
4、结合Web Audio制作有意思变声应用。

三、你是逗逼? – 语音识别 Web Speech API简介:

1、将文本转换成语音;
2、将语音识别为文本。

系统要求:
ios7+,android chrome,android firefox

测试实例:

http://sy.qq.com/brucewan/device-api/microphone-webspeech.html

核心代码:

1、文本转换成语音,使用SpeechSynthesisUtterance对象;

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);

2、语音转换为文本,使用SpeechRecognition对象。

var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
	var interim_transcript = ''; 
	for (var i = event.resultIndex; i < event.results.length; ++i) {
		final_transcript += event.results[i][0].transcript;
	}
};

测试结论:

1、Android支持不稳定;语音识别测试失败(暂且认为是某些内置接口被墙所致)。

思维发散:

1、当语音识别成为可能,那声音控制将可以展示其强大的功能。在某些场景,比如开车、网络电视,声音控制将大大改善用户体验;
2、H5游戏中最终分数播报,股票信息实时声音提示,Web Speech都可以大放异彩。

 四、让我尽情呵护你 – 设备电量 Battery API简介:

查询用户设备电量及是否正在充电。

系统要求:

android firefox

测试实例:

http://sy.qq.com/brucewan/device-api/battery.html

核心代码:

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
 str += '<p>你的浏览器支持HTML5 Battery API</p>';
 if(battery.charging) {
 str += '<p>你的设备正在充电</p>';
} else {
 str += '<p>你的设备未处于充电状态</p>';
}
 str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
 str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}

测试结论:

1、QQ浏览器与UC浏览器支持该接口,但未正确显示设备电池信息;
2、caniuse显示android chrome42支持该接口,实测不支持。

思维发散:

相对而言,我觉得这个接口有些鸡肋。
很显然,并不合适用HTML5做电池管理方面的工作,它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作,当用户设备电量不足时,进入省电模式,比如停用滤镜、摄像头开启、webGL、减少网络请求等。

 五、获取用户位置 – 地理位置 Geolocation简介:

Geolocation API用于将用户当前地理位置信息共享给信任的站点,目前主流移动设备都能够支持。

系统要求:

ios6+、android2.3+

测试实例:

http://sy.qq.com/brucewan/device-api/geolocation.html

核心代码:

var domInfo = $("#info");

// 获取位置坐标
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
	domInfo.innerHTML="抱歉,你的浏览器不支持地理定位!";
}

// 使用腾讯地图显示位置
function showPosition(position) {
	var lat=position.coords.latitude;
	var lon=position.coords.longitude;

	mapholder = $('#mapholder')
	mapholder.style.height='250px';
	mapholder.style.width = document.documentElement.clientWidth + 'px';

	var center = new soso.maps.LatLng(lat, lon);
	var map = new soso.maps.Map(mapholder,{
		center: center,
		zoomLevel: 13
	});

	var geolocation = new soso.maps.Geolocation();
	var marker = null;
	geolocation.position({}, function(results, status) {
		console.log(results);
		var city = $("#info");
		if (status == soso.maps.GeolocationStatus.OK) {
			map.setCenter(results.latLng);
			domInfo.innerHTML = '你当前所在城市: ' + results.name;
		if (marker != null) {
			marker.setMap(null);
		}
		// 设置标记
		marker = new soso.maps.Marker({
			map: map,
			position:results.latLng
		});
		} else {
			alert("检索没有结果,原因: " + status);
		}
	});
}

测试结论:

1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确;
3、测试三星 GT-S6358(android2.3) geolocation存在,但显示位置信息不可用POSITION_UNAVAILABLE。

六、把用户捧在手心 – 环境光 Ambient Light简介:

Ambient Light API定义了一些事件,这些时间可以提供源于周围光亮程度的信息,这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。

系统要求:

android firefox

测试实例:

http://sy.qq.com/brucewan/device-api/ambient-light.html

核心代码:

这段代码实现感应用前当前环境光强度,调整网页背景和文字颜色。


var domInfo = $('#info');
if (!('ondevicelight' in window)) {
	domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
	var lightValue = document.getElementById('dl-value');
	window.addEventListener('devicelight', function(event) {
		domInfo.innerHTML = '当前环境光线强度为:' + Math.round(event.value) + 'lux';
		var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
		document.body.style.backgroundColor = backgroundColor;
		if(event.value < 50) {
			document.body.style.color = '#fff'
		} else {
			document.body.style.color = '#000'
		}
	});
}

思维发散:

该接口适合的范围很窄,却能做出很贴心的用户体验。

1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品,我们自然可以调整我们背景与文字颜色让用户感觉到舒适,我们还可以来一段安静的音乐,甚至使用Web Speech API播报当前时间,并说一声“晚安”,何其温馨;

2、该接口也可以应用于H5游戏场景,比如日落时分,我们可以在游戏中使用安静祥和的游戏场景;

3、当用户在工作时间将手机放在暗处,偷偷地瞄一眼股市行情的时候,我们可以用语音大声播报,“亲爱的,不用担心,你的股票中国中车马上就要跌停了”,多美的画面。

参考文献:
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/

转自 万技师 10 年前
3,871