Loading... ## 前言 > 因为家中老人在跟抖音的主播学习广场舞,用手机看直播实在不是特别方便,而且有的时候来个信息,接个电话时不时就错过一部分内容,所以就有了下面的这个抖音直播投屏到电视的应用 ## 代码 ### 框架 | 组建名称 | 版本 | | -------------- | -------- | | Thinkphp | 5.0 | | HBuilder X | 3.1.13 | | 安卓Dlna投屏 | 1.0.1 | ### 实现 > 这里要说明下,我将上篇文章[php抖音直播源抓取](https://www.jonasen.cn/share/149.html) 封装成了个api可以直接解析,如果需要自建的,可以参考下,自己封装下解析地址。 ```javascript <template> <view class="content"> <view class=""> <button type="default" @click="copyToClip()">粘贴</button> </view> <view class="text-area"> <text v-html="title" class="title"></text> </view> <view> <view v-for="dev in devList" :key="dev.id"> <button @click="start(dev.id)">{{dev.name}}</button> </view> </view> <button @click="search">选择设备</button> </view> </template> <script> const dlna = uni.requireNativePlugin('JX-Dlna') export default { data() { return { title: '', devList: [], playContent:'', playurl:'' } }, onLoad() { //this.search() }, methods: { copyToClip(){ var _that=this; uni.getClipboardData({ success:function(res){ if(res.data.length>0){ console.log(res.data); console.log(_that.isURL(res.data)); }else{ uni.showToast({ title:'请先复制推送地址', icon:none }) } } }) }, isURL(domain) { var name = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/; if( !(name.test(domain))) { return false; } else { var arr=domain.match(name); if(arr[0]=='v.douyin.com'){ var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; var arr1=reg.exec(domain); var _that=this; uni.request({ method:'GET', url:'http://www.xxx.cc/Douyin?url='+arr1[0], //这里是我自己封装的抖音直播解析的api success: (res) => { if(res.data.code==200){ //res.data.data.url this.playurl=res.data.data.url; this.title=res.data.data.title; }else{ uni.showToast({ title:'系统错误请稍后再试', icon:none }) } } }) }else{ this.playurl=arr[0]; this.playContent=arr[0] } return true; } }, search(){ this.title = '' this.devList = [] dlna.search(result => { //alert(result.type) this.title += '通知类型:' + result.type + ' 设备名:' + result.name + ' 设备Id:' + result.id + '<br />' if(result.type === 'add'){ this.devList.push({'id': result.id, 'name': result.name}) }else { this.devList = this.devList.filter(x => x.id != result.id) } }) }, start(id){ dlna.play({'id': id, 'url': this.playurl, 'title': this.title}, result => { this.title = result.msg }) } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style> ``` 这里将源代码整体打包了,需要研究的小伙伴自行下载。 [源码下载](https://wwe.lanzoui.com/iuiSYpes14h) [app下载](https://wwe.lanzoui.com/iTigmpes17a) ### 操作方法 #### 1、打开直播页面,点击 `...`点击分享 #### 2、点击复制链接  #### 点击app中的`粘贴`按钮 当页面出现直播的标题后,点击选择设备进行投屏  最后修改:2021 年 05 月 24 日 12 : 11 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用,请随意赞赏 赞赏作者 支付宝微信
4 条评论
看到不少抖音投屏的,还真不知道怎么弄的。
抖音视频投屏比较简单,抖音直播的话相对来说还算有点难度OωO
厉害了,自己开发的吗
当然啦(╯‵□′)╯︵┴─┴