小程序访问监控视频流/实时视频流
最编程
2024-04-18 18:53:44
...
前言
最近公司在做社区的小程序项目,用的uniapp(二手项目),坑倒是不多,之前用过taro和mpvue,这个uniapp我就去年做过App,小程序不是特别了解,以为video标签就可以了,然后一直黑屏,推流视频是flv的,度娘了一下,发现video标签不支持flv格式,其他格式也会出现卡顿和黑帧现象
后来一顿搜索发现了live-player这个东西!
live-player
首先介绍live-player使用设置:
暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。(只有图片中的类目可以使用该微信组件,否则无法开通)
建议选择 工具 > 视频客服 这个类目,其他的需要上传许可证
官方使用:
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
Bug & Tip
- live-player 默认宽度300px、高度225px,可通过wxss设置宽高。
- 开发者工具上暂不支持。
- 相关介绍和原理可参考此文章
uniapp使用:
<template>
<view>
<live-player
src="http://********/gb28181/34020000001320000099.flv"
autoplay
@statechange="statechange"
@error="error"
background-mute
sound-mode="speaker"
mode="RTC"
catchtouchmove
style="width: 300px; height: 225px"
/>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
statechange(e) {
console.log('live-player code:', e.detail.code)
switch (e.detail.code) {
case 2004:break;
case 2103:
console.log("正在加载中,请稍后")
break;
case -2301:
tost("和远程服务断开连接");
}
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
},
}
}
</script>
<style>
</style>
注意事项
在使用过程中,不管你怎么调试,在微信开发工具中看到的都是黑屏,不要方,千万不要方,生成二维码,用真机看效果,在手机上你就会发现一切都是好用的!^v^,希望对您的开发提供帮助,有问题请留言交流!
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
4- 实时视频流 | 网络主播是做什么的?
-
游戏视频主播手册》 - 第 2 章 实时视频流平台 2.1 主流实时游戏视频流平台
-
开发实时视频流开发实时流软件开发的成本是多少
-
小程序访问监控视频流/实时视频流
-
Qt/C++ 视频监控拉动流显示/各种 rtsp/rtmp/http 视频流/摄像机捕捉/视频监控回放/记录存储
-
V4L2 框架 - 视频流停止 (VIDIOC_STREAMOFF) - 2. 驱动程序层关闭视频流
-
Tensorflow 实时视频流取证完整项目 - 代码详解
-
iOS 实时视频流初探:高保真
-
iOS 实时视频流初探:高保真